@elliemae/ds-grid 2.0.0-alpha.1 → 2.0.0-alpha.13

package/cjs/Grid.js

@@ -4,14 +4,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
 var reactDesc = require('react-desc');
 var lodash = require('lodash');
-var styled = require('styled-components');
-var styledSystem = require('styled-system');
 var dsSystem = require('@elliemae/ds-system');
-var ie11 = require('./ie11.js');
-var props = require('./props.js');
+var propTypes = require('./propTypes.js');
+var GridItem = require('./GridItem.js');
 var defaultProps = require('./defaultProps.js');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -20,101 +25,27 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const _excluded = ["rows", "cols", "alignItems", "children", "className", "direction", "justify", "gutter", "wrap"];
+const _excluded = ["rows", "cols", "alignItems", "children", "className", "justify", "gutter", "wrap"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-const GridItem = /*#__PURE__*/styled__default['default'].div.withConfig({
-  componentId: "sc-qbn2kv-0"
-})(["display:grid;display:-ms-grid;", " ", " ", " ", " ", " ", " ", " ", " -ms-grid-rows:", ";grid-template-rows:", ";column-gap:", ";row-gap:", ";"], styledSystem.flexbox, styledSystem.justifyContent, styledSystem.space, styledSystem.height, styledSystem.width, ie11.positionIE11Grid, props => {
-  if (typeof props.cols === 'object' && !Array.isArray(props.cols)) {
-    let data = '';
-
-    for (const key in props.theme.media) {
-      // using grid approach
-      if (props.cols[key] && Array.isArray(props.cols[key])) {
-        const mtg = dsSystem.mapTemplateGrid(props.cols[key]).join(' ');
-        const mtgs = dsSystem.mapTemplateGrid(props.cols[key]).map(c => `minmax(0, ${c})`).join(' ');
-        data += `@media (min-width: ${props.theme.breakpoints[key]}) {
-            -ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};
-            grid-template-columns: ${mtg || 'auto'};
-            -ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};
-            grid-template-columns: ${mtgs || 'auto'};
-          }`;
-      } else if (props.isSpanParent) {
-        data += `@media (min-width: ${props.theme.breakpoints[key]}) {
-              -ms-grid-columns: repeat(${props.cols[key]}, 1fr);
-              grid-template-columns: repeat(${props.cols[key]}, 1fr);
-            }`;
-      }
-    }
-
-    return data;
-  }
-
-  if (Array.isArray(props.cols)) {
-    const mtg = dsSystem.mapTemplateGrid(props.cols).join(' ');
-    const mtgs = dsSystem.mapTemplateGrid(props.cols).map(c => `minmax(0, ${c})`).join(' ');
-    return `
-      -ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};
-      grid-template-columns: ${mtg || 'auto'};
-      -ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};
-      grid-template-columns: ${mtgs || 'auto'};
-      `;
-  }
-
-  if (props.isSpanParent) {
-    return `
-      -ms-grid-columns: repeat(${props.cols}, 1fr);
-      grid-template-columns: repeat(${props.cols}, 1fr);`;
-  }
-
-  return '';
-}, props => {
-  if (!props.isSpanParent) return '';
-
-  if (typeof props.span === 'object') {
-    let data = '';
-
-    for (const key in props.theme.media) {
-      if (props.span[key] && props.theme.breakpoints[key]) {
-        data += `@media (min-width: ${props.theme.breakpoints[key]}) {
-            -ms-grid-column: auto / span ${props.span[key]};
-            grid-column: auto / span ${props.span[key]};
-          }`;
-      }
-    }
-
-    return data;
-  }
-
-  return `
-    -ms-grid-column: auto / span ${props.span};
-    grid-column: auto / span ${props.span};`;
-}, props => dsSystem.mapTemplateGrid(props.rows).join(' ') || 'minmax(0px, 1fr)', props => dsSystem.mapTemplateGrid(props.rows).join(' ') || 'auto', props => dsSystem.mapGap(props.gutter), props => dsSystem.mapGap(props.gutter));
-/* stylelint-enable property-no-vendor-prefix */
-
-/* eslint-enable complexity */
-
-const Grid = /*#__PURE__*/React__default['default'].forwardRef((_ref, ref) => {
-  let {
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const Grid = /*#__PURE__*/React__default["default"].forwardRef((props, ref) => {
+  const {
     rows,
     cols,
     alignItems,
     children,
     className,
-    direction,
     justify,
     gutter,
     wrap
-  } = _ref,
-      rest = _objectWithoutProperties__default['default'](_ref, _excluded);
+  } = props,
+        rest = _objectWithoutProperties__default["default"](props, _excluded);
 
   let isSpanParent = true;
-  const renderChildren = React__default['default'].Children.map(children, child => {
+  const renderChildren = React__default["default"].Children.map(children, child => {
     if (lodash.get(child, 'child.type.name') === 'Grid' || lodash.get(child, 'type.displayName') === 'Grid' || parseInt(lodash.get(child, 'props.span', 0), 10) > 0) {
       const {
         width: wc,
@@ -122,35 +53,35 @@ const Grid = /*#__PURE__*/React__default['default'].forwardRef((_ref, ref) => {
         span
       } = child.props;
       if (!span) isSpanParent = false;
-      return /*#__PURE__*/React__default['default'].cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
+      return /*#__PURE__*/React__default["default"].cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
         width: dsSystem.fixSpaceGutter(wc),
-        // eslint-disable-next-line max-lines
         height: dsSystem.fixSpaceGutter(hc)
       }));
     }
 
     return child;
   });
-  return /*#__PURE__*/jsxRuntime.jsx(GridItem, _objectSpread(_objectSpread({
+  return /*#__PURE__*/jsxRuntime.jsx(GridItem.GridItem, _objectSpread(_objectSpread({
     alignItems: alignItems,
     className: className,
     cols: cols,
-    direction: direction,
     gutter: gutter,
     isSpanParent: isSpanParent,
     justify: justify,
     rows: rows,
     wrap: wrap,
-    childNumber: React__default['default'].Children.count(children)
+    childNumber: React__default["default"].Children.count(children),
+    ref: ref
   }, rest), {}, {
-    ref: ref,
     children: renderChildren
   }));
-});
-Grid.displayName = 'Grid';
+}); // Since this component is using ForwardRef, we must provide a displayName to avoid 'undefined' name in propsTable.
+
+Grid.displayName = 'Grid'; // We should use props helpers to merge default props in the future, right now it causes many issues within Dimsum
+
 Grid.defaultProps = defaultProps.defaultProps;
-const DSGridWithSchema = reactDesc.describe(Grid).description('Grid layout helper component');
-DSGridWithSchema.propTypes = props.gridProps;
+const DSGridWithSchema = reactDesc.describe(Grid);
+DSGridWithSchema.propTypes = propTypes.propTypes;
 
 exports.DSGridWithSchema = DSGridWithSchema;
-exports['default'] = Grid;
+exports["default"] = Grid;

package/cjs/GridItem.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var styledSystem = require('styled-system');
+var dsSystem = require('@elliemae/ds-system');
+var styles = require('./utils/styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+/* eslint-disable max-lines */
+const GridItem = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1ch24x4-0"
+})(["display:grid;display:-ms-grid;column-gap:", ";row-gap:", ";", " ", " ", " ", " ", " ", " ", " ", " ", ""], _ref => {
+  let {
+    gutter
+  } = _ref;
+  return dsSystem.mapGap(gutter);
+}, _ref2 => {
+  let {
+    gutter
+  } = _ref2;
+  return dsSystem.mapGap(gutter);
+}, styledSystem.grid, styledSystem.flexbox, styledSystem.justifyContent, styledSystem.space, styledSystem.height, styledSystem.width, styles.manageCols, styles.manageRows, styles.manageSpan);
+
+exports.GridItem = GridItem;

package/cjs/defaultProps.js

@@ -6,10 +6,10 @@ const defaultProps = {
   rows: [],
   cols: [],
   className: '',
-  direction: 'row',
   justify: 'flex-start',
   gutter: 0,
-  wrap: 'wrap'
+  wrap: 'wrap',
+  span: 1
 };
 
 exports.defaultProps = defaultProps;

package/cjs/index.js

@@ -7,7 +7,7 @@ var Grid = require('./Grid.js');
 
 
 exports.DSGridWithSchema = Grid.DSGridWithSchema;
-exports.Grid = Grid['default'];
-exports.GridContainer = Grid['default'];
-exports.GridItem = Grid['default'];
-exports.default = Grid['default'];
+exports.Grid = Grid["default"];
+exports.GridContainer = Grid["default"];
+exports.GridItem = Grid["default"];
+exports["default"] = Grid["default"];

package/cjs/propTypes.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+var constants = require('./utils/constants.js');
+
+const rowColBreakpoints = reactDesc.PropTypes.shape({
+  small: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string])),
+  medium: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string])),
+  large: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]))
+});
+const spanBreakpoints = reactDesc.PropTypes.shape({
+  small: reactDesc.PropTypes.number,
+  medium: reactDesc.PropTypes.number,
+  large: reactDesc.PropTypes.number
+});
+const propTypes = {
+  rows: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string])), rowColBreakpoints]).description('Row layout cells').defaultValue([]),
+  cols: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string])), rowColBreakpoints]).description('Column layout cells').defaultValue([]),
+  span: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, spanBreakpoints]).description('Expands the grid element within columns.'),
+  alignItems: reactDesc.PropTypes.oneOf(constants.alignItemsPlacement).description('flex-like align items prop'),
+  children: reactDesc.PropTypes.node.description('Children node inside grid cell'),
+  className: reactDesc.PropTypes.string.description('CSS class').defaultValue(''),
+  justifyContent: reactDesc.PropTypes.oneOf(constants.justifyPlacement).description('flex-like justify prop').defaultValue(constants.justifyPlacement[0]),
+  gutter: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Space between cells prop').defaultValue(0),
+  wrap: reactDesc.PropTypes.oneOf(constants.wrap).description('Wrap type').defaultValue(constants.wrap[0]),
+  height: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid height.'),
+  width: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid width.'),
+  p: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid padding in all sides.'),
+  m: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid margin in all sides.'),
+  px: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid padding in left and right sides.'),
+  mx: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid margin in left and right sides.'),
+  py: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid padding in top and bottom sides.'),
+  my: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid margin in top and bottom sides.'),
+  ml: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid left margin.'),
+  mr: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid right margin'),
+  mt: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid top margin'),
+  mb: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid bottom margin'),
+  pl: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid left padding.'),
+  pr: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid right padding'),
+  pt: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid top padding'),
+  pb: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid bottom padding')
+};
+
+exports.propTypes = propTypes;

package/cjs/types.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/cjs/utils/constants.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const justifyPlacement = ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'];
+const alignItemsPlacement = ['flex-start', 'center', 'flex-end', 'stretch', 'baseline'];
+const wrap = ['wrap', 'nowrap', 'wrap-reverse'];
+
+exports.alignItemsPlacement = alignItemsPlacement;
+exports.justifyPlacement = justifyPlacement;
+exports.wrap = wrap;

package/cjs/utils/styles.js

@@ -0,0 +1,129 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+var dsSystem = require('@elliemae/ds-system');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+
+var _templateObject, _templateObject2, _templateObject3;
+const manageSpan = dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  ", "\n"])), _ref => {
+  let {
+    isSpanParent,
+    span,
+    theme
+  } = _ref;
+  if (!isSpanParent) return '';
+
+  if (typeof span === 'object') {
+    let data = '';
+    Object.keys(theme.media).forEach(key => {
+      if (span[key] && theme.breakpoints[key]) {
+        if (key === 'small') {
+          data += "\n          -ms-grid-column: auto / span ".concat(span[key], ";\n          grid-column: auto / span ").concat(span[key], ";\n          ");
+        } else {
+          data += "@media (min-width: ".concat(theme.breakpoints[key], ") {\n            -ms-grid-column: auto / span ").concat(span[key], ";\n            grid-column: auto / span ").concat(span[key], ";\n          }");
+        }
+      }
+    });
+    return data;
+  }
+
+  return "\n  -ms-grid-column: auto / span ".concat(span, ";\n  grid-column: auto / span ").concat(span, ";");
+});
+const manageCols = dsSystem.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  ", "\n"])), _ref2 => {
+  let {
+    cols,
+    theme,
+    isSpanParent
+  } = _ref2;
+
+  if (typeof cols === 'object' && !Array.isArray(cols)) {
+    let data = '';
+    Object.keys(theme.media).forEach(key => {
+      if (cols[key] && Array.isArray(cols[key])) {
+        const mtg = dsSystem.mapTemplateGrid(cols[key]).join(' ');
+        const mtgs = dsSystem.mapTemplateGrid(cols[key]).map(c => "minmax(0, ".concat(c, ")")).join(' ');
+
+        if (key === 'small') {
+          data += "-ms-grid-columns: ".concat(mtg || 'minmax(0px, 1fr)', ";\n          grid-template-columns: ").concat(mtg || 'auto', ";\n          -ms-grid-columns: ").concat(mtgs || 'minmax(0px, 1fr)', ";\n          grid-template-columns: ").concat(mtgs || 'auto', ";");
+        } else {
+          data += "@media (min-width: ".concat(theme.breakpoints[key], ") {\n              -ms-grid-columns: ").concat(mtg || 'minmax(0px, 1fr)', ";\n              grid-template-columns: ").concat(mtg || 'auto', ";\n              -ms-grid-columns: ").concat(mtgs || 'minmax(0px, 1fr)', ";\n              grid-template-columns: ").concat(mtgs || 'auto', ";\n            }");
+        }
+      } else if (isSpanParent) {
+        if (key === 'small') {
+          data += "-ms-grid-columns: repeat(".concat(cols[key], ", 1fr);\n          grid-template-columns: repeat(").concat(cols[key], ", 1fr);");
+        } else {
+          data += "@media (min-width: ".concat(theme.breakpoints[key], ") {\n            -ms-grid-columns: repeat(").concat(cols[key], ", 1fr);\n            grid-template-columns: repeat(").concat(cols[key], ", 1fr);\n          }");
+        }
+      }
+    });
+    return data;
+  }
+
+  if (Array.isArray(cols)) {
+    const mtg = dsSystem.mapTemplateGrid(cols).join(' ');
+    const mtgs = dsSystem.mapTemplateGrid(cols).map(c => "minmax(0, ".concat(c, ")")).join(' ');
+    return "\n    -ms-grid-columns: ".concat(mtg || 'minmax(0px, 1fr)', ";\n    grid-template-columns: ").concat(mtg || 'auto', ";\n    -ms-grid-columns: ").concat(mtgs || 'minmax(0px, 1fr)', ";\n    grid-template-columns: ").concat(mtgs || 'auto', ";\n    ");
+  }
+
+  if (isSpanParent) {
+    return "\n    -ms-grid-columns: repeat(".concat(cols, ", 1fr);\n    grid-template-columns: repeat(").concat(cols, ", 1fr);");
+  }
+
+  return '';
+});
+const manageRows = dsSystem.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  ", "\n"])), _ref3 => {
+  let {
+    rows,
+    theme,
+    isSpanParent
+  } = _ref3;
+
+  if (typeof rows === 'object' && !Array.isArray(rows)) {
+    let data = '';
+    Object.keys(theme.media).forEach(key => {
+      if (rows[key] && Array.isArray(rows[key])) {
+        const mtg = dsSystem.mapTemplateGrid(rows[key]).join(' ');
+        const mtgs = dsSystem.mapTemplateGrid(rows[key]).map(c => "minmax(0, ".concat(c, ")")).join(' ');
+
+        if (key === 'small') {
+          data += "-ms-grid-rows: ".concat(mtg || 'minmax(0px, 1fr)', ";\n            grid-template-rows: ").concat(mtg || 'auto', ";\n            -ms-grid-rows: ").concat(mtgs || 'minmax(0px, 1fr)', ";\n            grid-template-rows: ").concat(mtgs || 'auto', ";");
+        } else {
+          data += "@media (min-width: ".concat(theme.breakpoints[key], ") {\n                -ms-grid-rows: ").concat(mtg || 'minmax(0px, 1fr)', ";\n                grid-template-rows: ").concat(mtg || 'auto', ";\n                -ms-grid-rows: ").concat(mtgs || 'minmax(0px, 1fr)', ";\n                grid-template-rows: ").concat(mtgs || 'auto', ";\n              }");
+        }
+      } else if (isSpanParent) {
+        if (key === 'small') {
+          data += "-ms-grid-rows: repeat(".concat(rows[key], ", 1fr);\n            grid-template-rows: repeat(").concat(rows[key], ", 1fr);");
+        } else {
+          data += "@media (min-width: ".concat(theme.breakpoints[key], ") {\n              -ms-grid-rows: repeat(").concat(rows[key], ", 1fr);\n              grid-template-rows: repeat(").concat(rows[key], ", 1fr);\n            }");
+        }
+      }
+    });
+    return data;
+  }
+
+  if (Array.isArray(rows)) {
+    const mtg = dsSystem.mapTemplateGrid(rows).join(' ');
+    const mtgs = dsSystem.mapTemplateGrid(rows).map(c => "minmax(0, ".concat(c, ")")).join(' ');
+    return "\n    -ms-grid-rows: ".concat(mtg || 'minmax(0px, 1fr)', ";\n    grid-template-rows: ").concat(mtg || 'auto', ";\n    -ms-grid-rows: ").concat(mtgs || 'minmax(0px, 1fr)', ";\n    grid-template-rows: ").concat(mtgs || 'auto', ";\n    ");
+  }
+
+  if (isSpanParent) {
+    return "\n    -ms-grid-rows: repeat(".concat(rows, ", 1fr);\n    grid-template-rows: repeat(").concat(rows, ", 1fr);");
+  }
+
+  return '';
+});
+
+exports.manageCols = manageCols;
+exports.manageRows = manageRows;
+exports.manageSpan = manageSpan;

package/esm/Grid.js

@@ -1,106 +1,38 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import React from 'react';
 import { describe } from 'react-desc';
 import { get } from 'lodash';
-import styled from 'styled-components';
-import { flexbox, justifyContent, space, height, width } from 'styled-system';
-import { fixSpaceGutter, mapTemplateGrid, mapGap } from '@elliemae/ds-system';
-import { positionIE11Grid } from './ie11.js';
-import { gridProps } from './props.js';
+import { fixSpaceGutter } from '@elliemae/ds-system';
+import { propTypes } from './propTypes.js';
+import { GridItem } from './GridItem.js';
 import { defaultProps } from './defaultProps.js';
 import { jsx } from 'react/jsx-runtime';
 
-const _excluded = ["rows", "cols", "alignItems", "children", "className", "direction", "justify", "gutter", "wrap"];
+const _excluded = ["rows", "cols", "alignItems", "children", "className", "justify", "gutter", "wrap"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-const GridItem = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-qbn2kv-0"
-})(["display:grid;display:-ms-grid;", " ", " ", " ", " ", " ", " ", " ", " -ms-grid-rows:", ";grid-template-rows:", ";column-gap:", ";row-gap:", ";"], flexbox, justifyContent, space, height, width, positionIE11Grid, props => {
-  if (typeof props.cols === 'object' && !Array.isArray(props.cols)) {
-    let data = '';
-
-    for (const key in props.theme.media) {
-      // using grid approach
-      if (props.cols[key] && Array.isArray(props.cols[key])) {
-        const mtg = mapTemplateGrid(props.cols[key]).join(' ');
-        const mtgs = mapTemplateGrid(props.cols[key]).map(c => `minmax(0, ${c})`).join(' ');
-        data += `@media (min-width: ${props.theme.breakpoints[key]}) {
-            -ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};
-            grid-template-columns: ${mtg || 'auto'};
-            -ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};
-            grid-template-columns: ${mtgs || 'auto'};
-          }`;
-      } else if (props.isSpanParent) {
-        data += `@media (min-width: ${props.theme.breakpoints[key]}) {
-              -ms-grid-columns: repeat(${props.cols[key]}, 1fr);
-              grid-template-columns: repeat(${props.cols[key]}, 1fr);
-            }`;
-      }
-    }
-
-    return data;
-  }
-
-  if (Array.isArray(props.cols)) {
-    const mtg = mapTemplateGrid(props.cols).join(' ');
-    const mtgs = mapTemplateGrid(props.cols).map(c => `minmax(0, ${c})`).join(' ');
-    return `
-      -ms-grid-columns: ${mtg || 'minmax(0px, 1fr)'};
-      grid-template-columns: ${mtg || 'auto'};
-      -ms-grid-columns: ${mtgs || 'minmax(0px, 1fr)'};
-      grid-template-columns: ${mtgs || 'auto'};
-      `;
-  }
-
-  if (props.isSpanParent) {
-    return `
-      -ms-grid-columns: repeat(${props.cols}, 1fr);
-      grid-template-columns: repeat(${props.cols}, 1fr);`;
-  }
-
-  return '';
-}, props => {
-  if (!props.isSpanParent) return '';
-
-  if (typeof props.span === 'object') {
-    let data = '';
-
-    for (const key in props.theme.media) {
-      if (props.span[key] && props.theme.breakpoints[key]) {
-        data += `@media (min-width: ${props.theme.breakpoints[key]}) {
-            -ms-grid-column: auto / span ${props.span[key]};
-            grid-column: auto / span ${props.span[key]};
-          }`;
-      }
-    }
-
-    return data;
-  }
-
-  return `
-    -ms-grid-column: auto / span ${props.span};
-    grid-column: auto / span ${props.span};`;
-}, props => mapTemplateGrid(props.rows).join(' ') || 'minmax(0px, 1fr)', props => mapTemplateGrid(props.rows).join(' ') || 'auto', props => mapGap(props.gutter), props => mapGap(props.gutter));
-/* stylelint-enable property-no-vendor-prefix */
-
-/* eslint-enable complexity */
-
-const Grid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
+const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
     rows,
     cols,
     alignItems,
     children,
     className,
-    direction,
     justify,
     gutter,
     wrap
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
+  } = props,
+        rest = _objectWithoutProperties(props, _excluded);
 
   let isSpanParent = true;
   const renderChildren = React.Children.map(children, child => {
@@ -113,7 +45,6 @@ const Grid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       if (!span) isSpanParent = false;
       return /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
         width: fixSpaceGutter(wc),
-        // eslint-disable-next-line max-lines
         height: fixSpaceGutter(hc)
       }));
     }
@@ -124,21 +55,22 @@ const Grid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     alignItems: alignItems,
     className: className,
     cols: cols,
-    direction: direction,
     gutter: gutter,
     isSpanParent: isSpanParent,
     justify: justify,
     rows: rows,
     wrap: wrap,
-    childNumber: React.Children.count(children)
+    childNumber: React.Children.count(children),
+    ref: ref
   }, rest), {}, {
-    ref: ref,
     children: renderChildren
   }));
-});
-Grid.displayName = 'Grid';
+}); // Since this component is using ForwardRef, we must provide a displayName to avoid 'undefined' name in propsTable.
+
+Grid.displayName = 'Grid'; // We should use props helpers to merge default props in the future, right now it causes many issues within Dimsum
+
 Grid.defaultProps = defaultProps;
-const DSGridWithSchema = describe(Grid).description('Grid layout helper component');
-DSGridWithSchema.propTypes = gridProps;
+const DSGridWithSchema = describe(Grid);
+DSGridWithSchema.propTypes = propTypes;
 
 export { DSGridWithSchema, Grid as default };

package/esm/GridItem.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import { grid, flexbox, justifyContent, space, height, width } from 'styled-system';
+import { mapGap } from '@elliemae/ds-system';
+import { manageCols, manageRows, manageSpan } from './utils/styles.js';
+
+/* eslint-disable max-lines */
+const GridItem = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1ch24x4-0"
+})(["display:grid;display:-ms-grid;column-gap:", ";row-gap:", ";", " ", " ", " ", " ", " ", " ", " ", " ", ""], _ref => {
+  let {
+    gutter
+  } = _ref;
+  return mapGap(gutter);
+}, _ref2 => {
+  let {
+    gutter
+  } = _ref2;
+  return mapGap(gutter);
+}, grid, flexbox, justifyContent, space, height, width, manageCols, manageRows, manageSpan);
+
+export { GridItem };

package/esm/defaultProps.js

@@ -2,10 +2,10 @@ const defaultProps = {
   rows: [],
   cols: [],
   className: '',
-  direction: 'row',
   justify: 'flex-start',
   gutter: 0,
-  wrap: 'wrap'
+  wrap: 'wrap',
+  span: 1
 };
 
 export { defaultProps };