@zendeskgarden/react-grid 8.47.0 → 8.48.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.
- package/dist/index.cjs.js +72 -64
- package/dist/index.esm.js +5 -4
- package/dist/typings/index.d.ts +5 -0
- package/package.json +3 -3
package/dist/index.cjs.js
CHANGED
|
@@ -77,6 +77,7 @@ function _objectWithoutProperties(source, excluded) {
|
|
|
77
77
|
|
|
78
78
|
var ARRAY_ALIGN_ITEMS = ['start', 'end', 'center', 'baseline', 'stretch'];
|
|
79
79
|
var ARRAY_ALIGN_SELF = ['auto', 'start', 'end', 'center', 'baseline', 'stretch'];
|
|
80
|
+
var ARRAY_DIRECTION = ['row', 'row-reverse', 'column', 'column-reverse'];
|
|
80
81
|
var ARRAY_JUSTIFY_CONTENT = ['start', 'end', 'center', 'between', 'around'];
|
|
81
82
|
var ARRAY_TEXT_ALIGN = ['start', 'end', 'center', 'justify'];
|
|
82
83
|
var ARRAY_SPACE = [false, 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
|
|
@@ -132,9 +133,9 @@ var sizeStyles$2 = function sizeStyles(props) {
|
|
|
132
133
|
var padding = props.gutters ? polished.math("".concat(props.theme.space[props.gutters], " / 2")) : 0;
|
|
133
134
|
return styled.css(["padding-right:", ";padding-left:", ";"], padding, padding);
|
|
134
135
|
};
|
|
135
|
-
var StyledCol = styled__default[
|
|
136
|
+
var StyledCol = styled__default["default"].div.attrs({
|
|
136
137
|
'data-garden-id': COMPONENT_ID$2,
|
|
137
|
-
'data-garden-version': '8.
|
|
138
|
+
'data-garden-version': '8.48.1'
|
|
138
139
|
}).withConfig({
|
|
139
140
|
displayName: "StyledCol",
|
|
140
141
|
componentId: "sc-inuw62-0"
|
|
@@ -172,9 +173,9 @@ var sizeStyles$1 = function sizeStyles(props) {
|
|
|
172
173
|
var padding = props.gutters ? polished.math("".concat(props.theme.space[props.gutters], " / 2")) : 0;
|
|
173
174
|
return styled.css(["padding-right:", ";padding-left:", ";"], padding, padding);
|
|
174
175
|
};
|
|
175
|
-
var StyledGrid = styled__default[
|
|
176
|
+
var StyledGrid = styled__default["default"].div.attrs({
|
|
176
177
|
'data-garden-id': COMPONENT_ID$1,
|
|
177
|
-
'data-garden-version': '8.
|
|
178
|
+
'data-garden-version': '8.48.1'
|
|
178
179
|
}).withConfig({
|
|
179
180
|
displayName: "StyledGrid",
|
|
180
181
|
componentId: "sc-oxgg5i-0"
|
|
@@ -222,9 +223,9 @@ var sizeStyles = function sizeStyles(props) {
|
|
|
222
223
|
var margin = props.gutters ? polished.math("".concat(props.theme.space[props.gutters], " / 2")) : 0;
|
|
223
224
|
return styled.css(["margin-right:-", ";margin-left:-", ";"], margin, margin);
|
|
224
225
|
};
|
|
225
|
-
var StyledRow = styled__default[
|
|
226
|
+
var StyledRow = styled__default["default"].div.attrs({
|
|
226
227
|
'data-garden-id': COMPONENT_ID,
|
|
227
|
-
'data-garden-version': '8.
|
|
228
|
+
'data-garden-version': '8.48.1'
|
|
228
229
|
}).withConfig({
|
|
229
230
|
displayName: "StyledRow",
|
|
230
231
|
componentId: "sc-xjsdg1-0"
|
|
@@ -260,14 +261,14 @@ var useGridContext = function useGridContext() {
|
|
|
260
261
|
};
|
|
261
262
|
|
|
262
263
|
var _excluded$2 = ["size"];
|
|
263
|
-
var Col = React__default[
|
|
264
|
+
var Col = React__default["default"].forwardRef(function (_ref, ref) {
|
|
264
265
|
var size = _ref.size,
|
|
265
266
|
props = _objectWithoutProperties(_ref, _excluded$2);
|
|
266
267
|
var _useGridContext = useGridContext(),
|
|
267
268
|
columns = _useGridContext.columns,
|
|
268
269
|
gutters = _useGridContext.gutters,
|
|
269
270
|
debug = _useGridContext.debug;
|
|
270
|
-
return React__default[
|
|
271
|
+
return React__default["default"].createElement(StyledCol, _extends({
|
|
271
272
|
sizeAll: size,
|
|
272
273
|
columns: columns,
|
|
273
274
|
gutters: gutters,
|
|
@@ -277,40 +278,40 @@ var Col = React__default['default'].forwardRef(function (_ref, ref) {
|
|
|
277
278
|
});
|
|
278
279
|
Col.displayName = 'Col';
|
|
279
280
|
Col.propTypes = {
|
|
280
|
-
size: PropTypes__default[
|
|
281
|
-
xs: PropTypes__default[
|
|
282
|
-
sm: PropTypes__default[
|
|
283
|
-
md: PropTypes__default[
|
|
284
|
-
lg: PropTypes__default[
|
|
285
|
-
xl: PropTypes__default[
|
|
286
|
-
alignSelf: PropTypes__default[
|
|
287
|
-
alignSelfXs: PropTypes__default[
|
|
288
|
-
alignSelfSm: PropTypes__default[
|
|
289
|
-
alignSelfMd: PropTypes__default[
|
|
290
|
-
alignSelfLg: PropTypes__default[
|
|
291
|
-
alignSelfXl: PropTypes__default[
|
|
292
|
-
textAlign: PropTypes__default[
|
|
293
|
-
textAlignXs: PropTypes__default[
|
|
294
|
-
textAlignSm: PropTypes__default[
|
|
295
|
-
textAlignMd: PropTypes__default[
|
|
296
|
-
textAlignLg: PropTypes__default[
|
|
297
|
-
textAlignXl: PropTypes__default[
|
|
298
|
-
offset: PropTypes__default[
|
|
299
|
-
offsetXs: PropTypes__default[
|
|
300
|
-
offsetSm: PropTypes__default[
|
|
301
|
-
offsetMd: PropTypes__default[
|
|
302
|
-
offsetLg: PropTypes__default[
|
|
303
|
-
offsetXl: PropTypes__default[
|
|
304
|
-
order: PropTypes__default[
|
|
305
|
-
orderXs: PropTypes__default[
|
|
306
|
-
orderSm: PropTypes__default[
|
|
307
|
-
orderMd: PropTypes__default[
|
|
308
|
-
orderLg: PropTypes__default[
|
|
309
|
-
orderXl: PropTypes__default[
|
|
281
|
+
size: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
|
|
282
|
+
xs: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string, PropTypes__default["default"].bool]),
|
|
283
|
+
sm: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string, PropTypes__default["default"].bool]),
|
|
284
|
+
md: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string, PropTypes__default["default"].bool]),
|
|
285
|
+
lg: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string, PropTypes__default["default"].bool]),
|
|
286
|
+
xl: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string, PropTypes__default["default"].bool]),
|
|
287
|
+
alignSelf: PropTypes__default["default"].oneOf(ARRAY_ALIGN_SELF),
|
|
288
|
+
alignSelfXs: PropTypes__default["default"].oneOf(ARRAY_ALIGN_SELF),
|
|
289
|
+
alignSelfSm: PropTypes__default["default"].oneOf(ARRAY_ALIGN_SELF),
|
|
290
|
+
alignSelfMd: PropTypes__default["default"].oneOf(ARRAY_ALIGN_SELF),
|
|
291
|
+
alignSelfLg: PropTypes__default["default"].oneOf(ARRAY_ALIGN_SELF),
|
|
292
|
+
alignSelfXl: PropTypes__default["default"].oneOf(ARRAY_ALIGN_SELF),
|
|
293
|
+
textAlign: PropTypes__default["default"].oneOf(ARRAY_TEXT_ALIGN),
|
|
294
|
+
textAlignXs: PropTypes__default["default"].oneOf(ARRAY_TEXT_ALIGN),
|
|
295
|
+
textAlignSm: PropTypes__default["default"].oneOf(ARRAY_TEXT_ALIGN),
|
|
296
|
+
textAlignMd: PropTypes__default["default"].oneOf(ARRAY_TEXT_ALIGN),
|
|
297
|
+
textAlignLg: PropTypes__default["default"].oneOf(ARRAY_TEXT_ALIGN),
|
|
298
|
+
textAlignXl: PropTypes__default["default"].oneOf(ARRAY_TEXT_ALIGN),
|
|
299
|
+
offset: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
|
|
300
|
+
offsetXs: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
|
|
301
|
+
offsetSm: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
|
|
302
|
+
offsetMd: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
|
|
303
|
+
offsetLg: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
|
|
304
|
+
offsetXl: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
|
|
305
|
+
order: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
|
|
306
|
+
orderXs: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
|
|
307
|
+
orderSm: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
|
|
308
|
+
orderMd: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
|
|
309
|
+
orderLg: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
|
|
310
|
+
orderXl: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string])
|
|
310
311
|
};
|
|
311
312
|
|
|
312
313
|
var _excluded$1 = ["columns", "debug"];
|
|
313
|
-
var Grid = React__default[
|
|
314
|
+
var Grid = React__default["default"].forwardRef(function (_ref, ref) {
|
|
314
315
|
var columns = _ref.columns,
|
|
315
316
|
debug = _ref.debug,
|
|
316
317
|
props = _objectWithoutProperties(_ref, _excluded$1);
|
|
@@ -321,18 +322,18 @@ var Grid = React__default['default'].forwardRef(function (_ref, ref) {
|
|
|
321
322
|
debug: debug
|
|
322
323
|
};
|
|
323
324
|
}, [columns, props.gutters, debug]);
|
|
324
|
-
return React__default[
|
|
325
|
+
return React__default["default"].createElement(GridContext.Provider, {
|
|
325
326
|
value: value
|
|
326
|
-
}, React__default[
|
|
327
|
+
}, React__default["default"].createElement(StyledGrid, _extends({
|
|
327
328
|
debug: debug,
|
|
328
329
|
ref: ref
|
|
329
330
|
}, props)));
|
|
330
331
|
});
|
|
331
332
|
Grid.displayName = 'Grid';
|
|
332
333
|
Grid.propTypes = {
|
|
333
|
-
columns: PropTypes__default[
|
|
334
|
-
gutters: PropTypes__default[
|
|
335
|
-
debug: PropTypes__default[
|
|
334
|
+
columns: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
|
|
335
|
+
gutters: PropTypes__default["default"].oneOf(ARRAY_SPACE),
|
|
336
|
+
debug: PropTypes__default["default"].bool
|
|
336
337
|
};
|
|
337
338
|
Grid.defaultProps = {
|
|
338
339
|
columns: 12,
|
|
@@ -340,13 +341,13 @@ Grid.defaultProps = {
|
|
|
340
341
|
};
|
|
341
342
|
|
|
342
343
|
var _excluded = ["wrap"];
|
|
343
|
-
var Row = React__default[
|
|
344
|
+
var Row = React__default["default"].forwardRef(function (_ref, ref) {
|
|
344
345
|
var wrap = _ref.wrap,
|
|
345
346
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
346
347
|
var _useGridContext = useGridContext(),
|
|
347
348
|
gutters = _useGridContext.gutters,
|
|
348
349
|
debug = _useGridContext.debug;
|
|
349
|
-
return React__default[
|
|
350
|
+
return React__default["default"].createElement(StyledRow, _extends({
|
|
350
351
|
gutters: gutters,
|
|
351
352
|
debug: debug,
|
|
352
353
|
wrapAll: wrap,
|
|
@@ -355,26 +356,33 @@ var Row = React__default['default'].forwardRef(function (_ref, ref) {
|
|
|
355
356
|
});
|
|
356
357
|
Row.displayName = 'Row';
|
|
357
358
|
Row.propTypes = {
|
|
358
|
-
alignItems: PropTypes__default[
|
|
359
|
-
alignItemsXs: PropTypes__default[
|
|
360
|
-
alignItemsSm: PropTypes__default[
|
|
361
|
-
alignItemsMd: PropTypes__default[
|
|
362
|
-
alignItemsLg: PropTypes__default[
|
|
363
|
-
alignItemsXl: PropTypes__default[
|
|
364
|
-
justifyContent: PropTypes__default[
|
|
365
|
-
justifyContentXs: PropTypes__default[
|
|
366
|
-
justifyContentSm: PropTypes__default[
|
|
367
|
-
justifyContentMd: PropTypes__default[
|
|
368
|
-
justifyContentLg: PropTypes__default[
|
|
369
|
-
justifyContentXl: PropTypes__default[
|
|
370
|
-
wrap: PropTypes__default[
|
|
371
|
-
wrapXs: PropTypes__default[
|
|
372
|
-
wrapSm: PropTypes__default[
|
|
373
|
-
wrapMd: PropTypes__default[
|
|
374
|
-
wrapLg: PropTypes__default[
|
|
375
|
-
wrapXl: PropTypes__default[
|
|
359
|
+
alignItems: PropTypes__default["default"].oneOf(ARRAY_ALIGN_ITEMS),
|
|
360
|
+
alignItemsXs: PropTypes__default["default"].oneOf(ARRAY_ALIGN_ITEMS),
|
|
361
|
+
alignItemsSm: PropTypes__default["default"].oneOf(ARRAY_ALIGN_ITEMS),
|
|
362
|
+
alignItemsMd: PropTypes__default["default"].oneOf(ARRAY_ALIGN_ITEMS),
|
|
363
|
+
alignItemsLg: PropTypes__default["default"].oneOf(ARRAY_ALIGN_ITEMS),
|
|
364
|
+
alignItemsXl: PropTypes__default["default"].oneOf(ARRAY_ALIGN_ITEMS),
|
|
365
|
+
justifyContent: PropTypes__default["default"].oneOf(ARRAY_JUSTIFY_CONTENT),
|
|
366
|
+
justifyContentXs: PropTypes__default["default"].oneOf(ARRAY_JUSTIFY_CONTENT),
|
|
367
|
+
justifyContentSm: PropTypes__default["default"].oneOf(ARRAY_JUSTIFY_CONTENT),
|
|
368
|
+
justifyContentMd: PropTypes__default["default"].oneOf(ARRAY_JUSTIFY_CONTENT),
|
|
369
|
+
justifyContentLg: PropTypes__default["default"].oneOf(ARRAY_JUSTIFY_CONTENT),
|
|
370
|
+
justifyContentXl: PropTypes__default["default"].oneOf(ARRAY_JUSTIFY_CONTENT),
|
|
371
|
+
wrap: PropTypes__default["default"].oneOf(ARRAY_WRAP),
|
|
372
|
+
wrapXs: PropTypes__default["default"].oneOf(ARRAY_WRAP),
|
|
373
|
+
wrapSm: PropTypes__default["default"].oneOf(ARRAY_WRAP),
|
|
374
|
+
wrapMd: PropTypes__default["default"].oneOf(ARRAY_WRAP),
|
|
375
|
+
wrapLg: PropTypes__default["default"].oneOf(ARRAY_WRAP),
|
|
376
|
+
wrapXl: PropTypes__default["default"].oneOf(ARRAY_WRAP)
|
|
376
377
|
};
|
|
377
378
|
|
|
379
|
+
exports.ARRAY_ALIGN_ITEMS = ARRAY_ALIGN_ITEMS;
|
|
380
|
+
exports.ARRAY_ALIGN_SELF = ARRAY_ALIGN_SELF;
|
|
381
|
+
exports.ARRAY_DIRECTION = ARRAY_DIRECTION;
|
|
382
|
+
exports.ARRAY_JUSTIFY_CONTENT = ARRAY_JUSTIFY_CONTENT;
|
|
383
|
+
exports.ARRAY_SPACE = ARRAY_SPACE;
|
|
384
|
+
exports.ARRAY_TEXT_ALIGN = ARRAY_TEXT_ALIGN;
|
|
385
|
+
exports.ARRAY_WRAP = ARRAY_WRAP;
|
|
378
386
|
exports.Col = Col;
|
|
379
387
|
exports.Grid = Grid;
|
|
380
388
|
exports.Row = Row;
|
package/dist/index.esm.js
CHANGED
|
@@ -67,6 +67,7 @@ function _objectWithoutProperties(source, excluded) {
|
|
|
67
67
|
|
|
68
68
|
var ARRAY_ALIGN_ITEMS = ['start', 'end', 'center', 'baseline', 'stretch'];
|
|
69
69
|
var ARRAY_ALIGN_SELF = ['auto', 'start', 'end', 'center', 'baseline', 'stretch'];
|
|
70
|
+
var ARRAY_DIRECTION = ['row', 'row-reverse', 'column', 'column-reverse'];
|
|
70
71
|
var ARRAY_JUSTIFY_CONTENT = ['start', 'end', 'center', 'between', 'around'];
|
|
71
72
|
var ARRAY_TEXT_ALIGN = ['start', 'end', 'center', 'justify'];
|
|
72
73
|
var ARRAY_SPACE = [false, 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
|
|
@@ -124,7 +125,7 @@ var sizeStyles$2 = function sizeStyles(props) {
|
|
|
124
125
|
};
|
|
125
126
|
var StyledCol = styled.div.attrs({
|
|
126
127
|
'data-garden-id': COMPONENT_ID$2,
|
|
127
|
-
'data-garden-version': '8.
|
|
128
|
+
'data-garden-version': '8.48.1'
|
|
128
129
|
}).withConfig({
|
|
129
130
|
displayName: "StyledCol",
|
|
130
131
|
componentId: "sc-inuw62-0"
|
|
@@ -164,7 +165,7 @@ var sizeStyles$1 = function sizeStyles(props) {
|
|
|
164
165
|
};
|
|
165
166
|
var StyledGrid = styled.div.attrs({
|
|
166
167
|
'data-garden-id': COMPONENT_ID$1,
|
|
167
|
-
'data-garden-version': '8.
|
|
168
|
+
'data-garden-version': '8.48.1'
|
|
168
169
|
}).withConfig({
|
|
169
170
|
displayName: "StyledGrid",
|
|
170
171
|
componentId: "sc-oxgg5i-0"
|
|
@@ -214,7 +215,7 @@ var sizeStyles = function sizeStyles(props) {
|
|
|
214
215
|
};
|
|
215
216
|
var StyledRow = styled.div.attrs({
|
|
216
217
|
'data-garden-id': COMPONENT_ID,
|
|
217
|
-
'data-garden-version': '8.
|
|
218
|
+
'data-garden-version': '8.48.1'
|
|
218
219
|
}).withConfig({
|
|
219
220
|
displayName: "StyledRow",
|
|
220
221
|
componentId: "sc-xjsdg1-0"
|
|
@@ -365,4 +366,4 @@ Row.propTypes = {
|
|
|
365
366
|
wrapXl: PropTypes.oneOf(ARRAY_WRAP)
|
|
366
367
|
};
|
|
367
368
|
|
|
368
|
-
export { Col, Grid, Row };
|
|
369
|
+
export { ARRAY_ALIGN_ITEMS, ARRAY_ALIGN_SELF, ARRAY_DIRECTION, ARRAY_JUSTIFY_CONTENT, ARRAY_SPACE, ARRAY_TEXT_ALIGN, ARRAY_WRAP, Col, Grid, Row };
|
package/dist/typings/index.d.ts
CHANGED
|
@@ -7,3 +7,8 @@
|
|
|
7
7
|
export { Col } from './elements/Col';
|
|
8
8
|
export { Grid } from './elements/Grid';
|
|
9
9
|
export { Row } from './elements/Row';
|
|
10
|
+
export type { IColProps } from './elements/Col';
|
|
11
|
+
export type { IGridProps } from './elements/Grid';
|
|
12
|
+
export type { IRowProps } from './elements/Row';
|
|
13
|
+
export { ARRAY_ALIGN_ITEMS, ARRAY_ALIGN_SELF, ARRAY_DIRECTION, ARRAY_JUSTIFY_CONTENT, ARRAY_TEXT_ALIGN, ARRAY_SPACE, ARRAY_WRAP } from './utils/types';
|
|
14
|
+
export type { ALIGN_ITEMS, ALIGN_SELF, DIRECTION, JUSTIFY_CONTENT, TEXT_ALIGN, GRID_NUMBER, BREAKPOINT, SPACE, WRAP } from './utils/types';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-grid",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.48.1",
|
|
4
4
|
"description": "Components relating to layout grids in the Garden Design System",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Zendesk Garden <garden@zendesk.com>",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"styled-components": "^4.2.0 || ^5.0.0"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@zendeskgarden/react-theming": "^8.
|
|
34
|
+
"@zendeskgarden/react-theming": "^8.48.1"
|
|
35
35
|
},
|
|
36
36
|
"keywords": [
|
|
37
37
|
"components",
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"access": "public"
|
|
44
44
|
},
|
|
45
45
|
"zendeskgarden:src": "src/index.ts",
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "82c621bfbc943904baa6647a2f5e89d3271d7edf"
|
|
47
47
|
}
|