@elliemae/ds-grid 2.0.0-alpha.10 → 2.0.0-alpha.14

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,98 +25,24 @@ 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 {
+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 => {
@@ -124,33 +55,33 @@ const Grid = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
       if (!span) isSpanParent = false;
       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;

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/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 };

package/esm/propTypes.js

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

package/esm/types.js

@@ -0,0 +1 @@
+

package/esm/utils/constants.js

@@ -0,0 +1,5 @@
+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'];
+
+export { alignItemsPlacement, justifyPlacement, wrap };

package/esm/utils/styles.js

@@ -0,0 +1,119 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import { css, mapTemplateGrid } from '@elliemae/ds-system';
+
+var _templateObject, _templateObject2, _templateObject3;
+const manageSpan = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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 = mapTemplateGrid(cols[key]).join(' ');
+        const mtgs = 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 = mapTemplateGrid(cols).join(' ');
+    const mtgs = 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 = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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 = mapTemplateGrid(rows[key]).join(' ');
+        const mtgs = 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 = mapTemplateGrid(rows).join(' ');
+    const mtgs = 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 '';
+});
+
+export { manageCols, manageRows, manageSpan };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-grid",
-  "version": "2.0.0-alpha.10",
+  "version": "2.0.0-alpha.14",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Grid",
   "module": "./esm/index.js",
@@ -11,13 +11,25 @@
       "import": "./esm/index.js",
       "require": "./cjs/index.js"
     },
-    "./props": {
-      "import": "./esm/props.js",
-      "require": "./cjs/props.js"
+    "./utils/styles": {
+      "import": "./esm/utils/styles.js",
+      "require": "./cjs/utils/styles.js"
     },
-    "./ie11": {
-      "import": "./esm/ie11.js",
-      "require": "./cjs/ie11.js"
+    "./utils/constants": {
+      "import": "./esm/utils/constants.js",
+      "require": "./cjs/utils/constants.js"
+    },
+    "./types": {
+      "import": "./esm/types.js",
+      "require": "./cjs/types.js"
+    },
+    "./propTypes": {
+      "import": "./esm/propTypes.js",
+      "require": "./cjs/propTypes.js"
+    },
+    "./GridItem": {
+      "import": "./esm/GridItem.js",
+      "require": "./cjs/GridItem.js"
     },
     "./Grid": {
       "import": "./esm/Grid.js",
@@ -48,18 +60,21 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-system": "2.0.0-alpha.10",
+    "@elliemae/ds-system": "2.0.0-alpha.14",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {
-    "styled-components": "~5.3.1",
+    "@testing-library/jest-dom": "~5.15.0",
+    "@testing-library/react": "~12.1.2",
+    "@testing-library/user-event": "~13.5.0",
+    "styled-components": "~5.3.3",
     "styled-system": "~5.1.5"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.1",
+    "styled-components": "^5.3.3",
     "styled-system": "^5.1.5"
   },
   "publishConfig": {

package/types/Grid.d.ts

@@ -1,5 +1,11 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
 import React from 'react';
-declare const Grid: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
-declare const DSGridWithSchema: any;
+import type { GridPropsT } from './types';
+declare const Grid: React.ForwardRefExoticComponent<GridPropsT & React.RefAttributes<HTMLDivElement>>;
+declare const DSGridWithSchema: {
+    (props?: (GridPropsT & React.RefAttributes<HTMLDivElement>) | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
 export default Grid;
 export { DSGridWithSchema };

package/types/GridItem.d.ts

@@ -0,0 +1,2 @@
+import type { GridItemPropsT } from './types';
+export declare const GridItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridItemPropsT, never>;

package/types/defaultProps.d.ts

@@ -2,8 +2,8 @@ export declare const defaultProps: {
     rows: never[];
     cols: never[];
     className: string;
-    direction: string;
-    justify: string;
+    justify: "flex-start";
     gutter: number;
-    wrap: string;
+    wrap: "wrap";
+    span: number;
 };

package/types/propTypes.d.ts

@@ -0,0 +1,135 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
+export declare const propTypes: {
+    rows: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    cols: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    span: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    alignItems: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    children: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    className: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    justifyContent: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    gutter: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    wrap: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    height: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    width: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    p: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    m: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    px: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    mx: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    py: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    my: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    ml: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    mr: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    mt: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    mb: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    pl: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    pr: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    pt: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    pb: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+};

package/types/types.d.ts

@@ -0,0 +1,66 @@
+/// <reference types="react" />
+import { alignItemsPlacement, justifyPlacement, wrap } from './utils/constants';
+interface RowColBreakpoints {
+    small?: string | number[];
+    medium?: string | number[];
+    large?: string | number[];
+}
+interface SpanBreakpoints {
+    small?: number;
+    medium?: number;
+    large?: number;
+}
+export interface GridPropsT {
+    height?: string;
+    width?: string;
+    rows?: string[] | string | number[] | RowColBreakpoints;
+    cols?: string[] | string | number[] | RowColBreakpoints;
+    justifyContent?: typeof justifyPlacement[number];
+    alignItems?: typeof alignItemsPlacement[number];
+    children?: React.ReactNode;
+    className?: string;
+    justify?: typeof justifyPlacement[number];
+    gutter?: string | number;
+    wrap?: typeof wrap[number];
+    span?: number;
+    p?: string | number;
+    m?: string | number;
+    px?: string | number;
+    mx?: string | number;
+    py?: string | number;
+    my?: string | number;
+    ml?: string | number;
+    mr?: string | number;
+    mt?: string | number;
+    mb?: string | number;
+    pl?: string | number;
+    pr?: string | number;
+    pt?: string | number;
+    pb?: string | number;
+}
+export interface GridPropsWithDefaultT {
+    rows: string | number[] | RowColBreakpoints;
+    cols: string | number[] | RowColBreakpoints;
+    alignItems: typeof alignItemsPlacement[number];
+    children?: React.ReactNode;
+    className: string;
+    justify: typeof justifyPlacement[number];
+    gutter: string | number;
+    wrap: typeof wrap[number];
+    span: number | SpanBreakpoints;
+}
+export interface GridItemPropsT {
+    rows: string | number[] | RowColBreakpoints;
+    cols: string | number[] | RowColBreakpoints;
+    alignItems: typeof alignItemsPlacement[number];
+    children: React.ReactElement[];
+    className: string;
+    justify: typeof justifyPlacement[number];
+    gutter: string | number;
+    wrap: typeof wrap[number];
+    childNumber: number;
+    isSpanParent: boolean;
+    span?: number | SpanBreakpoints;
+    ref: React.ForwardedRef<HTMLDivElement>;
+}
+export {};

package/types/utils/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const justifyPlacement: readonly ["flex-start", "center", "flex-end", "space-between", "space-around", "space-evenly"];
+export declare const alignItemsPlacement: readonly ["flex-start", "center", "flex-end", "stretch", "baseline"];
+export declare const wrap: readonly ["wrap", "nowrap", "wrap-reverse"];

package/types/utils/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const manageSpan: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+export declare const manageCols: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+export declare const manageRows: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;

package/cjs/ie11.js

@@ -1,32 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var lodash = require('lodash');
-
-// m x n items (rows and cols simultaneously)
-
-function positionIE11Grid({
-  rows,
-  cols,
-  childNumber
-}) {
-  let css = '';
-
-  if (Array.isArray(rows) && rows.length === 0 || !rows) {
-    for (let x = 0; x <= childNumber; x++) {
-      // :nth-child() doesn't work in ie11
-      css = css.concat(`& > div ${lodash.repeat('+ div ', x)}{ -ms-grid-column: ${x + 1}; } `);
-    }
-  }
-
-  if (Array.isArray(cols) && cols.length === 0 || !cols) {
-    for (let x = 0; x <= childNumber; x++) {
-      css = css.concat(`& > div ${lodash.repeat('+ div ', x)}{ -ms-grid-row: ${x + 1}; } `);
-    }
-  }
-
-  return css;
-}
-
-exports.positionIE11Grid = positionIE11Grid;

package/cjs/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "commonjs",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}

package/cjs/props.js

@@ -1,39 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactDesc = require('react-desc');
-
-const gridProps = {
-  /** Row layout cells */
-  rows: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string])).description('Row layout cells'),
-
-  /** Column layout cells */
-  cols: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string])).description('Column layout cells'),
-
-  /** Grid span */
-  span: reactDesc.PropTypes.number.description('Grid span'),
-
-  /** flex-like align items prop */
-  alignItems: reactDesc.PropTypes.oneOf(['flex-start', 'center', 'flex-end', 'stretch', 'baseline']).description('flex-like align items prop'),
-
-  /** Children node inside grid cell */
-  children: reactDesc.PropTypes.node.description('Children node inside grid cell'),
-
-  /** CSS class */
-  className: reactDesc.PropTypes.string.description('CSS class'),
-
-  /** flex-like direction prop */
-  direction: reactDesc.PropTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse']).description('flex-like direction prop'),
-
-  /** flex-like justify prop */
-  justify: reactDesc.PropTypes.oneOf(['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly']).description('flex-like justify prop'),
-
-  /** Space between cells prop */
-  gutter: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Space between cells prop'),
-
-  /** Wrap type */
-  wrap: reactDesc.PropTypes.oneOf(['nowrap', 'wrap', 'wrap-reverse']).description('Wrap type')
-};
-
-exports.gridProps = gridProps;

package/esm/ie11.js

@@ -1,28 +0,0 @@
-import { repeat } from 'lodash';
-
-// m x n items (rows and cols simultaneously)
-
-function positionIE11Grid({
-  rows,
-  cols,
-  childNumber
-}) {
-  let css = '';
-
-  if (Array.isArray(rows) && rows.length === 0 || !rows) {
-    for (let x = 0; x <= childNumber; x++) {
-      // :nth-child() doesn't work in ie11
-      css = css.concat(`& > div ${repeat('+ div ', x)}{ -ms-grid-column: ${x + 1}; } `);
-    }
-  }
-
-  if (Array.isArray(cols) && cols.length === 0 || !cols) {
-    for (let x = 0; x <= childNumber; x++) {
-      css = css.concat(`& > div ${repeat('+ div ', x)}{ -ms-grid-row: ${x + 1}; } `);
-    }
-  }
-
-  return css;
-}
-
-export { positionIE11Grid };

package/esm/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "module",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}

package/esm/props.js

@@ -1,35 +0,0 @@
-import { PropTypes } from 'react-desc';
-
-const gridProps = {
-  /** Row layout cells */
-  rows: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])).description('Row layout cells'),
-
-  /** Column layout cells */
-  cols: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])).description('Column layout cells'),
-
-  /** Grid span */
-  span: PropTypes.number.description('Grid span'),
-
-  /** flex-like align items prop */
-  alignItems: PropTypes.oneOf(['flex-start', 'center', 'flex-end', 'stretch', 'baseline']).description('flex-like align items prop'),
-
-  /** Children node inside grid cell */
-  children: PropTypes.node.description('Children node inside grid cell'),
-
-  /** CSS class */
-  className: PropTypes.string.description('CSS class'),
-
-  /** flex-like direction prop */
-  direction: PropTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse']).description('flex-like direction prop'),
-
-  /** flex-like justify prop */
-  justify: PropTypes.oneOf(['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly']).description('flex-like justify prop'),
-
-  /** Space between cells prop */
-  gutter: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Space between cells prop'),
-
-  /** Wrap type */
-  wrap: PropTypes.oneOf(['nowrap', 'wrap', 'wrap-reverse']).description('Wrap type')
-};
-
-export { gridProps };

package/types/ie11.d.ts

@@ -1,5 +0,0 @@
-export declare function positionIE11Grid({ rows, cols, childNumber }: {
-    rows: any;
-    cols: any;
-    childNumber: any;
-}): string;

package/types/props.d.ts

@@ -1,22 +0,0 @@
-export declare const gridProps: {
-    /** Row layout cells */
-    rows: any;
-    /** Column layout cells */
-    cols: any;
-    /** Grid span */
-    span: any;
-    /** flex-like align items prop */
-    alignItems: any;
-    /** Children node inside grid cell */
-    children: any;
-    /** CSS class */
-    className: any;
-    /** flex-like direction prop */
-    direction: any;
-    /** flex-like justify prop */
-    justify: any;
-    /** Space between cells prop */
-    gutter: any;
-    /** Wrap type */
-    wrap: any;
-};