@zendeskgarden/react-tables 9.0.0-next.7 → 9.0.0-next.9
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/Body.js +26 -0
- package/dist/esm/elements/Caption.js +26 -0
- package/dist/esm/elements/Cell.js +44 -0
- package/dist/esm/elements/GroupRow.js +33 -0
- package/dist/esm/elements/Head.js +26 -0
- package/dist/esm/elements/HeaderCell.js +39 -0
- package/dist/esm/elements/HeaderRow.js +33 -0
- package/dist/esm/elements/OverflowButton.js +55 -0
- package/dist/esm/elements/Row.js +68 -0
- package/dist/esm/elements/SortableCell.js +55 -0
- package/dist/esm/elements/Table.js +65 -0
- package/dist/esm/index.js +17 -0
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/sort-fill.svg.js +27 -0
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/sort-stroke.svg.js +27 -0
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/overflow-stroke.svg.js +36 -0
- package/dist/esm/styled/StyledBody.js +22 -0
- package/dist/esm/styled/StyledCaption.js +22 -0
- package/dist/esm/styled/StyledCell.js +47 -0
- package/dist/esm/styled/StyledGroupRow.js +31 -0
- package/dist/esm/styled/StyledHead.js +27 -0
- package/dist/esm/styled/StyledHeaderCell.js +44 -0
- package/dist/esm/styled/StyledHeaderRow.js +33 -0
- package/dist/esm/styled/StyledHiddenCell.js +23 -0
- package/dist/esm/styled/StyledOverflowButton.js +51 -0
- package/dist/esm/styled/StyledRow.js +62 -0
- package/dist/esm/styled/StyledSortableButton.js +81 -0
- package/dist/esm/styled/StyledTable.js +25 -0
- package/dist/esm/styled/style-utils.js +16 -0
- package/dist/esm/types/index.js +10 -0
- package/dist/esm/utils/useTableContext.js +17 -0
- package/dist/index.cjs.js +29 -45
- package/package.json +5 -5
- package/dist/index.esm.js +0 -648
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');
|
|
@@ -38,25 +37,10 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
|
38
37
|
var styled__default = /*#__PURE__*/_interopDefault(styled);
|
|
39
38
|
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
40
39
|
|
|
41
|
-
function _extends$3() {
|
|
42
|
-
_extends$3 = Object.assign ? Object.assign.bind() : function (target) {
|
|
43
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
44
|
-
var source = arguments[i];
|
|
45
|
-
for (var key in source) {
|
|
46
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
47
|
-
target[key] = source[key];
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
return target;
|
|
52
|
-
};
|
|
53
|
-
return _extends$3.apply(this, arguments);
|
|
54
|
-
}
|
|
55
|
-
|
|
56
40
|
const COMPONENT_ID$b = 'tables.body';
|
|
57
41
|
const StyledBody = styled__default.default.tbody.attrs({
|
|
58
42
|
'data-garden-id': COMPONENT_ID$b,
|
|
59
|
-
'data-garden-version': '9.0.0-next.
|
|
43
|
+
'data-garden-version': '9.0.0-next.9'
|
|
60
44
|
}).withConfig({
|
|
61
45
|
displayName: "StyledBody",
|
|
62
46
|
componentId: "sc-14ud6y-0"
|
|
@@ -68,7 +52,7 @@ StyledBody.defaultProps = {
|
|
|
68
52
|
const COMPONENT_ID$a = 'tables.caption';
|
|
69
53
|
const StyledCaption = styled__default.default.caption.attrs({
|
|
70
54
|
'data-garden-id': COMPONENT_ID$a,
|
|
71
|
-
'data-garden-version': '9.0.0-next.
|
|
55
|
+
'data-garden-version': '9.0.0-next.9'
|
|
72
56
|
}).withConfig({
|
|
73
57
|
displayName: "StyledCaption",
|
|
74
58
|
componentId: "sc-113y327-0"
|
|
@@ -83,7 +67,7 @@ const getLineHeight = props => {
|
|
|
83
67
|
};
|
|
84
68
|
const StyledTable = styled__default.default.table.attrs({
|
|
85
69
|
'data-garden-id': COMPONENT_ID$9,
|
|
86
|
-
'data-garden-version': '9.0.0-next.
|
|
70
|
+
'data-garden-version': '9.0.0-next.9'
|
|
87
71
|
}).withConfig({
|
|
88
72
|
displayName: "StyledTable",
|
|
89
73
|
componentId: "sc-gje7na-0"
|
|
@@ -126,7 +110,7 @@ const sizeStyling = props => {
|
|
|
126
110
|
};
|
|
127
111
|
const StyledCell = styled__default.default.td.attrs({
|
|
128
112
|
'data-garden-id': COMPONENT_ID$8,
|
|
129
|
-
'data-garden-version': '9.0.0-next.
|
|
113
|
+
'data-garden-version': '9.0.0-next.9'
|
|
130
114
|
}).withConfig({
|
|
131
115
|
displayName: "StyledCell",
|
|
132
116
|
componentId: "sc-8hpncx-0"
|
|
@@ -157,7 +141,7 @@ const colorStyles$1 = props => {
|
|
|
157
141
|
};
|
|
158
142
|
const StyledOverflowButton = styled__default.default.button.attrs({
|
|
159
143
|
'data-garden-id': COMPONENT_ID$7,
|
|
160
|
-
'data-garden-version': '9.0.0-next.
|
|
144
|
+
'data-garden-version': '9.0.0-next.9',
|
|
161
145
|
type: 'button'
|
|
162
146
|
}).withConfig({
|
|
163
147
|
displayName: "StyledOverflowButton",
|
|
@@ -213,7 +197,7 @@ const colorStyles = props => {
|
|
|
213
197
|
};
|
|
214
198
|
const StyledRow = styled__default.default(StyledBaseRow).attrs(props => ({
|
|
215
199
|
'data-garden-id': COMPONENT_ID$6,
|
|
216
|
-
'data-garden-version': '9.0.0-next.
|
|
200
|
+
'data-garden-version': '9.0.0-next.9',
|
|
217
201
|
tabIndex: props.isReadOnly ? undefined : -1
|
|
218
202
|
})).withConfig({
|
|
219
203
|
displayName: "StyledRow",
|
|
@@ -234,7 +218,7 @@ const getHeaderRowHeight = props => {
|
|
|
234
218
|
};
|
|
235
219
|
const StyledHeaderRow = styled__default.default(StyledBaseRow).attrs({
|
|
236
220
|
'data-garden-id': COMPONENT_ID$5,
|
|
237
|
-
'data-garden-version': '9.0.0-next.
|
|
221
|
+
'data-garden-version': '9.0.0-next.9'
|
|
238
222
|
}).withConfig({
|
|
239
223
|
displayName: "StyledHeaderRow",
|
|
240
224
|
componentId: "sc-16ogvdx-0"
|
|
@@ -250,7 +234,7 @@ const stickyStyles = props => {
|
|
|
250
234
|
};
|
|
251
235
|
const StyledHead = styled__default.default.thead.attrs({
|
|
252
236
|
'data-garden-id': COMPONENT_ID$4,
|
|
253
|
-
'data-garden-version': '9.0.0-next.
|
|
237
|
+
'data-garden-version': '9.0.0-next.9'
|
|
254
238
|
}).withConfig({
|
|
255
239
|
displayName: "StyledHead",
|
|
256
240
|
componentId: "sc-spf23a-0"
|
|
@@ -267,7 +251,7 @@ const sizeStyles$1 = props => {
|
|
|
267
251
|
};
|
|
268
252
|
const StyledGroupRow = styled__default.default(StyledBaseRow).attrs({
|
|
269
253
|
'data-garden-id': COMPONENT_ID$3,
|
|
270
|
-
'data-garden-version': '9.0.0-next.
|
|
254
|
+
'data-garden-version': '9.0.0-next.9'
|
|
271
255
|
}).withConfig({
|
|
272
256
|
displayName: "StyledGroupRow",
|
|
273
257
|
componentId: "sc-mpd0r8-0"
|
|
@@ -300,7 +284,7 @@ StyledSortableFillIconWrapper.defaultProps = {
|
|
|
300
284
|
};
|
|
301
285
|
const StyledSortableButton = styled__default.default.button.attrs({
|
|
302
286
|
'data-garden-id': COMPONENT_ID$2,
|
|
303
|
-
'data-garden-version': '9.0.0-next.
|
|
287
|
+
'data-garden-version': '9.0.0-next.9',
|
|
304
288
|
type: 'button'
|
|
305
289
|
}).withConfig({
|
|
306
290
|
displayName: "StyledSortableButton",
|
|
@@ -358,7 +342,7 @@ const sizeStyles = props => {
|
|
|
358
342
|
const StyledHeaderCell = styled__default.default(StyledCell).attrs({
|
|
359
343
|
as: 'th',
|
|
360
344
|
'data-garden-id': COMPONENT_ID$1,
|
|
361
|
-
'data-garden-version': '9.0.0-next.
|
|
345
|
+
'data-garden-version': '9.0.0-next.9'
|
|
362
346
|
}).withConfig({
|
|
363
347
|
displayName: "StyledHeaderCell",
|
|
364
348
|
componentId: "sc-fzagoe-0"
|
|
@@ -378,7 +362,7 @@ StyledHeaderCell.defaultProps = {
|
|
|
378
362
|
const COMPONENT_ID = 'tables.hidden_cell';
|
|
379
363
|
const StyledHiddenCell = styled__default.default.div.attrs({
|
|
380
364
|
'data-garden-id': COMPONENT_ID,
|
|
381
|
-
'data-garden-version': '9.0.0-next.
|
|
365
|
+
'data-garden-version': '9.0.0-next.9'
|
|
382
366
|
}).withConfig({
|
|
383
367
|
displayName: "StyledHiddenCell",
|
|
384
368
|
componentId: "sc-1x454xw-0"
|
|
@@ -387,12 +371,12 @@ StyledHiddenCell.defaultProps = {
|
|
|
387
371
|
theme: reactTheming.DEFAULT_THEME
|
|
388
372
|
};
|
|
389
373
|
|
|
390
|
-
const Body = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledBody,
|
|
374
|
+
const Body = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledBody, Object.assign({
|
|
391
375
|
ref: ref
|
|
392
376
|
}, props)));
|
|
393
377
|
Body.displayName = 'Body';
|
|
394
378
|
|
|
395
|
-
const Caption = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledCaption,
|
|
379
|
+
const Caption = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledCaption, Object.assign({
|
|
396
380
|
ref: ref
|
|
397
381
|
}, props)));
|
|
398
382
|
Caption.displayName = 'Caption';
|
|
@@ -413,7 +397,7 @@ const Cell = React__namespace.default.forwardRef((_ref, ref) => {
|
|
|
413
397
|
const {
|
|
414
398
|
size
|
|
415
399
|
} = useTableContext();
|
|
416
|
-
return React__namespace.default.createElement(StyledCell,
|
|
400
|
+
return React__namespace.default.createElement(StyledCell, Object.assign({
|
|
417
401
|
ref: ref,
|
|
418
402
|
size: size
|
|
419
403
|
}, props), hidden && props.children ? React__namespace.default.createElement(StyledHiddenCell, null, props.children) : props.children);
|
|
@@ -430,14 +414,14 @@ const GroupRow = React.forwardRef((props, ref) => {
|
|
|
430
414
|
const {
|
|
431
415
|
size
|
|
432
416
|
} = useTableContext();
|
|
433
|
-
return React__namespace.default.createElement(StyledGroupRow,
|
|
417
|
+
return React__namespace.default.createElement(StyledGroupRow, Object.assign({
|
|
434
418
|
ref: ref,
|
|
435
419
|
size: size
|
|
436
420
|
}, props));
|
|
437
421
|
});
|
|
438
422
|
GroupRow.displayName = 'GroupRow';
|
|
439
423
|
|
|
440
|
-
const Head = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledHead,
|
|
424
|
+
const Head = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledHead, Object.assign({
|
|
441
425
|
ref: ref
|
|
442
426
|
}, props)));
|
|
443
427
|
Head.displayName = 'Head';
|
|
@@ -450,7 +434,7 @@ const HeaderCell = React.forwardRef((_ref, ref) => {
|
|
|
450
434
|
const {
|
|
451
435
|
size
|
|
452
436
|
} = useTableContext();
|
|
453
|
-
return React__namespace.default.createElement(StyledHeaderCell,
|
|
437
|
+
return React__namespace.default.createElement(StyledHeaderCell, Object.assign({
|
|
454
438
|
ref: ref,
|
|
455
439
|
size: size
|
|
456
440
|
}, props), hidden && props.children ? React__namespace.default.createElement(StyledHiddenCell, null, props.children) : props.children);
|
|
@@ -462,7 +446,7 @@ const HeaderRow = React__namespace.default.forwardRef((props, ref) => {
|
|
|
462
446
|
const {
|
|
463
447
|
size
|
|
464
448
|
} = useTableContext();
|
|
465
|
-
return React__namespace.default.createElement(StyledHeaderRow,
|
|
449
|
+
return React__namespace.default.createElement(StyledHeaderRow, Object.assign({
|
|
466
450
|
ref: ref,
|
|
467
451
|
size: size
|
|
468
452
|
}, props));
|
|
@@ -507,7 +491,7 @@ const OverflowButton = React.forwardRef((_ref, ref) => {
|
|
|
507
491
|
const {
|
|
508
492
|
size
|
|
509
493
|
} = useTableContext();
|
|
510
|
-
return React__namespace.default.createElement(StyledOverflowButton,
|
|
494
|
+
return React__namespace.default.createElement(StyledOverflowButton, Object.assign({
|
|
511
495
|
onFocus: containerUtilities.composeEventHandlers(onFocus, () => {
|
|
512
496
|
setIsFocused(true);
|
|
513
497
|
}),
|
|
@@ -553,7 +537,7 @@ const Row = React.forwardRef((_ref, ref) => {
|
|
|
553
537
|
const onBlurCallback = React.useMemo(() => containerUtilities.composeEventHandlers(onBlur, () => {
|
|
554
538
|
setIsFocused(false);
|
|
555
539
|
}), [onBlur, setIsFocused]);
|
|
556
|
-
return React__namespace.default.createElement(StyledRow,
|
|
540
|
+
return React__namespace.default.createElement(StyledRow, Object.assign({
|
|
557
541
|
onFocus: onFocusCallback,
|
|
558
542
|
onBlur: onBlurCallback,
|
|
559
543
|
size: size,
|
|
@@ -624,10 +608,10 @@ const SortableCell = React.forwardRef((_ref, ref) => {
|
|
|
624
608
|
ariaSortValue = 'descending';
|
|
625
609
|
}
|
|
626
610
|
const SortIcon = sort === undefined ? SvgSortStroke : SvgSortFill;
|
|
627
|
-
return React__namespace.default.createElement(StyledHeaderCell,
|
|
611
|
+
return React__namespace.default.createElement(StyledHeaderCell, Object.assign({
|
|
628
612
|
"aria-sort": ariaSortValue,
|
|
629
613
|
width: width
|
|
630
|
-
}, cellProps), React__namespace.default.createElement(StyledSortableButton,
|
|
614
|
+
}, cellProps), React__namespace.default.createElement(StyledSortableButton, Object.assign({
|
|
631
615
|
sort: sort,
|
|
632
616
|
ref: ref
|
|
633
617
|
}, otherProps), children, React__namespace.default.createElement(StyledSortableStrokeIconWrapper, null, React__namespace.default.createElement(SortIcon, null)), React__namespace.default.createElement(StyledSortableFillIconWrapper, null, React__namespace.default.createElement(SvgSortFill, null))));
|
|
@@ -646,7 +630,7 @@ const TableComponent = React__namespace.default.forwardRef((props, ref) => {
|
|
|
646
630
|
}), [props.size, props.isReadOnly]);
|
|
647
631
|
return React__namespace.default.createElement(TableContext.Provider, {
|
|
648
632
|
value: tableContextValue
|
|
649
|
-
}, React__namespace.default.createElement(StyledTable,
|
|
633
|
+
}, React__namespace.default.createElement(StyledTable, Object.assign({
|
|
650
634
|
ref: ref
|
|
651
635
|
}, props)));
|
|
652
636
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-tables",
|
|
3
|
-
"version": "9.0.0-next.
|
|
3
|
+
"version": "9.0.0-next.9",
|
|
4
4
|
"description": "Components relating to tables 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
|
],
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"prop-types": "^15.5.7"
|
|
28
28
|
},
|
|
29
29
|
"peerDependencies": {
|
|
30
|
-
"@zendeskgarden/react-theming": "
|
|
30
|
+
"@zendeskgarden/react-theming": ">=9.0.0-next",
|
|
31
31
|
"react": ">=16.8.0",
|
|
32
32
|
"react-dom": ">=16.8.0",
|
|
33
33
|
"styled-components": "^5.3.1"
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@types/react-beautiful-dnd": "13.1.8",
|
|
37
37
|
"@types/react-window": "1.8.8",
|
|
38
|
-
"@zendeskgarden/react-theming": "^9.0.0-next.
|
|
38
|
+
"@zendeskgarden/react-theming": "^9.0.0-next.9",
|
|
39
39
|
"@zendeskgarden/svg-icons": "7.0.0",
|
|
40
40
|
"react-beautiful-dnd": "13.1.1",
|
|
41
41
|
"react-window": "1.8.10"
|
|
@@ -50,5 +50,5 @@
|
|
|
50
50
|
"access": "public"
|
|
51
51
|
},
|
|
52
52
|
"zendeskgarden:src": "src/index.ts",
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "771281b562d376a6aee04b0cd71dd888b3ae4a1d"
|
|
54
54
|
}
|