@zendeskgarden/react-grid 8.75.1 → 8.76.0
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/esm/elements/Col.js +72 -0
- package/dist/esm/elements/Grid.js +49 -0
- package/dist/esm/elements/Row.js +58 -0
- package/dist/esm/elements/pane/Pane.js +55 -0
- package/dist/esm/elements/pane/PaneProvider.js +197 -0
- package/dist/esm/elements/pane/components/Content.js +30 -0
- package/dist/esm/elements/pane/components/Splitter.js +128 -0
- package/dist/esm/elements/pane/components/SplitterButton.js +91 -0
- package/dist/esm/index.js +12 -0
- package/dist/esm/styled/StyledCol.js +73 -0
- package/dist/esm/styled/StyledGrid.js +33 -0
- package/dist/esm/styled/StyledRow.js +53 -0
- package/dist/esm/styled/pane/StyledPane.js +22 -0
- package/dist/esm/styled/pane/StyledPaneContent.js +22 -0
- package/dist/esm/styled/pane/StyledPaneSplitter.js +97 -0
- package/dist/esm/styled/pane/StyledPaneSplitterButton.js +48 -0
- package/dist/esm/styled/pane/StyledPaneSplitterButtonContainer.js +116 -0
- package/dist/esm/types/index.js +16 -0
- package/dist/esm/utils/useGridContext.js +16 -0
- package/dist/esm/utils/usePaneContext.js +16 -0
- package/dist/esm/utils/usePaneProviderContext.js +17 -0
- package/dist/esm/utils/usePaneSplitterContext.js +22 -0
- package/dist/index.cjs.js +19 -35
- package/package.json +7 -7
- package/dist/index.esm.js +0 -975
package/dist/index.cjs.js
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
8
7
|
'use strict';
|
|
9
8
|
|
|
10
9
|
var React = require('react');
|
|
@@ -27,21 +26,6 @@ var styled__default = /*#__PURE__*/_interopDefault(styled);
|
|
|
27
26
|
var useResizeObserver__default = /*#__PURE__*/_interopDefault(useResizeObserver);
|
|
28
27
|
var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
|
|
29
28
|
|
|
30
|
-
function _extends() {
|
|
31
|
-
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
32
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
33
|
-
var source = arguments[i];
|
|
34
|
-
for (var key in source) {
|
|
35
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
36
|
-
target[key] = source[key];
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
return target;
|
|
41
|
-
};
|
|
42
|
-
return _extends.apply(this, arguments);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
29
|
const ALIGN_ITEMS = ['start', 'end', 'center', 'baseline', 'stretch'];
|
|
46
30
|
const ALIGN_SELF = ['auto', ...ALIGN_ITEMS];
|
|
47
31
|
const DIRECTION = ['row', 'row-reverse', 'column', 'column-reverse'];
|
|
@@ -103,7 +87,7 @@ const sizeStyles$5 = props => {
|
|
|
103
87
|
};
|
|
104
88
|
const StyledCol = styled__default.default.div.attrs({
|
|
105
89
|
'data-garden-id': COMPONENT_ID$7,
|
|
106
|
-
'data-garden-version': '8.
|
|
90
|
+
'data-garden-version': '8.76.0'
|
|
107
91
|
}).withConfig({
|
|
108
92
|
displayName: "StyledCol",
|
|
109
93
|
componentId: "sc-inuw62-0"
|
|
@@ -125,7 +109,7 @@ const sizeStyles$4 = props => {
|
|
|
125
109
|
};
|
|
126
110
|
const StyledGrid = styled__default.default.div.attrs({
|
|
127
111
|
'data-garden-id': COMPONENT_ID$6,
|
|
128
|
-
'data-garden-version': '8.
|
|
112
|
+
'data-garden-version': '8.76.0'
|
|
129
113
|
}).withConfig({
|
|
130
114
|
displayName: "StyledGrid",
|
|
131
115
|
componentId: "sc-oxgg5i-0"
|
|
@@ -167,7 +151,7 @@ const sizeStyles$3 = props => {
|
|
|
167
151
|
};
|
|
168
152
|
const StyledRow = styled__default.default.div.attrs({
|
|
169
153
|
'data-garden-id': COMPONENT_ID$5,
|
|
170
|
-
'data-garden-version': '8.
|
|
154
|
+
'data-garden-version': '8.76.0'
|
|
171
155
|
}).withConfig({
|
|
172
156
|
displayName: "StyledRow",
|
|
173
157
|
componentId: "sc-xjsdg1-0"
|
|
@@ -180,7 +164,7 @@ StyledRow.defaultProps = {
|
|
|
180
164
|
const COMPONENT_ID$4 = 'pane';
|
|
181
165
|
const StyledPane = styled__default.default.div.attrs({
|
|
182
166
|
'data-garden-id': COMPONENT_ID$4,
|
|
183
|
-
'data-garden-version': '8.
|
|
167
|
+
'data-garden-version': '8.76.0'
|
|
184
168
|
}).withConfig({
|
|
185
169
|
displayName: "StyledPane",
|
|
186
170
|
componentId: "sc-1ltjst7-0"
|
|
@@ -192,7 +176,7 @@ StyledPane.defaultProps = {
|
|
|
192
176
|
const COMPONENT_ID$3 = 'pane.content';
|
|
193
177
|
const StyledPaneContent = styled__default.default.div.attrs({
|
|
194
178
|
'data-garden-id': COMPONENT_ID$3,
|
|
195
|
-
'data-garden-version': '8.
|
|
179
|
+
'data-garden-version': '8.76.0'
|
|
196
180
|
}).withConfig({
|
|
197
181
|
displayName: "StyledPaneContent",
|
|
198
182
|
componentId: "sc-1b38mbh-0"
|
|
@@ -278,7 +262,7 @@ const sizeStyles$2 = props => {
|
|
|
278
262
|
};
|
|
279
263
|
const StyledPaneSplitter = styled__default.default.div.attrs({
|
|
280
264
|
'data-garden-id': COMPONENT_ID$2,
|
|
281
|
-
'data-garden-version': '8.
|
|
265
|
+
'data-garden-version': '8.76.0'
|
|
282
266
|
}).withConfig({
|
|
283
267
|
displayName: "StyledPaneSplitter",
|
|
284
268
|
componentId: "sc-jylemn-0"
|
|
@@ -312,7 +296,7 @@ const transformStyles = props => {
|
|
|
312
296
|
};
|
|
313
297
|
const StyledPaneSplitterButton = styled__default.default(reactButtons.ChevronButton).attrs({
|
|
314
298
|
'data-garden-id': COMPONENT_ID$1,
|
|
315
|
-
'data-garden-version': '8.
|
|
299
|
+
'data-garden-version': '8.76.0',
|
|
316
300
|
isBasic: true,
|
|
317
301
|
isPill: true,
|
|
318
302
|
size: 'small'
|
|
@@ -444,7 +428,7 @@ const Col = React__default.default.forwardRef((_ref, ref) => {
|
|
|
444
428
|
gutters,
|
|
445
429
|
debug
|
|
446
430
|
} = useGridContext();
|
|
447
|
-
return React__default.default.createElement(StyledCol,
|
|
431
|
+
return React__default.default.createElement(StyledCol, Object.assign({
|
|
448
432
|
sizeAll: size,
|
|
449
433
|
columns: columns,
|
|
450
434
|
gutters: gutters,
|
|
@@ -499,7 +483,7 @@ const Grid = React__default.default.forwardRef((_ref, ref) => {
|
|
|
499
483
|
}), [columns, props.gutters, debug]);
|
|
500
484
|
return React__default.default.createElement(GridContext.Provider, {
|
|
501
485
|
value: value
|
|
502
|
-
}, React__default.default.createElement(StyledGrid,
|
|
486
|
+
}, React__default.default.createElement(StyledGrid, Object.assign({
|
|
503
487
|
debug: debug,
|
|
504
488
|
ref: ref
|
|
505
489
|
}, props)));
|
|
@@ -524,7 +508,7 @@ const Row = React__default.default.forwardRef((_ref, ref) => {
|
|
|
524
508
|
gutters,
|
|
525
509
|
debug
|
|
526
510
|
} = useGridContext();
|
|
527
|
-
return React__default.default.createElement(StyledRow,
|
|
511
|
+
return React__default.default.createElement(StyledRow, Object.assign({
|
|
528
512
|
gutters: gutters,
|
|
529
513
|
debug: debug,
|
|
530
514
|
wrapAll: wrap,
|
|
@@ -848,7 +832,7 @@ const SplitterComponent = React.forwardRef((_ref, ref) => {
|
|
|
848
832
|
size,
|
|
849
833
|
isRow
|
|
850
834
|
}), [orientation, layoutKey, min, max, valueInFr, size, isRow])
|
|
851
|
-
}, React__default.default.createElement(StyledPaneSplitter,
|
|
835
|
+
}, React__default.default.createElement(StyledPaneSplitter, Object.assign({
|
|
852
836
|
isFixed: isFixed,
|
|
853
837
|
orientation: orientation
|
|
854
838
|
}, separatorProps, props, {
|
|
@@ -872,7 +856,7 @@ const ContentComponent = React.forwardRef((props, ref) => {
|
|
|
872
856
|
const {
|
|
873
857
|
isVisible
|
|
874
858
|
} = usePaneContext();
|
|
875
|
-
return React__default.default.createElement(StyledPaneContent,
|
|
859
|
+
return React__default.default.createElement(StyledPaneContent, Object.assign({
|
|
876
860
|
hidden: !isVisible,
|
|
877
861
|
ref: ref
|
|
878
862
|
}, props));
|
|
@@ -936,7 +920,7 @@ const SplitterButtonComponent = React.forwardRef((props, ref) => {
|
|
|
936
920
|
cursor: 'default'
|
|
937
921
|
},
|
|
938
922
|
onMouseDown: e => e.stopPropagation()
|
|
939
|
-
}, React__default.default.createElement(StyledPaneSplitterButton,
|
|
923
|
+
}, React__default.default.createElement(StyledPaneSplitterButton, Object.assign({
|
|
940
924
|
"aria-label": label
|
|
941
925
|
}, props, {
|
|
942
926
|
orientation: orientation,
|
|
@@ -971,7 +955,7 @@ const PaneComponent = React.forwardRef((_ref, ref) => {
|
|
|
971
955
|
}), [paneId, isVisible]);
|
|
972
956
|
return React__default.default.createElement(PaneContext.Provider, {
|
|
973
957
|
value: paneContext
|
|
974
|
-
}, React__default.default.createElement(StyledPane,
|
|
958
|
+
}, React__default.default.createElement(StyledPane, Object.assign({
|
|
975
959
|
id: paneId,
|
|
976
960
|
ref: mergeRefs__default.default([ref, observerRef])
|
|
977
961
|
}, props), children));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-grid",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.76.0",
|
|
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>",
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"url": "https://github.com/zendeskgarden/react-components/issues"
|
|
11
11
|
},
|
|
12
12
|
"main": "dist/index.cjs.js",
|
|
13
|
-
"module": "dist/index.
|
|
13
|
+
"module": "dist/esm/index.js",
|
|
14
14
|
"files": [
|
|
15
15
|
"dist"
|
|
16
16
|
],
|
|
@@ -23,21 +23,21 @@
|
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@zendeskgarden/container-splitter": "^2.0.3",
|
|
25
25
|
"@zendeskgarden/container-utilities": "^2.0.0",
|
|
26
|
-
"@zendeskgarden/react-buttons": "^8.
|
|
27
|
-
"@zendeskgarden/react-tooltips": "^8.
|
|
26
|
+
"@zendeskgarden/react-buttons": "^8.76.0",
|
|
27
|
+
"@zendeskgarden/react-tooltips": "^8.76.0",
|
|
28
28
|
"polished": "^4.0.0",
|
|
29
29
|
"prop-types": "^15.5.7",
|
|
30
30
|
"react-merge-refs": "^1.1.0",
|
|
31
31
|
"use-resize-observer": "^9.1.0"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
|
-
"@zendeskgarden/react-theming": "^8.
|
|
34
|
+
"@zendeskgarden/react-theming": "^8.75.0",
|
|
35
35
|
"react": ">=16.8.0",
|
|
36
36
|
"react-dom": ">=16.8.0",
|
|
37
37
|
"styled-components": "^4.2.0 || ^5.0.0"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
|
-
"@zendeskgarden/react-theming": "^8.
|
|
40
|
+
"@zendeskgarden/react-theming": "^8.76.0"
|
|
41
41
|
},
|
|
42
42
|
"keywords": [
|
|
43
43
|
"components",
|
|
@@ -49,5 +49,5 @@
|
|
|
49
49
|
"access": "public"
|
|
50
50
|
},
|
|
51
51
|
"zendeskgarden:src": "src/index.ts",
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "3e52650c39fd1085a2e97b40a43eed7bc1e21937"
|
|
53
53
|
}
|