@elliemae/ds-grid 2.3.2 → 2.4.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/cjs/Grid.js +21 -16
  2. package/cjs/react-desc-prop-types.js +58 -0
  3. package/cjs/utils/styles.js +48 -36
  4. package/esm/Grid.js +20 -15
  5. package/esm/react-desc-prop-types.js +49 -0
  6. package/esm/utils/styles.js +48 -36
  7. package/package.json +5 -9
  8. package/types/Grid.d.ts +3 -8
  9. package/types/GridItem.d.ts +3 -2
  10. package/types/react-desc-prop-types.d.ts +55 -0
  11. package/types/types.d.ts +0 -14
  12. package/types/utils/constants.d.ts +3 -3
  13. package/cjs/defaultProps.js +0 -15
  14. package/cjs/propTypes.js +0 -46
  15. package/esm/defaultProps.js +0 -11
  16. package/esm/propTypes.js +0 -42
  17. package/types/defaultProps.d.ts +0 -9
  18. package/types/propTypes.d.ts +0 -135
package/cjs/Grid.js CHANGED
@@ -12,12 +12,11 @@ require('core-js/modules/esnext.iterator.filter.js');
12
12
  require('core-js/modules/esnext.async-iterator.for-each.js');
13
13
  require('core-js/modules/esnext.iterator.for-each.js');
14
14
  var React = require('react');
15
- var reactDesc = require('react-desc');
15
+ var dsPropsHelpers = require('@elliemae/ds-props-helpers');
16
16
  var lodash = require('lodash');
17
17
  var dsSystem = require('@elliemae/ds-system');
18
- var propTypes = require('./propTypes.js');
18
+ var reactDescPropTypes = require('./react-desc-prop-types.js');
19
19
  var GridItem = require('./GridItem.js');
20
- var defaultProps = require('./defaultProps.js');
21
20
  var jsxRuntime = require('react/jsx-runtime');
22
21
 
23
22
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -26,25 +25,32 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
26
25
  var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
27
26
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
28
27
 
29
- const _excluded = ["rows", "cols", "alignItems", "children", "className", "justify", "gutter", "wrap", "width", "height"];
28
+ const _excluded = ["children"],
29
+ _excluded2 = ["rows", "cols", "alignItems", "className", "justify", "gutter", "wrap", "width", "height"];
30
30
 
31
31
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
32
32
 
33
33
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
34
34
  const Grid = /*#__PURE__*/React__default["default"].forwardRef((props, ref) => {
35
+ const {
36
+ children
37
+ } = props,
38
+ propsWithoutChildren = _objectWithoutProperties__default["default"](props, _excluded);
39
+
40
+ const propsWithDefaults = dsPropsHelpers.useMemoMergePropsWithDefault(propsWithoutChildren, reactDescPropTypes.defaultProps);
41
+
35
42
  const {
36
43
  rows,
37
44
  cols,
38
45
  alignItems,
39
- children,
40
46
  className,
41
47
  justify,
42
48
  gutter,
43
49
  wrap,
44
50
  width,
45
51
  height
46
- } = props,
47
- rest = _objectWithoutProperties__default["default"](props, _excluded);
52
+ } = propsWithDefaults,
53
+ rest = _objectWithoutProperties__default["default"](propsWithDefaults, _excluded2);
48
54
 
49
55
  let isSpanParent = true;
50
56
  const renderChildren = React__default["default"].Children.map(children, child => {
@@ -54,7 +60,8 @@ const Grid = /*#__PURE__*/React__default["default"].forwardRef((props, ref) => {
54
60
  height: hc,
55
61
  span
56
62
  } = child.props;
57
- if (!span) isSpanParent = false;
63
+ if (!span) isSpanParent = false; // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
64
+
58
65
  return /*#__PURE__*/React__default["default"].cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
59
66
  width: dsSystem.fixSpaceGutter(wc),
60
67
  height: dsSystem.fixSpaceGutter(hc)
@@ -73,19 +80,17 @@ const Grid = /*#__PURE__*/React__default["default"].forwardRef((props, ref) => {
73
80
  rows: rows,
74
81
  wrap: wrap,
75
82
  childNumber: React__default["default"].Children.count(children),
76
- ref: ref,
77
- w: width,
78
- h: height
83
+ ref: ref
79
84
  }, rest), {}, {
85
+ w: width,
86
+ h: height,
80
87
  children: renderChildren
81
88
  }));
82
89
  }); // Since this component is using ForwardRef, we must provide a displayName to avoid 'undefined' name in propsTable.
83
90
 
84
- Grid.displayName = 'Grid'; // We should use props helpers to merge default props in the future, right now it causes many issues within Dimsum
85
-
86
- Grid.defaultProps = defaultProps.defaultProps;
87
- const DSGridWithSchema = reactDesc.describe(Grid);
88
- DSGridWithSchema.propTypes = propTypes.propTypes;
91
+ Grid.displayName = 'Grid';
92
+ const DSGridWithSchema = dsPropsHelpers.describe(Grid);
93
+ DSGridWithSchema.propTypes = reactDescPropTypes.DSGridPropTypes;
89
94
 
90
95
  exports.DSGridWithSchema = DSGridWithSchema;
91
96
  exports["default"] = Grid;
package/cjs/react-desc-prop-types.js ADDED
@@ -0,0 +1,58 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ require('core-js/modules/esnext.async-iterator.filter.js');
6
+ require('core-js/modules/esnext.iterator.constructor.js');
7
+ require('core-js/modules/esnext.iterator.filter.js');
8
+ require('core-js/modules/esnext.async-iterator.for-each.js');
9
+ require('core-js/modules/esnext.iterator.for-each.js');
10
+ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
11
+ var dsPropsHelpers = require('@elliemae/ds-props-helpers');
12
+ var constants = require('./utils/constants.js');
13
+
14
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
15
+
16
+ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
17
+
18
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
19
+
20
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
21
+ const defaultProps = {
22
+ rows: [],
23
+ cols: [],
24
+ className: '',
25
+ justify: 'flex-start',
26
+ gutter: 0,
27
+ wrap: 'wrap',
28
+ span: 1
29
+ }; // =============================================================================
30
+ // PropTypes
31
+ // =============================================================================
32
+
33
+ const rowColBreakpoints = dsPropsHelpers.PropTypes.shape({
34
+ small: dsPropsHelpers.PropTypes.arrayOf(dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.number, dsPropsHelpers.PropTypes.string])),
35
+ medium: dsPropsHelpers.PropTypes.arrayOf(dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.number, dsPropsHelpers.PropTypes.string])),
36
+ large: dsPropsHelpers.PropTypes.arrayOf(dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.number, dsPropsHelpers.PropTypes.string]))
37
+ });
38
+ const spanBreakpoints = dsPropsHelpers.PropTypes.shape({
39
+ small: dsPropsHelpers.PropTypes.number,
40
+ medium: dsPropsHelpers.PropTypes.number,
41
+ large: dsPropsHelpers.PropTypes.number
42
+ });
43
+ const DSGridPropTypes = _objectSpread(_objectSpread(_objectSpread({}, dsPropsHelpers.globalAttributesPropTypes), dsPropsHelpers.xstyledPropTypes), {}, {
44
+ rows: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.arrayOf(dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.number, dsPropsHelpers.PropTypes.string])), rowColBreakpoints]).description('Row layout cells').defaultValue([]),
45
+ cols: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.arrayOf(dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.number, dsPropsHelpers.PropTypes.string])), rowColBreakpoints]).description('Column layout cells').defaultValue([]),
46
+ span: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.number, spanBreakpoints]).description('Expands the grid element within columns.'),
47
+ alignItems: dsPropsHelpers.PropTypes.oneOf(constants.alignItemsPlacement).description('flex-like align items prop'),
48
+ children: dsPropsHelpers.PropTypes.node.description('Children node inside grid cell'),
49
+ className: dsPropsHelpers.PropTypes.string.description('CSS class').defaultValue(''),
50
+ justifyContent: dsPropsHelpers.PropTypes.oneOf(constants.justifyPlacement).description('flex-like justify prop').defaultValue(constants.justifyPlacement[0]),
51
+ gutter: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.number, dsPropsHelpers.PropTypes.string]).description('Space between cells prop').defaultValue(0),
52
+ wrap: dsPropsHelpers.PropTypes.oneOf(constants.wrap).description('Wrap type').defaultValue(constants.wrap[0]),
53
+ height: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.number, dsPropsHelpers.PropTypes.string]).description('Grid height.'),
54
+ width: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.number, dsPropsHelpers.PropTypes.string]).description('Grid width.')
55
+ });
56
+
57
+ exports.DSGridPropTypes = DSGridPropTypes;
58
+ exports.defaultProps = defaultProps;
package/cjs/utils/styles.js CHANGED
@@ -23,21 +23,27 @@ const manageSpan = dsSystem.css(_templateObject || (_templateObject = _taggedTem
23
23
  } = _ref;
24
24
  if (!isSpanParent) return '';
25
25
 
26
- if (typeof span === 'object') {
27
- let data = '';
28
- Object.keys(theme.media).forEach(key => {
29
- if (span[key] && theme.breakpoints[key]) {
30
- if (key === 'small') {
31
- data += "\n -ms-grid-column: auto / span ".concat(span[key], ";\n grid-column: auto / span ").concat(span[key], ";\n ");
32
- } else {
33
- 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 }");
34
- }
35
- }
36
- });
37
- return data;
26
+ if (typeof span === 'number') {
27
+ return "\n -ms-grid-column: auto / span ".concat(span, ";\n grid-column: auto / span ").concat(span, ";");
38
28
  }
39
29
 
40
- return "\n -ms-grid-column: auto / span ".concat(span, ";\n grid-column: auto / span ").concat(span, ";");
30
+ if (typeof span !== 'object') return ""; // Span object
31
+
32
+ let data = '';
33
+ Object.keys(theme.media).forEach(key => {
34
+ // Type castings
35
+ const theKey = key;
36
+ const spanValue = span[theKey];
37
+
38
+ if (!!spanValue && theme.breakpoints[theKey]) {
39
+ if (theKey === 'small') {
40
+ data += "\n -ms-grid-column: auto / span ".concat(spanValue, ";\n grid-column: auto / span ").concat(spanValue, ";\n ");
41
+ } else {
42
+ data += "@media (min-width: ".concat(theme.breakpoints[theKey], ") {\n -ms-grid-column: auto / span ").concat(spanValue, ";\n grid-column: auto / span ").concat(spanValue, ";\n }");
43
+ }
44
+ }
45
+ });
46
+ return data;
41
47
  });
42
48
  const manageCols = dsSystem.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n ", "\n"])), _ref2 => {
43
49
  let {
@@ -49,20 +55,23 @@ const manageCols = dsSystem.css(_templateObject2 || (_templateObject2 = _taggedT
49
55
  if (typeof cols === 'object' && !Array.isArray(cols)) {
50
56
  let data = '';
51
57
  Object.keys(theme.media).forEach(key => {
52
- if (cols[key] && Array.isArray(cols[key])) {
53
- const mtg = dsSystem.mapTemplateGrid(cols[key]).join(' ');
54
- const mtgs = dsSystem.mapTemplateGrid(cols[key]).map(c => "minmax(0, ".concat(c, ")")).join(' ');
58
+ const theKey = key;
59
+ const colValue = cols[theKey];
55
60
 
56
- if (key === 'small') {
57
- 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', ";");
61
+ if (!!colValue && Array.isArray(colValue)) {
62
+ const mtg = dsSystem.mapTemplateGrid(colValue).join(' ');
63
+ const mtgs = dsSystem.mapTemplateGrid(colValue).map(c => "minmax(0, ".concat(c, ")")).join(' ');
64
+
65
+ if (theKey === 'small') {
66
+ 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', ";");
58
67
  } else {
59
- 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 }");
68
+ data += "@media (min-width: ".concat(theme.breakpoints[theKey], ") {\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 }");
60
69
  }
61
- } else if (isSpanParent) {
62
- if (key === 'small') {
63
- data += "-ms-grid-columns: repeat(".concat(cols[key], ", 1fr);\n grid-template-columns: repeat(").concat(cols[key], ", 1fr);");
70
+ } else if (!!colValue && isSpanParent) {
71
+ if (theKey === 'small') {
72
+ data += "-ms-grid-columns: repeat(".concat(colValue, ", 1fr);\n grid-template-columns: repeat(").concat(colValue, ", 1fr);");
64
73
  } else {
65
- 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 }");
74
+ data += "@media (min-width: ".concat(theme.breakpoints[theKey], ") {\n -ms-grid-columns: repeat(").concat(colValue, ", 1fr);\n grid-template-columns: repeat(").concat(colValue, ", 1fr);\n }");
66
75
  }
67
76
  }
68
77
  });
@@ -72,11 +81,11 @@ const manageCols = dsSystem.css(_templateObject2 || (_templateObject2 = _taggedT
72
81
  if (Array.isArray(cols)) {
73
82
  const mtg = dsSystem.mapTemplateGrid(cols).join(' ');
74
83
  const mtgs = dsSystem.mapTemplateGrid(cols).map(c => "minmax(0, ".concat(c, ")")).join(' ');
75
- 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 ");
84
+ 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', ";");
76
85
  }
77
86
 
78
87
  if (isSpanParent) {
79
- return "\n -ms-grid-columns: repeat(".concat(cols, ", 1fr);\n grid-template-columns: repeat(").concat(cols, ", 1fr);");
88
+ return "\n -ms-grid-columns: repeat(".concat(cols, ", 1fr);\n grid-template-columns: repeat(").concat(cols, ", 1fr);");
80
89
  }
81
90
 
82
91
  return '';
@@ -91,20 +100,23 @@ const manageRows = dsSystem.css(_templateObject3 || (_templateObject3 = _taggedT
91
100
  if (typeof rows === 'object' && !Array.isArray(rows)) {
92
101
  let data = '';
93
102
  Object.keys(theme.media).forEach(key => {
94
- if (rows[key] && Array.isArray(rows[key])) {
95
- const mtg = dsSystem.mapTemplateGrid(rows[key]).join(' ');
96
- const mtgs = dsSystem.mapTemplateGrid(rows[key]).map(c => "minmax(0, ".concat(c, ")")).join(' ');
103
+ const theKey = key;
104
+ const rowValue = rows[theKey];
105
+
106
+ if (rowValue && Array.isArray(rowValue)) {
107
+ const mtg = dsSystem.mapTemplateGrid(rowValue).join(' ');
108
+ const mtgs = dsSystem.mapTemplateGrid(rowValue).map(c => "minmax(0, ".concat(c, ")")).join(' ');
97
109
 
98
110
  if (key === 'small') {
99
- 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', ";");
111
+ 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', ";");
100
112
  } else {
101
- 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 }");
113
+ data += "@media (min-width: ".concat(theme.breakpoints[theKey], ") {\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 }");
102
114
  }
103
- } else if (isSpanParent) {
104
- if (key === 'small') {
105
- data += "-ms-grid-rows: repeat(".concat(rows[key], ", 1fr);\n grid-template-rows: repeat(").concat(rows[key], ", 1fr);");
115
+ } else if (!!rowValue && isSpanParent) {
116
+ if (theKey === 'small') {
117
+ data += "-ms-grid-rows: repeat(".concat(rowValue, ", 1fr);\n grid-template-rows: repeat(").concat(rowValue, ", 1fr);");
106
118
  } else {
107
- 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 }");
119
+ data += "@media (min-width: ".concat(theme.breakpoints[theKey], ") {\n -ms-grid-rows: repeat(").concat(rowValue, ", 1fr);\n grid-template-rows: repeat(").concat(rowValue, ", 1fr);\n }");
108
120
  }
109
121
  }
110
122
  });
@@ -114,11 +126,11 @@ const manageRows = dsSystem.css(_templateObject3 || (_templateObject3 = _taggedT
114
126
  if (Array.isArray(rows)) {
115
127
  const mtg = dsSystem.mapTemplateGrid(rows).join(' ');
116
128
  const mtgs = dsSystem.mapTemplateGrid(rows).map(c => "minmax(0, ".concat(c, ")")).join(' ');
117
- 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 ");
129
+ 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 ");
118
130
  }
119
131
 
120
132
  if (isSpanParent) {
121
- return "\n -ms-grid-rows: repeat(".concat(rows, ", 1fr);\n grid-template-rows: repeat(").concat(rows, ", 1fr);");
133
+ return "\n -ms-grid-rows: repeat(".concat(rows, ", 1fr);\n grid-template-rows: repeat(").concat(rows, ", 1fr);");
122
134
  }
123
135
 
124
136
  return '';
package/esm/Grid.js CHANGED
@@ -8,33 +8,39 @@ import 'core-js/modules/esnext.iterator.filter.js';
8
8
  import 'core-js/modules/esnext.async-iterator.for-each.js';
9
9
  import 'core-js/modules/esnext.iterator.for-each.js';
10
10
  import React from 'react';
11
- import { describe } from 'react-desc';
11
+ import { describe, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';
12
12
  import { get } from 'lodash';
13
13
  import { fixSpaceGutter } from '@elliemae/ds-system';
14
- import { propTypes } from './propTypes.js';
14
+ import { DSGridPropTypes, defaultProps } from './react-desc-prop-types.js';
15
15
  import { GridItem } from './GridItem.js';
16
- import { defaultProps } from './defaultProps.js';
17
16
  import { jsx } from 'react/jsx-runtime';
18
17
 
19
- const _excluded = ["rows", "cols", "alignItems", "children", "className", "justify", "gutter", "wrap", "width", "height"];
18
+ const _excluded = ["children"],
19
+ _excluded2 = ["rows", "cols", "alignItems", "className", "justify", "gutter", "wrap", "width", "height"];
20
20
 
21
21
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
22
22
 
23
23
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
24
24
  const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
25
+ const {
26
+ children
27
+ } = props,
28
+ propsWithoutChildren = _objectWithoutProperties(props, _excluded);
29
+
30
+ const propsWithDefaults = useMemoMergePropsWithDefault(propsWithoutChildren, defaultProps);
31
+
25
32
  const {
26
33
  rows,
27
34
  cols,
28
35
  alignItems,
29
- children,
30
36
  className,
31
37
  justify,
32
38
  gutter,
33
39
  wrap,
34
40
  width,
35
41
  height
36
- } = props,
37
- rest = _objectWithoutProperties(props, _excluded);
42
+ } = propsWithDefaults,
43
+ rest = _objectWithoutProperties(propsWithDefaults, _excluded2);
38
44
 
39
45
  let isSpanParent = true;
40
46
  const renderChildren = React.Children.map(children, child => {
@@ -44,7 +50,8 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
44
50
  height: hc,
45
51
  span
46
52
  } = child.props;
47
- if (!span) isSpanParent = false;
53
+ if (!span) isSpanParent = false; // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
54
+
48
55
  return /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
49
56
  width: fixSpaceGutter(wc),
50
57
  height: fixSpaceGutter(hc)
@@ -63,18 +70,16 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
63
70
  rows: rows,
64
71
  wrap: wrap,
65
72
  childNumber: React.Children.count(children),
66
- ref: ref,
67
- w: width,
68
- h: height
73
+ ref: ref
69
74
  }, rest), {}, {
75
+ w: width,
76
+ h: height,
70
77
  children: renderChildren
71
78
  }));
72
79
  }); // Since this component is using ForwardRef, we must provide a displayName to avoid 'undefined' name in propsTable.
73
80
 
74
- Grid.displayName = 'Grid'; // We should use props helpers to merge default props in the future, right now it causes many issues within Dimsum
75
-
76
- Grid.defaultProps = defaultProps;
81
+ Grid.displayName = 'Grid';
77
82
  const DSGridWithSchema = describe(Grid);
78
- DSGridWithSchema.propTypes = propTypes;
83
+ DSGridWithSchema.propTypes = DSGridPropTypes;
79
84
 
80
85
  export { DSGridWithSchema, Grid as default };
package/esm/react-desc-prop-types.js ADDED
@@ -0,0 +1,49 @@
1
+ import 'core-js/modules/esnext.async-iterator.filter.js';
2
+ import 'core-js/modules/esnext.iterator.constructor.js';
3
+ import 'core-js/modules/esnext.iterator.filter.js';
4
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
5
+ import 'core-js/modules/esnext.iterator.for-each.js';
6
+ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
7
+ import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';
8
+ import { alignItemsPlacement, justifyPlacement, wrap } from './utils/constants.js';
9
+
10
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
11
+
12
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
13
+ const defaultProps = {
14
+ rows: [],
15
+ cols: [],
16
+ className: '',
17
+ justify: 'flex-start',
18
+ gutter: 0,
19
+ wrap: 'wrap',
20
+ span: 1
21
+ }; // =============================================================================
22
+ // PropTypes
23
+ // =============================================================================
24
+
25
+ const rowColBreakpoints = PropTypes.shape({
26
+ small: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
27
+ medium: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
28
+ large: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))
29
+ });
30
+ const spanBreakpoints = PropTypes.shape({
31
+ small: PropTypes.number,
32
+ medium: PropTypes.number,
33
+ large: PropTypes.number
34
+ });
35
+ const DSGridPropTypes = _objectSpread(_objectSpread(_objectSpread({}, globalAttributesPropTypes), xstyledPropTypes), {}, {
36
+ rows: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), rowColBreakpoints]).description('Row layout cells').defaultValue([]),
37
+ cols: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), rowColBreakpoints]).description('Column layout cells').defaultValue([]),
38
+ span: PropTypes.oneOfType([PropTypes.number, spanBreakpoints]).description('Expands the grid element within columns.'),
39
+ alignItems: PropTypes.oneOf(alignItemsPlacement).description('flex-like align items prop'),
40
+ children: PropTypes.node.description('Children node inside grid cell'),
41
+ className: PropTypes.string.description('CSS class').defaultValue(''),
42
+ justifyContent: PropTypes.oneOf(justifyPlacement).description('flex-like justify prop').defaultValue(justifyPlacement[0]),
43
+ gutter: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Space between cells prop').defaultValue(0),
44
+ wrap: PropTypes.oneOf(wrap).description('Wrap type').defaultValue(wrap[0]),
45
+ height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid height.'),
46
+ width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid width.')
47
+ });
48
+
49
+ export { DSGridPropTypes, defaultProps };
package/esm/utils/styles.js CHANGED
@@ -15,21 +15,27 @@ const manageSpan = css(_templateObject || (_templateObject = _taggedTemplateLite
15
15
  } = _ref;
16
16
  if (!isSpanParent) return '';
17
17
 
18
- if (typeof span === 'object') {
19
- let data = '';
20
- Object.keys(theme.media).forEach(key => {
21
- if (span[key] && theme.breakpoints[key]) {
22
- if (key === 'small') {
23
- data += "\n -ms-grid-column: auto / span ".concat(span[key], ";\n grid-column: auto / span ").concat(span[key], ";\n ");
24
- } else {
25
- 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 }");
26
- }
27
- }
28
- });
29
- return data;
18
+ if (typeof span === 'number') {
19
+ return "\n -ms-grid-column: auto / span ".concat(span, ";\n grid-column: auto / span ").concat(span, ";");
30
20
  }
31
21
 
32
- return "\n -ms-grid-column: auto / span ".concat(span, ";\n grid-column: auto / span ").concat(span, ";");
22
+ if (typeof span !== 'object') return ""; // Span object
23
+
24
+ let data = '';
25
+ Object.keys(theme.media).forEach(key => {
26
+ // Type castings
27
+ const theKey = key;
28
+ const spanValue = span[theKey];
29
+
30
+ if (!!spanValue && theme.breakpoints[theKey]) {
31
+ if (theKey === 'small') {
32
+ data += "\n -ms-grid-column: auto / span ".concat(spanValue, ";\n grid-column: auto / span ").concat(spanValue, ";\n ");
33
+ } else {
34
+ data += "@media (min-width: ".concat(theme.breakpoints[theKey], ") {\n -ms-grid-column: auto / span ").concat(spanValue, ";\n grid-column: auto / span ").concat(spanValue, ";\n }");
35
+ }
36
+ }
37
+ });
38
+ return data;
33
39
  });
34
40
  const manageCols = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n"])), _ref2 => {
35
41
  let {
@@ -41,20 +47,23 @@ const manageCols = css(_templateObject2 || (_templateObject2 = _taggedTemplateLi
41
47
  if (typeof cols === 'object' && !Array.isArray(cols)) {
42
48
  let data = '';
43
49
  Object.keys(theme.media).forEach(key => {
44
- if (cols[key] && Array.isArray(cols[key])) {
45
- const mtg = mapTemplateGrid(cols[key]).join(' ');
46
- const mtgs = mapTemplateGrid(cols[key]).map(c => "minmax(0, ".concat(c, ")")).join(' ');
50
+ const theKey = key;
51
+ const colValue = cols[theKey];
47
52
 
48
- if (key === 'small') {
49
- 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', ";");
53
+ if (!!colValue && Array.isArray(colValue)) {
54
+ const mtg = mapTemplateGrid(colValue).join(' ');
55
+ const mtgs = mapTemplateGrid(colValue).map(c => "minmax(0, ".concat(c, ")")).join(' ');
56
+
57
+ if (theKey === 'small') {
58
+ 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', ";");
50
59
  } else {
51
- 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 }");
60
+ data += "@media (min-width: ".concat(theme.breakpoints[theKey], ") {\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 }");
52
61
  }
53
- } else if (isSpanParent) {
54
- if (key === 'small') {
55
- data += "-ms-grid-columns: repeat(".concat(cols[key], ", 1fr);\n grid-template-columns: repeat(").concat(cols[key], ", 1fr);");
62
+ } else if (!!colValue && isSpanParent) {
63
+ if (theKey === 'small') {
64
+ data += "-ms-grid-columns: repeat(".concat(colValue, ", 1fr);\n grid-template-columns: repeat(").concat(colValue, ", 1fr);");
56
65
  } else {
57
- 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 }");
66
+ data += "@media (min-width: ".concat(theme.breakpoints[theKey], ") {\n -ms-grid-columns: repeat(").concat(colValue, ", 1fr);\n grid-template-columns: repeat(").concat(colValue, ", 1fr);\n }");
58
67
  }
59
68
  }
60
69
  });
@@ -64,11 +73,11 @@ const manageCols = css(_templateObject2 || (_templateObject2 = _taggedTemplateLi
64
73
  if (Array.isArray(cols)) {
65
74
  const mtg = mapTemplateGrid(cols).join(' ');
66
75
  const mtgs = mapTemplateGrid(cols).map(c => "minmax(0, ".concat(c, ")")).join(' ');
67
- 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 ");
76
+ 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', ";");
68
77
  }
69
78
 
70
79
  if (isSpanParent) {
71
- return "\n -ms-grid-columns: repeat(".concat(cols, ", 1fr);\n grid-template-columns: repeat(").concat(cols, ", 1fr);");
80
+ return "\n -ms-grid-columns: repeat(".concat(cols, ", 1fr);\n grid-template-columns: repeat(").concat(cols, ", 1fr);");
72
81
  }
73
82
 
74
83
  return '';
@@ -83,20 +92,23 @@ const manageRows = css(_templateObject3 || (_templateObject3 = _taggedTemplateLi
83
92
  if (typeof rows === 'object' && !Array.isArray(rows)) {
84
93
  let data = '';
85
94
  Object.keys(theme.media).forEach(key => {
86
- if (rows[key] && Array.isArray(rows[key])) {
87
- const mtg = mapTemplateGrid(rows[key]).join(' ');
88
- const mtgs = mapTemplateGrid(rows[key]).map(c => "minmax(0, ".concat(c, ")")).join(' ');
95
+ const theKey = key;
96
+ const rowValue = rows[theKey];
97
+
98
+ if (rowValue && Array.isArray(rowValue)) {
99
+ const mtg = mapTemplateGrid(rowValue).join(' ');
100
+ const mtgs = mapTemplateGrid(rowValue).map(c => "minmax(0, ".concat(c, ")")).join(' ');
89
101
 
90
102
  if (key === 'small') {
91
- 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', ";");
103
+ 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', ";");
92
104
  } else {
93
- 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 }");
105
+ data += "@media (min-width: ".concat(theme.breakpoints[theKey], ") {\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 }");
94
106
  }
95
- } else if (isSpanParent) {
96
- if (key === 'small') {
97
- data += "-ms-grid-rows: repeat(".concat(rows[key], ", 1fr);\n grid-template-rows: repeat(").concat(rows[key], ", 1fr);");
107
+ } else if (!!rowValue && isSpanParent) {
108
+ if (theKey === 'small') {
109
+ data += "-ms-grid-rows: repeat(".concat(rowValue, ", 1fr);\n grid-template-rows: repeat(").concat(rowValue, ", 1fr);");
98
110
  } else {
99
- 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 }");
111
+ data += "@media (min-width: ".concat(theme.breakpoints[theKey], ") {\n -ms-grid-rows: repeat(").concat(rowValue, ", 1fr);\n grid-template-rows: repeat(").concat(rowValue, ", 1fr);\n }");
100
112
  }
101
113
  }
102
114
  });
@@ -106,11 +118,11 @@ const manageRows = css(_templateObject3 || (_templateObject3 = _taggedTemplateLi
106
118
  if (Array.isArray(rows)) {
107
119
  const mtg = mapTemplateGrid(rows).join(' ');
108
120
  const mtgs = mapTemplateGrid(rows).map(c => "minmax(0, ".concat(c, ")")).join(' ');
109
- 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 ");
121
+ 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 ");
110
122
  }
111
123
 
112
124
  if (isSpanParent) {
113
- return "\n -ms-grid-rows: repeat(".concat(rows, ", 1fr);\n grid-template-rows: repeat(").concat(rows, ", 1fr);");
125
+ return "\n -ms-grid-rows: repeat(".concat(rows, ", 1fr);\n grid-template-rows: repeat(").concat(rows, ", 1fr);");
114
126
  }
115
127
 
116
128
  return '';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-grid",
3
- "version": "2.3.2",
3
+ "version": "2.4.0-rc.1",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Grid",
6
6
  "module": "./esm/index.js",
@@ -23,9 +23,9 @@
23
23
  "import": "./esm/types.js",
24
24
  "require": "./cjs/types.js"
25
25
  },
26
- "./propTypes": {
27
- "import": "./esm/propTypes.js",
28
- "require": "./cjs/propTypes.js"
26
+ "./react-desc-prop-types": {
27
+ "import": "./esm/react-desc-prop-types.js",
28
+ "require": "./cjs/react-desc-prop-types.js"
29
29
  },
30
30
  "./GridItem": {
31
31
  "import": "./esm/GridItem.js",
@@ -34,10 +34,6 @@
34
34
  "./Grid": {
35
35
  "import": "./esm/Grid.js",
36
36
  "require": "./cjs/Grid.js"
37
- },
38
- "./defaultProps": {
39
- "import": "./esm/defaultProps.js",
40
- "require": "./cjs/defaultProps.js"
41
37
  }
42
38
  },
43
39
  "sideEffects": [
@@ -60,7 +56,7 @@
60
56
  "build": "node ../../scripts/build/build.js"
61
57
  },
62
58
  "dependencies": {
63
- "@elliemae/ds-system": "2.3.2",
59
+ "@elliemae/ds-system": "2.4.0-rc.1",
64
60
  "@xstyled/styled-components": "~3.1.1",
65
61
  "react-desc": "~4.1.3"
66
62
  },
package/types/Grid.d.ts CHANGED
@@ -1,11 +1,6 @@
1
- /// <reference path="../../../../shared/typings/react-desc.d.ts" />
2
1
  import React from 'react';
3
- import type { GridPropsT } from './types';
4
- declare const Grid: React.ForwardRefExoticComponent<GridPropsT & React.RefAttributes<HTMLDivElement>>;
5
- declare const DSGridWithSchema: {
6
- (props?: unknown): JSX.Element;
7
- propTypes: unknown;
8
- toTypescript: () => import("react-desc").TypescriptSchema;
9
- };
2
+ import { DSGridT } from './react-desc-prop-types';
3
+ declare const Grid: React.ForwardRefExoticComponent<DSGridT.Props & React.RefAttributes<HTMLDivElement>>;
4
+ declare const DSGridWithSchema: import("@elliemae/ds-props-helpers/types/propTypes/types").DocumentedReactComponent<DSGridT.Props & React.RefAttributes<HTMLDivElement>>;
10
5
  export default Grid;
11
6
  export { DSGridWithSchema };
package/types/GridItem.d.ts CHANGED
@@ -1,2 +1,3 @@
1
- import type { GridItemPropsT } from './types';
2
- export declare const GridItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridItemPropsT, never>;
1
+ import { LayoutProps, SpaceProps, SizingProps } from '@xstyled/styled-components';
2
+ import { DSGridT } from './react-desc-prop-types';
3
+ export declare const GridItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, DSGridT.ItemProps & LayoutProps<import("@xstyled/system").Theme> & SpaceProps<import("@xstyled/system").Theme> & SizingProps<import("@xstyled/system").Theme>, never>;
package/types/react-desc-prop-types.d.ts ADDED
@@ -0,0 +1,55 @@
1
+ import React from 'react';
2
+ import { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';
3
+ import { alignItemsPlacement, justifyPlacement, wrap } from './utils/constants';
4
+ export declare namespace DSGridT {
5
+ interface RowColBreakpoints {
6
+ small?: string | number[];
7
+ medium?: string | number[];
8
+ large?: string | number[];
9
+ }
10
+ interface SpanBreakpoints {
11
+ small?: number;
12
+ medium?: number;
13
+ large?: number;
14
+ }
15
+ interface IProps {
16
+ height?: string;
17
+ width?: string;
18
+ rows?: string[] | string | number[] | RowColBreakpoints;
19
+ cols?: string[] | string | number[] | RowColBreakpoints;
20
+ justifyContent?: typeof justifyPlacement[number];
21
+ alignItems?: typeof alignItemsPlacement[number];
22
+ children?: React.ReactNode;
23
+ className?: string;
24
+ justify?: typeof justifyPlacement[number];
25
+ gutter?: string | number;
26
+ wrap?: typeof wrap[number];
27
+ span?: number;
28
+ }
29
+ interface Props extends IProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof IProps>, XstyledProps {
30
+ }
31
+ interface ItemProps {
32
+ rows: string[] | string | number[] | RowColBreakpoints;
33
+ cols: string[] | string | number[] | RowColBreakpoints;
34
+ alignItems: typeof alignItemsPlacement[number];
35
+ children: React.ReactNode;
36
+ className: string;
37
+ justify: typeof justifyPlacement[number];
38
+ gutter: string | number;
39
+ wrap: typeof wrap[number];
40
+ childNumber: number;
41
+ isSpanParent: boolean;
42
+ span?: number | SpanBreakpoints;
43
+ ref: React.ForwardedRef<HTMLDivElement>;
44
+ }
45
+ }
46
+ export declare const defaultProps: {
47
+ rows: never[];
48
+ cols: never[];
49
+ className: string;
50
+ justify: string;
51
+ gutter: number;
52
+ wrap: string;
53
+ span: number;
54
+ };
55
+ export declare const DSGridPropTypes: React.WeakValidationMap<unknown>;
package/types/types.d.ts CHANGED
@@ -49,18 +49,4 @@ export interface GridPropsWithDefaultT {
49
49
  wrap: typeof wrap[number];
50
50
  span: number | SpanBreakpoints;
51
51
  }
52
- export interface GridItemPropsT {
53
- rows: string | number[] | RowColBreakpoints;
54
- cols: string | number[] | RowColBreakpoints;
55
- alignItems: typeof alignItemsPlacement[number];
56
- children: React.ReactElement[];
57
- className: string;
58
- justify: typeof justifyPlacement[number];
59
- gutter: string | number;
60
- wrap: typeof wrap[number];
61
- childNumber: number;
62
- isSpanParent: boolean;
63
- span?: number | SpanBreakpoints;
64
- ref: React.ForwardedRef<HTMLDivElement>;
65
- }
66
52
  export {};
package/types/utils/constants.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- export declare const justifyPlacement: readonly ["flex-start", "center", "flex-end", "space-between", "space-around", "space-evenly"];
2
- export declare const alignItemsPlacement: readonly ["flex-start", "center", "flex-end", "stretch", "baseline"];
3
- export declare const wrap: readonly ["wrap", "nowrap", "wrap-reverse"];
1
+ export declare const justifyPlacement: string[];
2
+ export declare const alignItemsPlacement: string[];
3
+ export declare const wrap: string[];
package/cjs/defaultProps.js DELETED
@@ -1,15 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const defaultProps = {
6
- rows: [],
7
- cols: [],
8
- className: '',
9
- justify: 'flex-start',
10
- gutter: 0,
11
- wrap: 'wrap',
12
- span: 1
13
- };
14
-
15
- exports.defaultProps = defaultProps;
package/cjs/propTypes.js DELETED
@@ -1,46 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var reactDesc = require('react-desc');
6
- var constants = require('./utils/constants.js');
7
-
8
- const rowColBreakpoints = reactDesc.PropTypes.shape({
9
- small: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string])),
10
- medium: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string])),
11
- large: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]))
12
- });
13
- const spanBreakpoints = reactDesc.PropTypes.shape({
14
- small: reactDesc.PropTypes.number,
15
- medium: reactDesc.PropTypes.number,
16
- large: reactDesc.PropTypes.number
17
- });
18
- const propTypes = {
19
- rows: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string])), rowColBreakpoints]).description('Row layout cells').defaultValue([]),
20
- cols: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string])), rowColBreakpoints]).description('Column layout cells').defaultValue([]),
21
- span: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, spanBreakpoints]).description('Expands the grid element within columns.'),
22
- alignItems: reactDesc.PropTypes.oneOf(constants.alignItemsPlacement).description('flex-like align items prop'),
23
- children: reactDesc.PropTypes.node.description('Children node inside grid cell'),
24
- className: reactDesc.PropTypes.string.description('CSS class').defaultValue(''),
25
- justifyContent: reactDesc.PropTypes.oneOf(constants.justifyPlacement).description('flex-like justify prop').defaultValue(constants.justifyPlacement[0]),
26
- gutter: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Space between cells prop').defaultValue(0),
27
- wrap: reactDesc.PropTypes.oneOf(constants.wrap).description('Wrap type').defaultValue(constants.wrap[0]),
28
- height: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid height.'),
29
- width: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid width.'),
30
- p: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid padding in all sides.'),
31
- m: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid margin in all sides.'),
32
- px: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid padding in left and right sides.'),
33
- mx: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid margin in left and right sides.'),
34
- py: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid padding in top and bottom sides.'),
35
- my: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid margin in top and bottom sides.'),
36
- ml: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid left margin.'),
37
- mr: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid right margin'),
38
- mt: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid top margin'),
39
- mb: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid bottom margin'),
40
- pl: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid left padding.'),
41
- pr: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid right padding'),
42
- pt: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid top padding'),
43
- pb: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('Grid bottom padding')
44
- };
45
-
46
- exports.propTypes = propTypes;
package/esm/defaultProps.js DELETED
@@ -1,11 +0,0 @@
1
- const defaultProps = {
2
- rows: [],
3
- cols: [],
4
- className: '',
5
- justify: 'flex-start',
6
- gutter: 0,
7
- wrap: 'wrap',
8
- span: 1
9
- };
10
-
11
- export { defaultProps };
package/esm/propTypes.js DELETED
@@ -1,42 +0,0 @@
1
- import { PropTypes } from 'react-desc';
2
- import { alignItemsPlacement, justifyPlacement, wrap } from './utils/constants.js';
3
-
4
- const rowColBreakpoints = PropTypes.shape({
5
- small: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
6
- medium: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
7
- large: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))
8
- });
9
- const spanBreakpoints = PropTypes.shape({
10
- small: PropTypes.number,
11
- medium: PropTypes.number,
12
- large: PropTypes.number
13
- });
14
- const propTypes = {
15
- rows: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), rowColBreakpoints]).description('Row layout cells').defaultValue([]),
16
- cols: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), rowColBreakpoints]).description('Column layout cells').defaultValue([]),
17
- span: PropTypes.oneOfType([PropTypes.number, spanBreakpoints]).description('Expands the grid element within columns.'),
18
- alignItems: PropTypes.oneOf(alignItemsPlacement).description('flex-like align items prop'),
19
- children: PropTypes.node.description('Children node inside grid cell'),
20
- className: PropTypes.string.description('CSS class').defaultValue(''),
21
- justifyContent: PropTypes.oneOf(justifyPlacement).description('flex-like justify prop').defaultValue(justifyPlacement[0]),
22
- gutter: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Space between cells prop').defaultValue(0),
23
- wrap: PropTypes.oneOf(wrap).description('Wrap type').defaultValue(wrap[0]),
24
- height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid height.'),
25
- width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid width.'),
26
- p: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid padding in all sides.'),
27
- m: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid margin in all sides.'),
28
- px: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid padding in left and right sides.'),
29
- mx: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid margin in left and right sides.'),
30
- py: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid padding in top and bottom sides.'),
31
- my: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid margin in top and bottom sides.'),
32
- ml: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid left margin.'),
33
- mr: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid right margin'),
34
- mt: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid top margin'),
35
- mb: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid bottom margin'),
36
- pl: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid left padding.'),
37
- pr: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid right padding'),
38
- pt: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid top padding'),
39
- pb: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('Grid bottom padding')
40
- };
41
-
42
- export { propTypes };
package/types/defaultProps.d.ts DELETED
@@ -1,9 +0,0 @@
1
- export declare const defaultProps: {
2
- rows: never[];
3
- cols: never[];
4
- className: string;
5
- justify: "flex-start";
6
- gutter: number;
7
- wrap: "wrap";
8
- span: number;
9
- };
package/types/propTypes.d.ts DELETED
@@ -1,135 +0,0 @@
1
- /// <reference path="../../../../shared/typings/react-desc.d.ts" />
2
- export declare const propTypes: {
3
- rows: {
4
- deprecated: import("react-desc").PropTypesDescValidator;
5
- };
6
- cols: {
7
- deprecated: import("react-desc").PropTypesDescValidator;
8
- };
9
- span: {
10
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
11
- deprecated: import("react-desc").PropTypesDescValidator;
12
- };
13
- isRequired: import("react-desc").PropTypesDescValue;
14
- };
15
- alignItems: {
16
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
17
- deprecated: import("react-desc").PropTypesDescValidator;
18
- };
19
- isRequired: import("react-desc").PropTypesDescValue;
20
- };
21
- children: {
22
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
23
- deprecated: import("react-desc").PropTypesDescValidator;
24
- };
25
- isRequired: import("react-desc").PropTypesDescValue;
26
- };
27
- className: {
28
- deprecated: import("react-desc").PropTypesDescValidator;
29
- };
30
- justifyContent: {
31
- deprecated: import("react-desc").PropTypesDescValidator;
32
- };
33
- gutter: {
34
- deprecated: import("react-desc").PropTypesDescValidator;
35
- };
36
- wrap: {
37
- deprecated: import("react-desc").PropTypesDescValidator;
38
- };
39
- height: {
40
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
41
- deprecated: import("react-desc").PropTypesDescValidator;
42
- };
43
- isRequired: import("react-desc").PropTypesDescValue;
44
- };
45
- width: {
46
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
47
- deprecated: import("react-desc").PropTypesDescValidator;
48
- };
49
- isRequired: import("react-desc").PropTypesDescValue;
50
- };
51
- p: {
52
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
53
- deprecated: import("react-desc").PropTypesDescValidator;
54
- };
55
- isRequired: import("react-desc").PropTypesDescValue;
56
- };
57
- m: {
58
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
59
- deprecated: import("react-desc").PropTypesDescValidator;
60
- };
61
- isRequired: import("react-desc").PropTypesDescValue;
62
- };
63
- px: {
64
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
65
- deprecated: import("react-desc").PropTypesDescValidator;
66
- };
67
- isRequired: import("react-desc").PropTypesDescValue;
68
- };
69
- mx: {
70
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
71
- deprecated: import("react-desc").PropTypesDescValidator;
72
- };
73
- isRequired: import("react-desc").PropTypesDescValue;
74
- };
75
- py: {
76
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
77
- deprecated: import("react-desc").PropTypesDescValidator;
78
- };
79
- isRequired: import("react-desc").PropTypesDescValue;
80
- };
81
- my: {
82
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
83
- deprecated: import("react-desc").PropTypesDescValidator;
84
- };
85
- isRequired: import("react-desc").PropTypesDescValue;
86
- };
87
- ml: {
88
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
89
- deprecated: import("react-desc").PropTypesDescValidator;
90
- };
91
- isRequired: import("react-desc").PropTypesDescValue;
92
- };
93
- mr: {
94
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
95
- deprecated: import("react-desc").PropTypesDescValidator;
96
- };
97
- isRequired: import("react-desc").PropTypesDescValue;
98
- };
99
- mt: {
100
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
101
- deprecated: import("react-desc").PropTypesDescValidator;
102
- };
103
- isRequired: import("react-desc").PropTypesDescValue;
104
- };
105
- mb: {
106
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
107
- deprecated: import("react-desc").PropTypesDescValidator;
108
- };
109
- isRequired: import("react-desc").PropTypesDescValue;
110
- };
111
- pl: {
112
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
113
- deprecated: import("react-desc").PropTypesDescValidator;
114
- };
115
- isRequired: import("react-desc").PropTypesDescValue;
116
- };
117
- pr: {
118
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
119
- deprecated: import("react-desc").PropTypesDescValidator;
120
- };
121
- isRequired: import("react-desc").PropTypesDescValue;
122
- };
123
- pt: {
124
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
125
- deprecated: import("react-desc").PropTypesDescValidator;
126
- };
127
- isRequired: import("react-desc").PropTypesDescValue;
128
- };
129
- pb: {
130
- defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
131
- deprecated: import("react-desc").PropTypesDescValidator;
132
- };
133
- isRequired: import("react-desc").PropTypesDescValue;
134
- };
135
- };