@zendeskgarden/react-tables 8.62.1 → 8.62.2
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 +66 -69
- package/dist/index.esm.js +11 -11
- package/package.json +3 -3
package/dist/index.cjs.js
CHANGED
|
@@ -7,8 +7,6 @@
|
|
|
7
7
|
|
|
8
8
|
'use strict';
|
|
9
9
|
|
|
10
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
|
-
|
|
12
10
|
var React = require('react');
|
|
13
11
|
var styled = require('styled-components');
|
|
14
12
|
var reactTheming = require('@zendeskgarden/react-theming');
|
|
@@ -16,7 +14,7 @@ var polished = require('polished');
|
|
|
16
14
|
var PropTypes = require('prop-types');
|
|
17
15
|
var containerUtilities = require('@zendeskgarden/container-utilities');
|
|
18
16
|
|
|
19
|
-
function
|
|
17
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
20
18
|
|
|
21
19
|
function _interopNamespace(e) {
|
|
22
20
|
if (e && e.__esModule) return e;
|
|
@@ -32,14 +30,13 @@ function _interopNamespace(e) {
|
|
|
32
30
|
}
|
|
33
31
|
});
|
|
34
32
|
}
|
|
35
|
-
n
|
|
33
|
+
n.default = e;
|
|
36
34
|
return Object.freeze(n);
|
|
37
35
|
}
|
|
38
36
|
|
|
39
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
40
37
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
41
|
-
var styled__default = /*#__PURE__*/
|
|
42
|
-
var PropTypes__default = /*#__PURE__*/
|
|
38
|
+
var styled__default = /*#__PURE__*/_interopDefault(styled);
|
|
39
|
+
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
43
40
|
|
|
44
41
|
function _extends$3() {
|
|
45
42
|
_extends$3 = Object.assign ? Object.assign.bind() : function (target) {
|
|
@@ -57,9 +54,9 @@ function _extends$3() {
|
|
|
57
54
|
}
|
|
58
55
|
|
|
59
56
|
const COMPONENT_ID$a = 'tables.body';
|
|
60
|
-
const StyledBody = styled__default
|
|
57
|
+
const StyledBody = styled__default.default.tbody.attrs({
|
|
61
58
|
'data-garden-id': COMPONENT_ID$a,
|
|
62
|
-
'data-garden-version': '8.62.
|
|
59
|
+
'data-garden-version': '8.62.2'
|
|
63
60
|
}).withConfig({
|
|
64
61
|
displayName: "StyledBody",
|
|
65
62
|
componentId: "sc-14ud6y-0"
|
|
@@ -69,9 +66,9 @@ StyledBody.defaultProps = {
|
|
|
69
66
|
};
|
|
70
67
|
|
|
71
68
|
const COMPONENT_ID$9 = 'tables.caption';
|
|
72
|
-
const StyledCaption = styled__default
|
|
69
|
+
const StyledCaption = styled__default.default.caption.attrs({
|
|
73
70
|
'data-garden-id': COMPONENT_ID$9,
|
|
74
|
-
'data-garden-version': '8.62.
|
|
71
|
+
'data-garden-version': '8.62.2'
|
|
75
72
|
}).withConfig({
|
|
76
73
|
displayName: "StyledCaption",
|
|
77
74
|
componentId: "sc-113y327-0"
|
|
@@ -84,9 +81,9 @@ const COMPONENT_ID$8 = 'tables.table';
|
|
|
84
81
|
const getLineHeight = props => {
|
|
85
82
|
return `${props.theme.space.base * 5}px`;
|
|
86
83
|
};
|
|
87
|
-
const StyledTable = styled__default
|
|
84
|
+
const StyledTable = styled__default.default.table.attrs({
|
|
88
85
|
'data-garden-id': COMPONENT_ID$8,
|
|
89
|
-
'data-garden-version': '8.62.
|
|
86
|
+
'data-garden-version': '8.62.2'
|
|
90
87
|
}).withConfig({
|
|
91
88
|
displayName: "StyledTable",
|
|
92
89
|
componentId: "sc-gje7na-0"
|
|
@@ -127,9 +124,9 @@ const sizeStyling = props => {
|
|
|
127
124
|
}
|
|
128
125
|
return styled.css(["box-sizing:", ";padding:", ";width:", ";height:", ";"], boxSizing, padding, width, height);
|
|
129
126
|
};
|
|
130
|
-
const StyledCell = styled__default
|
|
127
|
+
const StyledCell = styled__default.default.td.attrs({
|
|
131
128
|
'data-garden-id': COMPONENT_ID$7,
|
|
132
|
-
'data-garden-version': '8.62.
|
|
129
|
+
'data-garden-version': '8.62.2'
|
|
133
130
|
}).withConfig({
|
|
134
131
|
displayName: "StyledCell",
|
|
135
132
|
componentId: "sc-8hpncx-0"
|
|
@@ -156,9 +153,9 @@ const colorStyles$1 = props => {
|
|
|
156
153
|
}
|
|
157
154
|
return styled.css(["color:", ";&:hover{background-color:", ";color:", ";}&:active{background-color:", ";color:", ";}&:focus{outline:none;}&[data-garden-focus-visible]{box-shadow:inset ", ";}"], foregroundColor, hoverBackgroundColor, hoverForegroundColor, activeBackgroundColor, activeForegroundColor, boxShadow);
|
|
158
155
|
};
|
|
159
|
-
const StyledOverflowButton = styled__default
|
|
156
|
+
const StyledOverflowButton = styled__default.default.button.attrs({
|
|
160
157
|
'data-garden-id': COMPONENT_ID$6,
|
|
161
|
-
'data-garden-version': '8.62.
|
|
158
|
+
'data-garden-version': '8.62.2',
|
|
162
159
|
type: 'button'
|
|
163
160
|
}).withConfig({
|
|
164
161
|
displayName: "StyledOverflowButton",
|
|
@@ -167,7 +164,7 @@ const StyledOverflowButton = styled__default["default"].button.attrs({
|
|
|
167
164
|
StyledOverflowButton.defaultProps = {
|
|
168
165
|
theme: reactTheming.DEFAULT_THEME
|
|
169
166
|
};
|
|
170
|
-
const StyledOverflowButtonIconWrapper = styled__default
|
|
167
|
+
const StyledOverflowButtonIconWrapper = styled__default.default.div.withConfig({
|
|
171
168
|
displayName: "StyledOverflowButton__StyledOverflowButtonIconWrapper",
|
|
172
169
|
componentId: "sc-1eba2ml-1"
|
|
173
170
|
})(["display:flex;align-items:center;justify-content:center;transform:rotate(90deg);transition:opacity 0.25s ease-in-out,background-color 0.1s ease-in-out;width:", ";height:", ";&:hover{opacity:1;}"], OVERFLOW_BUTTON_SIZE, OVERFLOW_BUTTON_SIZE);
|
|
@@ -176,7 +173,7 @@ StyledOverflowButtonIconWrapper.defaultProps = {
|
|
|
176
173
|
};
|
|
177
174
|
|
|
178
175
|
const COMPONENT_ID$5 = 'tables.row';
|
|
179
|
-
const StyledBaseRow = styled__default
|
|
176
|
+
const StyledBaseRow = styled__default.default.tr.withConfig({
|
|
180
177
|
displayName: "StyledRow__StyledBaseRow",
|
|
181
178
|
componentId: "sc-ek66ow-0"
|
|
182
179
|
})(["display:table-row;transition:background-color 0.1s ease-in-out;border-bottom:", ";background-color:", ";vertical-align:top;box-sizing:border-box;"], props => `${props.theme.borders.sm} ${reactTheming.getColor('neutralHue', 200, props.theme)}`, props => props.isStriped && reactTheming.getColor('neutralHue', 100, props.theme));
|
|
@@ -212,9 +209,9 @@ const colorStyles = props => {
|
|
|
212
209
|
}
|
|
213
210
|
return styled.css(["border-bottom-color:", ";background-color:", ";&:hover{border-bottom-color:", ";background-color:", ";", "{opacity:1;}}&:focus{outline:none;}", ":first-of-type{box-shadow:", ";&:focus{box-shadow:", ";}}"], borderColor, backgroundColor, hoverBorderBottomColor, hoverBackgroundColor, StyledOverflowButton, StyledCell, props.isFocused && boxShadow, boxShadow);
|
|
214
211
|
};
|
|
215
|
-
const StyledRow = styled__default
|
|
212
|
+
const StyledRow = styled__default.default(StyledBaseRow).attrs(props => ({
|
|
216
213
|
'data-garden-id': COMPONENT_ID$5,
|
|
217
|
-
'data-garden-version': '8.62.
|
|
214
|
+
'data-garden-version': '8.62.2',
|
|
218
215
|
tabIndex: props.isReadOnly ? undefined : -1
|
|
219
216
|
})).withConfig({
|
|
220
217
|
displayName: "StyledRow",
|
|
@@ -233,9 +230,9 @@ const getHeaderRowHeight = props => {
|
|
|
233
230
|
}
|
|
234
231
|
return `${props.theme.space.base * 12}px`;
|
|
235
232
|
};
|
|
236
|
-
const StyledHeaderRow = styled__default
|
|
233
|
+
const StyledHeaderRow = styled__default.default(StyledBaseRow).attrs({
|
|
237
234
|
'data-garden-id': COMPONENT_ID$4,
|
|
238
|
-
'data-garden-version': '8.62.
|
|
235
|
+
'data-garden-version': '8.62.2'
|
|
239
236
|
}).withConfig({
|
|
240
237
|
displayName: "StyledHeaderRow",
|
|
241
238
|
componentId: "sc-16ogvdx-0"
|
|
@@ -249,9 +246,9 @@ const stickyStyles = props => {
|
|
|
249
246
|
const borderColor = reactTheming.getColor('neutralHue', 300, props.theme);
|
|
250
247
|
return styled.css(["position:sticky;top:0;z-index:1;box-shadow:inset 0 -", " 0 ", ";background-color:", ";& > ", ":last-child{border-bottom-color:transparent;}"], props.theme.borderWidths.sm, borderColor, props.theme.colors.background, StyledHeaderRow);
|
|
251
248
|
};
|
|
252
|
-
const StyledHead = styled__default
|
|
249
|
+
const StyledHead = styled__default.default.thead.attrs({
|
|
253
250
|
'data-garden-id': COMPONENT_ID$3,
|
|
254
|
-
'data-garden-version': '8.62.
|
|
251
|
+
'data-garden-version': '8.62.2'
|
|
255
252
|
}).withConfig({
|
|
256
253
|
displayName: "StyledHead",
|
|
257
254
|
componentId: "sc-spf23a-0"
|
|
@@ -266,9 +263,9 @@ const sizeStyles$1 = props => {
|
|
|
266
263
|
const lineHeight = getLineHeight(props);
|
|
267
264
|
return styled.css(["height:", ";line-height:", ";font-size:", ";", "{padding:", " ", "px;}"], height, lineHeight, props.theme.fontSizes.sm, StyledCell, polished.math(`(${height} - ${lineHeight}) / 2`), props.theme.space.base * 3);
|
|
268
265
|
};
|
|
269
|
-
const StyledGroupRow = styled__default
|
|
266
|
+
const StyledGroupRow = styled__default.default(StyledBaseRow).attrs({
|
|
270
267
|
'data-garden-id': COMPONENT_ID$2,
|
|
271
|
-
'data-garden-version': '8.62.
|
|
268
|
+
'data-garden-version': '8.62.2'
|
|
272
269
|
}).withConfig({
|
|
273
270
|
displayName: "StyledGroupRow",
|
|
274
271
|
componentId: "sc-mpd0r8-0"
|
|
@@ -278,30 +275,30 @@ StyledGroupRow.defaultProps = {
|
|
|
278
275
|
};
|
|
279
276
|
|
|
280
277
|
const COMPONENT_ID$1 = 'tables.sortable';
|
|
281
|
-
const StyledBaseIconWrapper = styled__default
|
|
278
|
+
const StyledBaseIconWrapper = styled__default.default.div.withConfig({
|
|
282
279
|
displayName: "StyledSortableButton__StyledBaseIconWrapper",
|
|
283
280
|
componentId: "sc-2s1dli-0"
|
|
284
281
|
})(["display:flex;position:absolute;top:0;", ":0;align-items:center;justify-content:center;opacity:0;width:", ";height:100%;color:inherit;fill:inherit;"], props => props.theme.rtl ? 'left' : 'right', props => props.theme.iconSizes.sm);
|
|
285
282
|
StyledBaseIconWrapper.defaultProps = {
|
|
286
283
|
theme: reactTheming.DEFAULT_THEME
|
|
287
284
|
};
|
|
288
|
-
const StyledSortableStrokeIconWrapper = styled__default
|
|
285
|
+
const StyledSortableStrokeIconWrapper = styled__default.default(StyledBaseIconWrapper).withConfig({
|
|
289
286
|
displayName: "StyledSortableButton__StyledSortableStrokeIconWrapper",
|
|
290
287
|
componentId: "sc-2s1dli-1"
|
|
291
288
|
})([""]);
|
|
292
289
|
StyledSortableStrokeIconWrapper.defaultProps = {
|
|
293
290
|
theme: reactTheming.DEFAULT_THEME
|
|
294
291
|
};
|
|
295
|
-
const StyledSortableFillIconWrapper = styled__default
|
|
292
|
+
const StyledSortableFillIconWrapper = styled__default.default(StyledBaseIconWrapper).withConfig({
|
|
296
293
|
displayName: "StyledSortableButton__StyledSortableFillIconWrapper",
|
|
297
294
|
componentId: "sc-2s1dli-2"
|
|
298
295
|
})([""]);
|
|
299
296
|
StyledSortableFillIconWrapper.defaultProps = {
|
|
300
297
|
theme: reactTheming.DEFAULT_THEME
|
|
301
298
|
};
|
|
302
|
-
const StyledSortableButton = styled__default
|
|
299
|
+
const StyledSortableButton = styled__default.default.button.attrs({
|
|
303
300
|
'data-garden-id': COMPONENT_ID$1,
|
|
304
|
-
'data-garden-version': '8.62.
|
|
301
|
+
'data-garden-version': '8.62.2',
|
|
305
302
|
type: 'button'
|
|
306
303
|
}).withConfig({
|
|
307
304
|
displayName: "StyledSortableButton",
|
|
@@ -354,10 +351,10 @@ const sizeStyles = props => {
|
|
|
354
351
|
}
|
|
355
352
|
return styled.css(["padding-top:", ";padding-bottom:", ";"], paddingVertical, paddingVertical);
|
|
356
353
|
};
|
|
357
|
-
const StyledHeaderCell = styled__default
|
|
354
|
+
const StyledHeaderCell = styled__default.default(StyledCell).attrs({
|
|
358
355
|
as: 'th',
|
|
359
356
|
'data-garden-id': COMPONENT_ID,
|
|
360
|
-
'data-garden-version': '8.62.
|
|
357
|
+
'data-garden-version': '8.62.2'
|
|
361
358
|
}).withConfig({
|
|
362
359
|
displayName: "StyledHeaderCell",
|
|
363
360
|
componentId: "sc-fzagoe-0"
|
|
@@ -374,17 +371,17 @@ StyledHeaderCell.defaultProps = {
|
|
|
374
371
|
theme: reactTheming.DEFAULT_THEME
|
|
375
372
|
};
|
|
376
373
|
|
|
377
|
-
const Body = React.forwardRef((props, ref) =>
|
|
374
|
+
const Body = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledBody, _extends$3({
|
|
378
375
|
ref: ref
|
|
379
376
|
}, props)));
|
|
380
377
|
Body.displayName = 'Body';
|
|
381
378
|
|
|
382
|
-
const Caption = React.forwardRef((props, ref) =>
|
|
379
|
+
const Caption = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledCaption, _extends$3({
|
|
383
380
|
ref: ref
|
|
384
381
|
}, props)));
|
|
385
382
|
Caption.displayName = 'Caption';
|
|
386
383
|
|
|
387
|
-
const TableContext =
|
|
384
|
+
const TableContext = React__namespace.default.createContext({
|
|
388
385
|
size: 'medium',
|
|
389
386
|
isReadOnly: false
|
|
390
387
|
});
|
|
@@ -392,35 +389,35 @@ const useTableContext = () => {
|
|
|
392
389
|
return React.useContext(TableContext);
|
|
393
390
|
};
|
|
394
391
|
|
|
395
|
-
const Cell =
|
|
392
|
+
const Cell = React__namespace.default.forwardRef((props, ref) => {
|
|
396
393
|
const {
|
|
397
394
|
size
|
|
398
395
|
} = useTableContext();
|
|
399
|
-
return
|
|
396
|
+
return React__namespace.default.createElement(StyledCell, _extends$3({
|
|
400
397
|
ref: ref,
|
|
401
398
|
size: size
|
|
402
399
|
}, props));
|
|
403
400
|
});
|
|
404
401
|
Cell.displayName = 'Cell';
|
|
405
402
|
Cell.propTypes = {
|
|
406
|
-
isMinimum: PropTypes__default
|
|
407
|
-
isTruncated: PropTypes__default
|
|
408
|
-
hasOverflow: PropTypes__default
|
|
409
|
-
width: PropTypes__default
|
|
403
|
+
isMinimum: PropTypes__default.default.bool,
|
|
404
|
+
isTruncated: PropTypes__default.default.bool,
|
|
405
|
+
hasOverflow: PropTypes__default.default.bool,
|
|
406
|
+
width: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number])
|
|
410
407
|
};
|
|
411
408
|
|
|
412
409
|
const GroupRow = React.forwardRef((props, ref) => {
|
|
413
410
|
const {
|
|
414
411
|
size
|
|
415
412
|
} = useTableContext();
|
|
416
|
-
return
|
|
413
|
+
return React__namespace.default.createElement(StyledGroupRow, _extends$3({
|
|
417
414
|
ref: ref,
|
|
418
415
|
size: size
|
|
419
416
|
}, props));
|
|
420
417
|
});
|
|
421
418
|
GroupRow.displayName = 'GroupRow';
|
|
422
419
|
|
|
423
|
-
const Head = React.forwardRef((props, ref) =>
|
|
420
|
+
const Head = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledHead, _extends$3({
|
|
424
421
|
ref: ref
|
|
425
422
|
}, props)));
|
|
426
423
|
Head.displayName = 'Head';
|
|
@@ -429,7 +426,7 @@ const HeaderCell = React.forwardRef((props, ref) => {
|
|
|
429
426
|
const {
|
|
430
427
|
size
|
|
431
428
|
} = useTableContext();
|
|
432
|
-
return
|
|
429
|
+
return React__namespace.default.createElement(StyledHeaderCell, _extends$3({
|
|
433
430
|
ref: ref,
|
|
434
431
|
size: size
|
|
435
432
|
}, props));
|
|
@@ -437,11 +434,11 @@ const HeaderCell = React.forwardRef((props, ref) => {
|
|
|
437
434
|
HeaderCell.displayName = 'HeaderCell';
|
|
438
435
|
HeaderCell.propTypes = Cell.propTypes;
|
|
439
436
|
|
|
440
|
-
const HeaderRow =
|
|
437
|
+
const HeaderRow = React__namespace.default.forwardRef((props, ref) => {
|
|
441
438
|
const {
|
|
442
439
|
size
|
|
443
440
|
} = useTableContext();
|
|
444
|
-
return
|
|
441
|
+
return React__namespace.default.createElement(StyledHeaderRow, _extends$3({
|
|
445
442
|
ref: ref,
|
|
446
443
|
size: size
|
|
447
444
|
}, props));
|
|
@@ -489,7 +486,7 @@ const OverflowButton = React.forwardRef((_ref, ref) => {
|
|
|
489
486
|
const {
|
|
490
487
|
size
|
|
491
488
|
} = useTableContext();
|
|
492
|
-
return
|
|
489
|
+
return React__namespace.default.createElement(StyledOverflowButton, _extends$3({
|
|
493
490
|
onFocus: containerUtilities.composeEventHandlers(onFocus, () => {
|
|
494
491
|
setIsFocused(true);
|
|
495
492
|
}),
|
|
@@ -499,13 +496,13 @@ const OverflowButton = React.forwardRef((_ref, ref) => {
|
|
|
499
496
|
size: size,
|
|
500
497
|
isFocused: typeof focused === 'undefined' ? isFocused : focused,
|
|
501
498
|
ref: ref
|
|
502
|
-
}, other),
|
|
499
|
+
}, other), React__namespace.default.createElement(StyledOverflowButtonIconWrapper, null, React__namespace.default.createElement(SvgOverflowStroke, null)));
|
|
503
500
|
});
|
|
504
501
|
OverflowButton.displayName = 'OverflowButton';
|
|
505
502
|
OverflowButton.propTypes = {
|
|
506
|
-
isHovered: PropTypes__default
|
|
507
|
-
isActive: PropTypes__default
|
|
508
|
-
isFocused: PropTypes__default
|
|
503
|
+
isHovered: PropTypes__default.default.bool,
|
|
504
|
+
isActive: PropTypes__default.default.bool,
|
|
505
|
+
isFocused: PropTypes__default.default.bool
|
|
509
506
|
};
|
|
510
507
|
|
|
511
508
|
const Row = React.forwardRef((_ref, ref) => {
|
|
@@ -535,7 +532,7 @@ const Row = React.forwardRef((_ref, ref) => {
|
|
|
535
532
|
const onBlurCallback = React.useMemo(() => containerUtilities.composeEventHandlers(onBlur, () => {
|
|
536
533
|
setIsFocused(false);
|
|
537
534
|
}), [onBlur, setIsFocused]);
|
|
538
|
-
return
|
|
535
|
+
return React__namespace.default.createElement(StyledRow, _extends$3({
|
|
539
536
|
onFocus: onFocusCallback,
|
|
540
537
|
onBlur: onBlurCallback,
|
|
541
538
|
size: size,
|
|
@@ -546,10 +543,10 @@ const Row = React.forwardRef((_ref, ref) => {
|
|
|
546
543
|
});
|
|
547
544
|
Row.displayName = 'Row';
|
|
548
545
|
Row.propTypes = {
|
|
549
|
-
isStriped: PropTypes__default
|
|
550
|
-
isFocused: PropTypes__default
|
|
551
|
-
isHovered: PropTypes__default
|
|
552
|
-
isSelected: PropTypes__default
|
|
546
|
+
isStriped: PropTypes__default.default.bool,
|
|
547
|
+
isFocused: PropTypes__default.default.bool,
|
|
548
|
+
isHovered: PropTypes__default.default.bool,
|
|
549
|
+
isSelected: PropTypes__default.default.bool
|
|
553
550
|
};
|
|
554
551
|
|
|
555
552
|
var _path$1;
|
|
@@ -612,29 +609,29 @@ const SortableCell = React.forwardRef((_ref, ref) => {
|
|
|
612
609
|
ariaSortValue = 'descending';
|
|
613
610
|
}
|
|
614
611
|
const SortIcon = sort === undefined ? SvgSortStroke : SvgSortFill;
|
|
615
|
-
return
|
|
612
|
+
return React__namespace.default.createElement(StyledHeaderCell, _extends$3({
|
|
616
613
|
"aria-sort": ariaSortValue,
|
|
617
614
|
width: width
|
|
618
|
-
}, cellProps),
|
|
615
|
+
}, cellProps), React__namespace.default.createElement(StyledSortableButton, _extends$3({
|
|
619
616
|
sort: sort,
|
|
620
617
|
ref: ref
|
|
621
|
-
}, otherProps), children,
|
|
618
|
+
}, 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))));
|
|
622
619
|
});
|
|
623
620
|
SortableCell.displayName = 'SortableCell';
|
|
624
621
|
SortableCell.propTypes = {
|
|
625
|
-
sort: PropTypes__default
|
|
626
|
-
cellProps: PropTypes__default
|
|
627
|
-
width: PropTypes__default
|
|
622
|
+
sort: PropTypes__default.default.oneOf(SORT),
|
|
623
|
+
cellProps: PropTypes__default.default.any,
|
|
624
|
+
width: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number])
|
|
628
625
|
};
|
|
629
626
|
|
|
630
|
-
const Table =
|
|
627
|
+
const Table = React__namespace.default.forwardRef((props, ref) => {
|
|
631
628
|
const tableContextValue = React.useMemo(() => ({
|
|
632
629
|
size: props.size,
|
|
633
630
|
isReadOnly: props.isReadOnly
|
|
634
631
|
}), [props.size, props.isReadOnly]);
|
|
635
|
-
return
|
|
632
|
+
return React__namespace.default.createElement(TableContext.Provider, {
|
|
636
633
|
value: tableContextValue
|
|
637
|
-
},
|
|
634
|
+
}, React__namespace.default.createElement(StyledTable, _extends$3({
|
|
638
635
|
ref: ref
|
|
639
636
|
}, props)));
|
|
640
637
|
});
|
|
@@ -643,8 +640,8 @@ Table.defaultProps = {
|
|
|
643
640
|
size: 'medium'
|
|
644
641
|
};
|
|
645
642
|
Table.propTypes = {
|
|
646
|
-
size: PropTypes__default
|
|
647
|
-
isReadOnly: PropTypes__default
|
|
643
|
+
size: PropTypes__default.default.oneOf(SIZE),
|
|
644
|
+
isReadOnly: PropTypes__default.default.bool
|
|
648
645
|
};
|
|
649
646
|
|
|
650
647
|
exports.Body = Body;
|
package/dist/index.esm.js
CHANGED
|
@@ -31,7 +31,7 @@ function _extends$3() {
|
|
|
31
31
|
const COMPONENT_ID$a = 'tables.body';
|
|
32
32
|
const StyledBody = styled.tbody.attrs({
|
|
33
33
|
'data-garden-id': COMPONENT_ID$a,
|
|
34
|
-
'data-garden-version': '8.62.
|
|
34
|
+
'data-garden-version': '8.62.2'
|
|
35
35
|
}).withConfig({
|
|
36
36
|
displayName: "StyledBody",
|
|
37
37
|
componentId: "sc-14ud6y-0"
|
|
@@ -43,7 +43,7 @@ StyledBody.defaultProps = {
|
|
|
43
43
|
const COMPONENT_ID$9 = 'tables.caption';
|
|
44
44
|
const StyledCaption = styled.caption.attrs({
|
|
45
45
|
'data-garden-id': COMPONENT_ID$9,
|
|
46
|
-
'data-garden-version': '8.62.
|
|
46
|
+
'data-garden-version': '8.62.2'
|
|
47
47
|
}).withConfig({
|
|
48
48
|
displayName: "StyledCaption",
|
|
49
49
|
componentId: "sc-113y327-0"
|
|
@@ -58,7 +58,7 @@ const getLineHeight = props => {
|
|
|
58
58
|
};
|
|
59
59
|
const StyledTable = styled.table.attrs({
|
|
60
60
|
'data-garden-id': COMPONENT_ID$8,
|
|
61
|
-
'data-garden-version': '8.62.
|
|
61
|
+
'data-garden-version': '8.62.2'
|
|
62
62
|
}).withConfig({
|
|
63
63
|
displayName: "StyledTable",
|
|
64
64
|
componentId: "sc-gje7na-0"
|
|
@@ -101,7 +101,7 @@ const sizeStyling = props => {
|
|
|
101
101
|
};
|
|
102
102
|
const StyledCell = styled.td.attrs({
|
|
103
103
|
'data-garden-id': COMPONENT_ID$7,
|
|
104
|
-
'data-garden-version': '8.62.
|
|
104
|
+
'data-garden-version': '8.62.2'
|
|
105
105
|
}).withConfig({
|
|
106
106
|
displayName: "StyledCell",
|
|
107
107
|
componentId: "sc-8hpncx-0"
|
|
@@ -130,7 +130,7 @@ const colorStyles$1 = props => {
|
|
|
130
130
|
};
|
|
131
131
|
const StyledOverflowButton = styled.button.attrs({
|
|
132
132
|
'data-garden-id': COMPONENT_ID$6,
|
|
133
|
-
'data-garden-version': '8.62.
|
|
133
|
+
'data-garden-version': '8.62.2',
|
|
134
134
|
type: 'button'
|
|
135
135
|
}).withConfig({
|
|
136
136
|
displayName: "StyledOverflowButton",
|
|
@@ -186,7 +186,7 @@ const colorStyles = props => {
|
|
|
186
186
|
};
|
|
187
187
|
const StyledRow = styled(StyledBaseRow).attrs(props => ({
|
|
188
188
|
'data-garden-id': COMPONENT_ID$5,
|
|
189
|
-
'data-garden-version': '8.62.
|
|
189
|
+
'data-garden-version': '8.62.2',
|
|
190
190
|
tabIndex: props.isReadOnly ? undefined : -1
|
|
191
191
|
})).withConfig({
|
|
192
192
|
displayName: "StyledRow",
|
|
@@ -207,7 +207,7 @@ const getHeaderRowHeight = props => {
|
|
|
207
207
|
};
|
|
208
208
|
const StyledHeaderRow = styled(StyledBaseRow).attrs({
|
|
209
209
|
'data-garden-id': COMPONENT_ID$4,
|
|
210
|
-
'data-garden-version': '8.62.
|
|
210
|
+
'data-garden-version': '8.62.2'
|
|
211
211
|
}).withConfig({
|
|
212
212
|
displayName: "StyledHeaderRow",
|
|
213
213
|
componentId: "sc-16ogvdx-0"
|
|
@@ -223,7 +223,7 @@ const stickyStyles = props => {
|
|
|
223
223
|
};
|
|
224
224
|
const StyledHead = styled.thead.attrs({
|
|
225
225
|
'data-garden-id': COMPONENT_ID$3,
|
|
226
|
-
'data-garden-version': '8.62.
|
|
226
|
+
'data-garden-version': '8.62.2'
|
|
227
227
|
}).withConfig({
|
|
228
228
|
displayName: "StyledHead",
|
|
229
229
|
componentId: "sc-spf23a-0"
|
|
@@ -240,7 +240,7 @@ const sizeStyles$1 = props => {
|
|
|
240
240
|
};
|
|
241
241
|
const StyledGroupRow = styled(StyledBaseRow).attrs({
|
|
242
242
|
'data-garden-id': COMPONENT_ID$2,
|
|
243
|
-
'data-garden-version': '8.62.
|
|
243
|
+
'data-garden-version': '8.62.2'
|
|
244
244
|
}).withConfig({
|
|
245
245
|
displayName: "StyledGroupRow",
|
|
246
246
|
componentId: "sc-mpd0r8-0"
|
|
@@ -273,7 +273,7 @@ StyledSortableFillIconWrapper.defaultProps = {
|
|
|
273
273
|
};
|
|
274
274
|
const StyledSortableButton = styled.button.attrs({
|
|
275
275
|
'data-garden-id': COMPONENT_ID$1,
|
|
276
|
-
'data-garden-version': '8.62.
|
|
276
|
+
'data-garden-version': '8.62.2',
|
|
277
277
|
type: 'button'
|
|
278
278
|
}).withConfig({
|
|
279
279
|
displayName: "StyledSortableButton",
|
|
@@ -329,7 +329,7 @@ const sizeStyles = props => {
|
|
|
329
329
|
const StyledHeaderCell = styled(StyledCell).attrs({
|
|
330
330
|
as: 'th',
|
|
331
331
|
'data-garden-id': COMPONENT_ID,
|
|
332
|
-
'data-garden-version': '8.62.
|
|
332
|
+
'data-garden-version': '8.62.2'
|
|
333
333
|
}).withConfig({
|
|
334
334
|
displayName: "StyledHeaderCell",
|
|
335
335
|
componentId: "sc-fzagoe-0"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-tables",
|
|
3
|
-
"version": "8.62.
|
|
3
|
+
"version": "8.62.2",
|
|
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>",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@types/react-beautiful-dnd": "13.1.3",
|
|
37
37
|
"@types/react-window": "1.8.5",
|
|
38
|
-
"@zendeskgarden/react-theming": "^8.62.
|
|
38
|
+
"@zendeskgarden/react-theming": "^8.62.2",
|
|
39
39
|
"@zendeskgarden/svg-icons": "6.33.0",
|
|
40
40
|
"react-beautiful-dnd": "13.1.1",
|
|
41
41
|
"react-window": "1.8.8"
|
|
@@ -50,5 +50,5 @@
|
|
|
50
50
|
"access": "public"
|
|
51
51
|
},
|
|
52
52
|
"zendeskgarden:src": "src/index.ts",
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "27a7d6c021f3360396af60d51ecbf66e9076a405"
|
|
54
54
|
}
|