@zendeskgarden/react-tables 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 +121 -124
- package/dist/index.esm.js +67 -68
- package/dist/typings/elements/Cell.d.ts +15 -3
- package/dist/typings/elements/HeaderCell.d.ts +16 -4
- package/dist/typings/elements/OverflowButton.d.ts +10 -3
- package/dist/typings/elements/Row.d.ts +12 -3
- package/dist/typings/elements/SortableCell.d.ts +8 -5
- package/dist/typings/elements/Table.d.ts +4 -3
- package/dist/typings/index.d.ts +5 -0
- package/dist/typings/styled/StyledCell.d.ts +0 -8
- package/dist/typings/styled/StyledHeaderCell.d.ts +1 -1
- package/dist/typings/styled/StyledOverflowButton.d.ts +2 -5
- package/dist/typings/styled/StyledRow.d.ts +0 -6
- package/dist/typings/styled/StyledSortableButton.d.ts +2 -4
- package/dist/typings/styled/StyledTable.d.ts +2 -2
- package/dist/typings/styled/index.d.ts +2 -7
- package/package.json +4 -4
package/dist/index.cjs.js
CHANGED
|
@@ -27,14 +27,12 @@ function _interopNamespace(e) {
|
|
|
27
27
|
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
28
28
|
Object.defineProperty(n, k, d.get ? d : {
|
|
29
29
|
enumerable: true,
|
|
30
|
-
get: function () {
|
|
31
|
-
return e[k];
|
|
32
|
-
}
|
|
30
|
+
get: function () { return e[k]; }
|
|
33
31
|
});
|
|
34
32
|
}
|
|
35
33
|
});
|
|
36
34
|
}
|
|
37
|
-
n[
|
|
35
|
+
n["default"] = e;
|
|
38
36
|
return Object.freeze(n);
|
|
39
37
|
}
|
|
40
38
|
|
|
@@ -157,9 +155,9 @@ function _nonIterableRest() {
|
|
|
157
155
|
}
|
|
158
156
|
|
|
159
157
|
var COMPONENT_ID$a = 'tables.body';
|
|
160
|
-
var StyledBody = styled__default[
|
|
158
|
+
var StyledBody = styled__default["default"].tbody.attrs({
|
|
161
159
|
'data-garden-id': COMPONENT_ID$a,
|
|
162
|
-
'data-garden-version': '8.
|
|
160
|
+
'data-garden-version': '8.48.1'
|
|
163
161
|
}).withConfig({
|
|
164
162
|
displayName: "StyledBody",
|
|
165
163
|
componentId: "sc-14ud6y-0"
|
|
@@ -171,9 +169,9 @@ StyledBody.defaultProps = {
|
|
|
171
169
|
};
|
|
172
170
|
|
|
173
171
|
var COMPONENT_ID$9 = 'tables.caption';
|
|
174
|
-
var StyledCaption = styled__default[
|
|
172
|
+
var StyledCaption = styled__default["default"].caption.attrs({
|
|
175
173
|
'data-garden-id': COMPONENT_ID$9,
|
|
176
|
-
'data-garden-version': '8.
|
|
174
|
+
'data-garden-version': '8.48.1'
|
|
177
175
|
}).withConfig({
|
|
178
176
|
displayName: "StyledCaption",
|
|
179
177
|
componentId: "sc-113y327-0"
|
|
@@ -190,9 +188,9 @@ var COMPONENT_ID$8 = 'tables.table';
|
|
|
190
188
|
var getLineHeight = function getLineHeight(props) {
|
|
191
189
|
return "".concat(props.theme.space.base * 5, "px");
|
|
192
190
|
};
|
|
193
|
-
var StyledTable = styled__default[
|
|
191
|
+
var StyledTable = styled__default["default"].table.attrs({
|
|
194
192
|
'data-garden-id': COMPONENT_ID$8,
|
|
195
|
-
'data-garden-version': '8.
|
|
193
|
+
'data-garden-version': '8.48.1'
|
|
196
194
|
}).withConfig({
|
|
197
195
|
displayName: "StyledTable",
|
|
198
196
|
componentId: "sc-gje7na-0"
|
|
@@ -243,9 +241,9 @@ var sizeStyling = function sizeStyling(props) {
|
|
|
243
241
|
}
|
|
244
242
|
return styled.css(["box-sizing:", ";padding:", ";width:", ";height:", ";"], boxSizing, padding, width, height);
|
|
245
243
|
};
|
|
246
|
-
var StyledCell = styled__default[
|
|
244
|
+
var StyledCell = styled__default["default"].td.attrs({
|
|
247
245
|
'data-garden-id': COMPONENT_ID$7,
|
|
248
|
-
'data-garden-version': '8.
|
|
246
|
+
'data-garden-version': '8.48.1'
|
|
249
247
|
}).withConfig({
|
|
250
248
|
displayName: "StyledCell",
|
|
251
249
|
componentId: "sc-8hpncx-0"
|
|
@@ -278,9 +276,9 @@ var colorStyles$1 = function colorStyles(props) {
|
|
|
278
276
|
}
|
|
279
277
|
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);
|
|
280
278
|
};
|
|
281
|
-
var StyledOverflowButton = styled__default[
|
|
279
|
+
var StyledOverflowButton = styled__default["default"].button.attrs({
|
|
282
280
|
'data-garden-id': COMPONENT_ID$6,
|
|
283
|
-
'data-garden-version': '8.
|
|
281
|
+
'data-garden-version': '8.48.1',
|
|
284
282
|
type: 'button'
|
|
285
283
|
}).withConfig({
|
|
286
284
|
displayName: "StyledOverflowButton",
|
|
@@ -299,7 +297,7 @@ var StyledOverflowButton = styled__default['default'].button.attrs({
|
|
|
299
297
|
StyledOverflowButton.defaultProps = {
|
|
300
298
|
theme: reactTheming.DEFAULT_THEME
|
|
301
299
|
};
|
|
302
|
-
var StyledOverflowButtonIconWrapper = styled__default[
|
|
300
|
+
var StyledOverflowButtonIconWrapper = styled__default["default"].div.withConfig({
|
|
303
301
|
displayName: "StyledOverflowButton__StyledOverflowButtonIconWrapper",
|
|
304
302
|
componentId: "sc-1eba2ml-1"
|
|
305
303
|
})(["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);
|
|
@@ -308,7 +306,7 @@ StyledOverflowButtonIconWrapper.defaultProps = {
|
|
|
308
306
|
};
|
|
309
307
|
|
|
310
308
|
var COMPONENT_ID$5 = 'tables.row';
|
|
311
|
-
var StyledBaseRow = styled__default[
|
|
309
|
+
var StyledBaseRow = styled__default["default"].tr.withConfig({
|
|
312
310
|
displayName: "StyledRow__StyledBaseRow",
|
|
313
311
|
componentId: "sc-ek66ow-0"
|
|
314
312
|
})(["display:table-row;transition:background-color 0.1s ease-in-out;border-bottom:", ";background-color:", ";vertical-align:top;box-sizing:border-box;"], function (props) {
|
|
@@ -348,10 +346,10 @@ var colorStyles = function colorStyles(props) {
|
|
|
348
346
|
}
|
|
349
347
|
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);
|
|
350
348
|
};
|
|
351
|
-
var StyledRow = styled__default[
|
|
349
|
+
var StyledRow = styled__default["default"](StyledBaseRow).attrs(function (props) {
|
|
352
350
|
return {
|
|
353
351
|
'data-garden-id': COMPONENT_ID$5,
|
|
354
|
-
'data-garden-version': '8.
|
|
352
|
+
'data-garden-version': '8.48.1',
|
|
355
353
|
tabIndex: props.isReadOnly ? undefined : -1
|
|
356
354
|
};
|
|
357
355
|
}).withConfig({
|
|
@@ -375,9 +373,9 @@ var getHeaderRowHeight = function getHeaderRowHeight(props) {
|
|
|
375
373
|
}
|
|
376
374
|
return "".concat(props.theme.space.base * 12, "px");
|
|
377
375
|
};
|
|
378
|
-
var StyledHeaderRow = styled__default[
|
|
376
|
+
var StyledHeaderRow = styled__default["default"](StyledBaseRow).attrs({
|
|
379
377
|
'data-garden-id': COMPONENT_ID$4,
|
|
380
|
-
'data-garden-version': '8.
|
|
378
|
+
'data-garden-version': '8.48.1'
|
|
381
379
|
}).withConfig({
|
|
382
380
|
displayName: "StyledHeaderRow",
|
|
383
381
|
componentId: "sc-16ogvdx-0"
|
|
@@ -395,9 +393,9 @@ StyledHeaderRow.defaultProps = {
|
|
|
395
393
|
};
|
|
396
394
|
|
|
397
395
|
var COMPONENT_ID$3 = 'tables.head';
|
|
398
|
-
var StyledHead = styled__default[
|
|
396
|
+
var StyledHead = styled__default["default"].thead.attrs({
|
|
399
397
|
'data-garden-id': COMPONENT_ID$3,
|
|
400
|
-
'data-garden-version': '8.
|
|
398
|
+
'data-garden-version': '8.48.1'
|
|
401
399
|
}).withConfig({
|
|
402
400
|
displayName: "StyledHead",
|
|
403
401
|
componentId: "sc-spf23a-0"
|
|
@@ -414,9 +412,9 @@ var sizeStyles$1 = function sizeStyles(props) {
|
|
|
414
412
|
var lineHeight = getLineHeight(props);
|
|
415
413
|
return styled.css(["height:", ";line-height:", ";font-size:", ";", "{padding:", " ", "px;}"], height, lineHeight, props.theme.fontSizes.sm, StyledCell, polished.math("(".concat(height, " - ").concat(lineHeight, ") / 2")), props.theme.space.base * 3);
|
|
416
414
|
};
|
|
417
|
-
var StyledGroupRow = styled__default[
|
|
415
|
+
var StyledGroupRow = styled__default["default"](StyledBaseRow).attrs({
|
|
418
416
|
'data-garden-id': COMPONENT_ID$2,
|
|
419
|
-
'data-garden-version': '8.
|
|
417
|
+
'data-garden-version': '8.48.1'
|
|
420
418
|
}).withConfig({
|
|
421
419
|
displayName: "StyledGroupRow",
|
|
422
420
|
componentId: "sc-mpd0r8-0"
|
|
@@ -432,7 +430,7 @@ StyledGroupRow.defaultProps = {
|
|
|
432
430
|
};
|
|
433
431
|
|
|
434
432
|
var COMPONENT_ID$1 = 'tables.sortable';
|
|
435
|
-
var StyledBaseIconWrapper = styled__default[
|
|
433
|
+
var StyledBaseIconWrapper = styled__default["default"].div.withConfig({
|
|
436
434
|
displayName: "StyledSortableButton__StyledBaseIconWrapper",
|
|
437
435
|
componentId: "sc-2s1dli-0"
|
|
438
436
|
})(["display:flex;position:absolute;top:0;", ":0;align-items:center;justify-content:center;opacity:0;width:", ";height:100%;color:inherit;fill:inherit;"], function (props) {
|
|
@@ -443,23 +441,23 @@ var StyledBaseIconWrapper = styled__default['default'].div.withConfig({
|
|
|
443
441
|
StyledBaseIconWrapper.defaultProps = {
|
|
444
442
|
theme: reactTheming.DEFAULT_THEME
|
|
445
443
|
};
|
|
446
|
-
var StyledSortableStrokeIconWrapper = styled__default[
|
|
444
|
+
var StyledSortableStrokeIconWrapper = styled__default["default"](StyledBaseIconWrapper).withConfig({
|
|
447
445
|
displayName: "StyledSortableButton__StyledSortableStrokeIconWrapper",
|
|
448
446
|
componentId: "sc-2s1dli-1"
|
|
449
447
|
})([""]);
|
|
450
448
|
StyledSortableStrokeIconWrapper.defaultProps = {
|
|
451
449
|
theme: reactTheming.DEFAULT_THEME
|
|
452
450
|
};
|
|
453
|
-
var StyledSortableFillIconWrapper = styled__default[
|
|
451
|
+
var StyledSortableFillIconWrapper = styled__default["default"](StyledBaseIconWrapper).withConfig({
|
|
454
452
|
displayName: "StyledSortableButton__StyledSortableFillIconWrapper",
|
|
455
453
|
componentId: "sc-2s1dli-2"
|
|
456
454
|
})([""]);
|
|
457
455
|
StyledSortableFillIconWrapper.defaultProps = {
|
|
458
456
|
theme: reactTheming.DEFAULT_THEME
|
|
459
457
|
};
|
|
460
|
-
var StyledSortableButton = styled__default[
|
|
458
|
+
var StyledSortableButton = styled__default["default"].button.attrs({
|
|
461
459
|
'data-garden-id': COMPONENT_ID$1,
|
|
462
|
-
'data-garden-version': '8.
|
|
460
|
+
'data-garden-version': '8.48.1',
|
|
463
461
|
type: 'button'
|
|
464
462
|
}).withConfig({
|
|
465
463
|
displayName: "StyledSortableButton",
|
|
@@ -514,10 +512,10 @@ var sizeStyles = function sizeStyles(props) {
|
|
|
514
512
|
}
|
|
515
513
|
return styled.css(["padding-top:", ";padding-bottom:", ";"], paddingVertical, paddingVertical);
|
|
516
514
|
};
|
|
517
|
-
var StyledHeaderCell = styled__default[
|
|
515
|
+
var StyledHeaderCell = styled__default["default"](StyledCell).attrs({
|
|
518
516
|
as: 'th',
|
|
519
517
|
'data-garden-id': COMPONENT_ID,
|
|
520
|
-
'data-garden-version': '8.
|
|
518
|
+
'data-garden-version': '8.48.1'
|
|
521
519
|
}).withConfig({
|
|
522
520
|
displayName: "StyledHeaderCell",
|
|
523
521
|
componentId: "sc-fzagoe-0"
|
|
@@ -540,21 +538,21 @@ StyledHeaderCell.defaultProps = {
|
|
|
540
538
|
theme: reactTheming.DEFAULT_THEME
|
|
541
539
|
};
|
|
542
540
|
|
|
543
|
-
var Body =
|
|
544
|
-
return React__default[
|
|
541
|
+
var Body = React.forwardRef(function (props, ref) {
|
|
542
|
+
return React__default["default"].createElement(StyledBody, _extends$3({
|
|
545
543
|
ref: ref
|
|
546
544
|
}, props));
|
|
547
545
|
});
|
|
548
546
|
Body.displayName = 'Body';
|
|
549
547
|
|
|
550
|
-
var Caption =
|
|
551
|
-
return React__default[
|
|
548
|
+
var Caption = React.forwardRef(function (props, ref) {
|
|
549
|
+
return React__default["default"].createElement(StyledCaption, _extends$3({
|
|
552
550
|
ref: ref
|
|
553
551
|
}, props));
|
|
554
552
|
});
|
|
555
553
|
Caption.displayName = 'Caption';
|
|
556
554
|
|
|
557
|
-
var TableContext = React__default[
|
|
555
|
+
var TableContext = React__default["default"].createContext({
|
|
558
556
|
size: 'medium',
|
|
559
557
|
isReadOnly: false
|
|
560
558
|
});
|
|
@@ -562,96 +560,96 @@ var useTableContext = function useTableContext() {
|
|
|
562
560
|
return React.useContext(TableContext);
|
|
563
561
|
};
|
|
564
562
|
|
|
565
|
-
var Cell = React__default[
|
|
563
|
+
var Cell = React__default["default"].forwardRef(function (props, ref) {
|
|
566
564
|
var _useTableContext = useTableContext(),
|
|
567
565
|
size = _useTableContext.size;
|
|
568
|
-
return React__default[
|
|
566
|
+
return React__default["default"].createElement(StyledCell, _extends$3({
|
|
569
567
|
ref: ref,
|
|
570
568
|
size: size
|
|
571
569
|
}, props));
|
|
572
570
|
});
|
|
573
571
|
Cell.displayName = 'Cell';
|
|
574
572
|
Cell.propTypes = {
|
|
575
|
-
isMinimum: PropTypes__default[
|
|
576
|
-
isTruncated: PropTypes__default[
|
|
577
|
-
hasOverflow: PropTypes__default[
|
|
578
|
-
width: PropTypes__default[
|
|
573
|
+
isMinimum: PropTypes__default["default"].bool,
|
|
574
|
+
isTruncated: PropTypes__default["default"].bool,
|
|
575
|
+
hasOverflow: PropTypes__default["default"].bool,
|
|
576
|
+
width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
|
|
579
577
|
};
|
|
580
578
|
|
|
581
|
-
var GroupRow =
|
|
579
|
+
var GroupRow = React.forwardRef(function (props, ref) {
|
|
582
580
|
var _useTableContext = useTableContext(),
|
|
583
581
|
size = _useTableContext.size;
|
|
584
|
-
return React__default[
|
|
582
|
+
return React__default["default"].createElement(StyledGroupRow, _extends$3({
|
|
585
583
|
ref: ref,
|
|
586
584
|
size: size
|
|
587
585
|
}, props));
|
|
588
586
|
});
|
|
589
587
|
GroupRow.displayName = 'GroupRow';
|
|
590
588
|
|
|
591
|
-
var Head =
|
|
592
|
-
return React__default[
|
|
589
|
+
var Head = React.forwardRef(function (props, ref) {
|
|
590
|
+
return React__default["default"].createElement(StyledHead, _extends$3({
|
|
593
591
|
ref: ref
|
|
594
592
|
}, props));
|
|
595
593
|
});
|
|
596
594
|
Head.displayName = 'Head';
|
|
597
595
|
|
|
598
|
-
var HeaderCell =
|
|
596
|
+
var HeaderCell = React.forwardRef(function (props, ref) {
|
|
599
597
|
var _useTableContext = useTableContext(),
|
|
600
598
|
size = _useTableContext.size;
|
|
601
|
-
return React__default[
|
|
599
|
+
return React__default["default"].createElement(StyledHeaderCell, _extends$3({
|
|
602
600
|
ref: ref,
|
|
603
601
|
size: size
|
|
604
602
|
}, props));
|
|
605
603
|
});
|
|
606
604
|
HeaderCell.displayName = 'HeaderCell';
|
|
607
605
|
HeaderCell.propTypes = {
|
|
608
|
-
isMinimum: PropTypes__default[
|
|
609
|
-
isTruncated: PropTypes__default[
|
|
610
|
-
hasOverflow: PropTypes__default[
|
|
611
|
-
width: PropTypes__default[
|
|
606
|
+
isMinimum: PropTypes__default["default"].bool,
|
|
607
|
+
isTruncated: PropTypes__default["default"].bool,
|
|
608
|
+
hasOverflow: PropTypes__default["default"].bool,
|
|
609
|
+
width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
|
|
612
610
|
};
|
|
613
611
|
|
|
614
|
-
var HeaderRow = React__default[
|
|
612
|
+
var HeaderRow = React__default["default"].forwardRef(function (props, ref) {
|
|
615
613
|
var _useTableContext = useTableContext(),
|
|
616
614
|
size = _useTableContext.size;
|
|
617
|
-
return React__default[
|
|
615
|
+
return React__default["default"].createElement(StyledHeaderRow, _extends$3({
|
|
618
616
|
ref: ref,
|
|
619
617
|
size: size
|
|
620
618
|
}, props));
|
|
621
619
|
});
|
|
622
620
|
HeaderRow.displayName = 'HeaderRow';
|
|
623
621
|
|
|
622
|
+
var _g;
|
|
623
|
+
|
|
624
624
|
function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
|
|
625
625
|
|
|
626
|
-
var
|
|
627
|
-
fill: "currentColor"
|
|
628
|
-
}, /*#__PURE__*/React__namespace.createElement("circle", {
|
|
629
|
-
cx: 2.5,
|
|
630
|
-
cy: 8,
|
|
631
|
-
r: 1.5
|
|
632
|
-
}), /*#__PURE__*/React__namespace.createElement("circle", {
|
|
633
|
-
cx: 8,
|
|
634
|
-
cy: 8,
|
|
635
|
-
r: 1.5
|
|
636
|
-
}), /*#__PURE__*/React__namespace.createElement("circle", {
|
|
637
|
-
cx: 13.5,
|
|
638
|
-
cy: 8,
|
|
639
|
-
r: 1.5
|
|
640
|
-
}));
|
|
641
|
-
|
|
642
|
-
function SvgOverflowStroke(props) {
|
|
626
|
+
var SvgOverflowStroke = function SvgOverflowStroke(props) {
|
|
643
627
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
|
|
644
628
|
xmlns: "http://www.w3.org/2000/svg",
|
|
645
629
|
width: 16,
|
|
646
630
|
height: 16,
|
|
647
|
-
viewBox: "0 0 16 16",
|
|
648
631
|
focusable: "false",
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
}
|
|
632
|
+
viewBox: "0 0 16 16",
|
|
633
|
+
"aria-hidden": "true"
|
|
634
|
+
}, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
|
|
635
|
+
fill: "currentColor"
|
|
636
|
+
}, /*#__PURE__*/React__namespace.createElement("circle", {
|
|
637
|
+
cx: 2.5,
|
|
638
|
+
cy: 8,
|
|
639
|
+
r: 1.5
|
|
640
|
+
}), /*#__PURE__*/React__namespace.createElement("circle", {
|
|
641
|
+
cx: 8,
|
|
642
|
+
cy: 8,
|
|
643
|
+
r: 1.5
|
|
644
|
+
}), /*#__PURE__*/React__namespace.createElement("circle", {
|
|
645
|
+
cx: 13.5,
|
|
646
|
+
cy: 8,
|
|
647
|
+
r: 1.5
|
|
648
|
+
}))));
|
|
649
|
+
};
|
|
652
650
|
|
|
653
651
|
var _excluded$2 = ["onFocus", "onBlur", "isFocused"];
|
|
654
|
-
var OverflowButton =
|
|
652
|
+
var OverflowButton = React.forwardRef(function (_ref, ref) {
|
|
655
653
|
var onFocus = _ref.onFocus,
|
|
656
654
|
onBlur = _ref.onBlur,
|
|
657
655
|
focused = _ref.isFocused,
|
|
@@ -662,7 +660,7 @@ var OverflowButton = React__default['default'].forwardRef(function (_ref, ref) {
|
|
|
662
660
|
setIsFocused = _useState2[1];
|
|
663
661
|
var _useTableContext = useTableContext(),
|
|
664
662
|
size = _useTableContext.size;
|
|
665
|
-
return React__default[
|
|
663
|
+
return React__default["default"].createElement(StyledOverflowButton, _extends$3({
|
|
666
664
|
onFocus: containerUtilities.composeEventHandlers(onFocus, function () {
|
|
667
665
|
setIsFocused(true);
|
|
668
666
|
}),
|
|
@@ -672,17 +670,17 @@ var OverflowButton = React__default['default'].forwardRef(function (_ref, ref) {
|
|
|
672
670
|
size: size,
|
|
673
671
|
isFocused: typeof focused === 'undefined' ? isFocused : focused,
|
|
674
672
|
ref: ref
|
|
675
|
-
}, other), React__default[
|
|
673
|
+
}, other), React__default["default"].createElement(StyledOverflowButtonIconWrapper, null, React__default["default"].createElement(SvgOverflowStroke, null)));
|
|
676
674
|
});
|
|
677
675
|
OverflowButton.displayName = 'OverflowButton';
|
|
678
676
|
OverflowButton.propTypes = {
|
|
679
|
-
isHovered: PropTypes__default[
|
|
680
|
-
isActive: PropTypes__default[
|
|
681
|
-
isFocused: PropTypes__default[
|
|
677
|
+
isHovered: PropTypes__default["default"].bool,
|
|
678
|
+
isActive: PropTypes__default["default"].bool,
|
|
679
|
+
isFocused: PropTypes__default["default"].bool
|
|
682
680
|
};
|
|
683
681
|
|
|
684
682
|
var _excluded$1 = ["onFocus", "onBlur", "isFocused"];
|
|
685
|
-
var Row =
|
|
683
|
+
var Row = React.forwardRef(function (_ref, ref) {
|
|
686
684
|
var onFocus = _ref.onFocus,
|
|
687
685
|
onBlur = _ref.onBlur,
|
|
688
686
|
focused = _ref.isFocused,
|
|
@@ -703,7 +701,7 @@ var Row = React__default['default'].forwardRef(function (_ref, ref) {
|
|
|
703
701
|
}
|
|
704
702
|
return isFocused;
|
|
705
703
|
}, [focused, isFocused, isReadOnly]);
|
|
706
|
-
return React__default[
|
|
704
|
+
return React__default["default"].createElement(StyledRow, _extends$3({
|
|
707
705
|
onFocus: containerUtilities.composeEventHandlers(onFocus, function () {
|
|
708
706
|
setIsFocused(true);
|
|
709
707
|
}),
|
|
@@ -718,56 +716,54 @@ var Row = React__default['default'].forwardRef(function (_ref, ref) {
|
|
|
718
716
|
});
|
|
719
717
|
Row.displayName = 'Row';
|
|
720
718
|
Row.propTypes = {
|
|
721
|
-
isStriped: PropTypes__default[
|
|
722
|
-
isFocused: PropTypes__default[
|
|
723
|
-
isHovered: PropTypes__default[
|
|
724
|
-
isSelected: PropTypes__default[
|
|
719
|
+
isStriped: PropTypes__default["default"].bool,
|
|
720
|
+
isFocused: PropTypes__default["default"].bool,
|
|
721
|
+
isHovered: PropTypes__default["default"].bool,
|
|
722
|
+
isSelected: PropTypes__default["default"].bool
|
|
725
723
|
};
|
|
726
724
|
|
|
727
|
-
|
|
725
|
+
var _path$1;
|
|
728
726
|
|
|
729
|
-
|
|
730
|
-
fill: "none",
|
|
731
|
-
stroke: "currentColor",
|
|
732
|
-
strokeLinecap: "round",
|
|
733
|
-
d: "M2.5 4L5.6.9c.2-.2.5-.2.7 0L9.5 4m-7 4l3.1 3.1c.2.2.5.2.7 0L9.5 8"
|
|
734
|
-
});
|
|
727
|
+
function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
|
|
735
728
|
|
|
736
|
-
function SvgSortStroke(props) {
|
|
729
|
+
var SvgSortStroke = function SvgSortStroke(props) {
|
|
737
730
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
|
|
738
731
|
xmlns: "http://www.w3.org/2000/svg",
|
|
739
732
|
width: 12,
|
|
740
733
|
height: 12,
|
|
741
|
-
viewBox: "0 0 12 12",
|
|
742
734
|
focusable: "false",
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
}
|
|
746
|
-
|
|
747
|
-
|
|
735
|
+
viewBox: "0 0 12 12",
|
|
736
|
+
"aria-hidden": "true"
|
|
737
|
+
}, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
738
|
+
fill: "none",
|
|
739
|
+
stroke: "currentColor",
|
|
740
|
+
strokeLinecap: "round",
|
|
741
|
+
d: "M2.5 4L5.6.9c.2-.2.5-.2.7 0L9.5 4m-7 4l3.1 3.1c.2.2.5.2.7 0L9.5 8"
|
|
742
|
+
})));
|
|
743
|
+
};
|
|
748
744
|
|
|
749
|
-
var
|
|
750
|
-
fill: "currentColor",
|
|
751
|
-
d: "M10 5H2a.5.5 0 01-.46-.31.47.47 0 01.11-.54L5.29.5A1 1 0 016.7.5l3.65 3.65a.49.49 0 01.11.54A.51.51 0 0110 5z"
|
|
752
|
-
});
|
|
745
|
+
var _path, _path2;
|
|
753
746
|
|
|
754
|
-
var
|
|
755
|
-
d: "M2 7a.5.5 0 00-.46.31.47.47 0 00.11.54L5.3 11.5a1 1 0 001.41 0l3.65-3.65a.49.49 0 00.11-.54A.53.53 0 0010 7z"
|
|
756
|
-
});
|
|
747
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
757
748
|
|
|
758
|
-
function SvgSortFill(props) {
|
|
749
|
+
var SvgSortFill = function SvgSortFill(props) {
|
|
759
750
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends({
|
|
760
751
|
xmlns: "http://www.w3.org/2000/svg",
|
|
761
752
|
width: 12,
|
|
762
753
|
height: 12,
|
|
763
|
-
viewBox: "0 0 12 12",
|
|
764
754
|
focusable: "false",
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
}
|
|
755
|
+
viewBox: "0 0 12 12",
|
|
756
|
+
"aria-hidden": "true"
|
|
757
|
+
}, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
|
|
758
|
+
fill: "currentColor",
|
|
759
|
+
d: "M10 5H2a.5.5 0 01-.46-.31.47.47 0 01.11-.54L5.29.5A1 1 0 016.7.5l3.65 3.65a.49.49 0 01.11.54A.51.51 0 0110 5z"
|
|
760
|
+
})), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
761
|
+
d: "M2 7a.5.5 0 00-.46.31.47.47 0 00.11.54L5.3 11.5a1 1 0 001.41 0l3.65-3.65a.49.49 0 00.11-.54A.53.53 0 0010 7z"
|
|
762
|
+
})));
|
|
763
|
+
};
|
|
768
764
|
|
|
769
765
|
var _excluded = ["sort", "cellProps", "width", "children"];
|
|
770
|
-
var SortableCell =
|
|
766
|
+
var SortableCell = React.forwardRef(function (_ref, ref) {
|
|
771
767
|
var sort = _ref.sort,
|
|
772
768
|
cellProps = _ref.cellProps,
|
|
773
769
|
width = _ref.width,
|
|
@@ -780,31 +776,31 @@ var SortableCell = React__default['default'].forwardRef(function (_ref, ref) {
|
|
|
780
776
|
ariaSortValue = 'descending';
|
|
781
777
|
}
|
|
782
778
|
var SortIcon = sort === undefined ? SvgSortStroke : SvgSortFill;
|
|
783
|
-
return React__default[
|
|
779
|
+
return React__default["default"].createElement(StyledHeaderCell, _extends$3({
|
|
784
780
|
"aria-sort": ariaSortValue,
|
|
785
781
|
width: width
|
|
786
|
-
}, cellProps), React__default[
|
|
782
|
+
}, cellProps), React__default["default"].createElement(StyledSortableButton, _extends$3({
|
|
787
783
|
sort: sort,
|
|
788
784
|
ref: ref
|
|
789
|
-
}, otherProps), children, React__default[
|
|
785
|
+
}, otherProps), children, React__default["default"].createElement(StyledSortableStrokeIconWrapper, null, React__default["default"].createElement(SortIcon, null)), React__default["default"].createElement(StyledSortableFillIconWrapper, null, React__default["default"].createElement(SvgSortFill, null))));
|
|
790
786
|
});
|
|
791
787
|
SortableCell.displayName = 'SortableCell';
|
|
792
788
|
SortableCell.propTypes = {
|
|
793
|
-
sort: PropTypes__default[
|
|
794
|
-
cellProps: PropTypes__default[
|
|
795
|
-
width: PropTypes__default[
|
|
789
|
+
sort: PropTypes__default["default"].oneOf(['asc', 'desc']),
|
|
790
|
+
cellProps: PropTypes__default["default"].any,
|
|
791
|
+
width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
|
|
796
792
|
};
|
|
797
793
|
|
|
798
|
-
var Table = React__default[
|
|
794
|
+
var Table = React__default["default"].forwardRef(function (props, ref) {
|
|
799
795
|
var tableContextValue = React.useMemo(function () {
|
|
800
796
|
return {
|
|
801
797
|
size: props.size,
|
|
802
798
|
isReadOnly: props.isReadOnly
|
|
803
799
|
};
|
|
804
800
|
}, [props.size, props.isReadOnly]);
|
|
805
|
-
return React__default[
|
|
801
|
+
return React__default["default"].createElement(TableContext.Provider, {
|
|
806
802
|
value: tableContextValue
|
|
807
|
-
}, React__default[
|
|
803
|
+
}, React__default["default"].createElement(StyledTable, _extends$3({
|
|
808
804
|
ref: ref
|
|
809
805
|
}, props)));
|
|
810
806
|
});
|
|
@@ -813,7 +809,8 @@ Table.defaultProps = {
|
|
|
813
809
|
size: 'medium'
|
|
814
810
|
};
|
|
815
811
|
Table.propTypes = {
|
|
816
|
-
size: PropTypes__default[
|
|
812
|
+
size: PropTypes__default["default"].oneOf(['small', 'medium', 'large']),
|
|
813
|
+
isReadOnly: PropTypes__default["default"].bool
|
|
817
814
|
};
|
|
818
815
|
|
|
819
816
|
exports.Body = Body;
|
package/dist/index.esm.js
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import * as React from 'react';
|
|
9
|
-
import React__default, { useContext, useState, useMemo } from 'react';
|
|
9
|
+
import React__default, { forwardRef, useContext, useState, useMemo } from 'react';
|
|
10
10
|
import styled, { css } from 'styled-components';
|
|
11
11
|
import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
|
|
12
12
|
import { math } from 'polished';
|
|
@@ -129,7 +129,7 @@ function _nonIterableRest() {
|
|
|
129
129
|
var COMPONENT_ID$a = 'tables.body';
|
|
130
130
|
var StyledBody = styled.tbody.attrs({
|
|
131
131
|
'data-garden-id': COMPONENT_ID$a,
|
|
132
|
-
'data-garden-version': '8.
|
|
132
|
+
'data-garden-version': '8.48.1'
|
|
133
133
|
}).withConfig({
|
|
134
134
|
displayName: "StyledBody",
|
|
135
135
|
componentId: "sc-14ud6y-0"
|
|
@@ -143,7 +143,7 @@ StyledBody.defaultProps = {
|
|
|
143
143
|
var COMPONENT_ID$9 = 'tables.caption';
|
|
144
144
|
var StyledCaption = styled.caption.attrs({
|
|
145
145
|
'data-garden-id': COMPONENT_ID$9,
|
|
146
|
-
'data-garden-version': '8.
|
|
146
|
+
'data-garden-version': '8.48.1'
|
|
147
147
|
}).withConfig({
|
|
148
148
|
displayName: "StyledCaption",
|
|
149
149
|
componentId: "sc-113y327-0"
|
|
@@ -162,7 +162,7 @@ var getLineHeight = function getLineHeight(props) {
|
|
|
162
162
|
};
|
|
163
163
|
var StyledTable = styled.table.attrs({
|
|
164
164
|
'data-garden-id': COMPONENT_ID$8,
|
|
165
|
-
'data-garden-version': '8.
|
|
165
|
+
'data-garden-version': '8.48.1'
|
|
166
166
|
}).withConfig({
|
|
167
167
|
displayName: "StyledTable",
|
|
168
168
|
componentId: "sc-gje7na-0"
|
|
@@ -215,7 +215,7 @@ var sizeStyling = function sizeStyling(props) {
|
|
|
215
215
|
};
|
|
216
216
|
var StyledCell = styled.td.attrs({
|
|
217
217
|
'data-garden-id': COMPONENT_ID$7,
|
|
218
|
-
'data-garden-version': '8.
|
|
218
|
+
'data-garden-version': '8.48.1'
|
|
219
219
|
}).withConfig({
|
|
220
220
|
displayName: "StyledCell",
|
|
221
221
|
componentId: "sc-8hpncx-0"
|
|
@@ -250,7 +250,7 @@ var colorStyles$1 = function colorStyles(props) {
|
|
|
250
250
|
};
|
|
251
251
|
var StyledOverflowButton = styled.button.attrs({
|
|
252
252
|
'data-garden-id': COMPONENT_ID$6,
|
|
253
|
-
'data-garden-version': '8.
|
|
253
|
+
'data-garden-version': '8.48.1',
|
|
254
254
|
type: 'button'
|
|
255
255
|
}).withConfig({
|
|
256
256
|
displayName: "StyledOverflowButton",
|
|
@@ -321,7 +321,7 @@ var colorStyles = function colorStyles(props) {
|
|
|
321
321
|
var StyledRow = styled(StyledBaseRow).attrs(function (props) {
|
|
322
322
|
return {
|
|
323
323
|
'data-garden-id': COMPONENT_ID$5,
|
|
324
|
-
'data-garden-version': '8.
|
|
324
|
+
'data-garden-version': '8.48.1',
|
|
325
325
|
tabIndex: props.isReadOnly ? undefined : -1
|
|
326
326
|
};
|
|
327
327
|
}).withConfig({
|
|
@@ -347,7 +347,7 @@ var getHeaderRowHeight = function getHeaderRowHeight(props) {
|
|
|
347
347
|
};
|
|
348
348
|
var StyledHeaderRow = styled(StyledBaseRow).attrs({
|
|
349
349
|
'data-garden-id': COMPONENT_ID$4,
|
|
350
|
-
'data-garden-version': '8.
|
|
350
|
+
'data-garden-version': '8.48.1'
|
|
351
351
|
}).withConfig({
|
|
352
352
|
displayName: "StyledHeaderRow",
|
|
353
353
|
componentId: "sc-16ogvdx-0"
|
|
@@ -367,7 +367,7 @@ StyledHeaderRow.defaultProps = {
|
|
|
367
367
|
var COMPONENT_ID$3 = 'tables.head';
|
|
368
368
|
var StyledHead = styled.thead.attrs({
|
|
369
369
|
'data-garden-id': COMPONENT_ID$3,
|
|
370
|
-
'data-garden-version': '8.
|
|
370
|
+
'data-garden-version': '8.48.1'
|
|
371
371
|
}).withConfig({
|
|
372
372
|
displayName: "StyledHead",
|
|
373
373
|
componentId: "sc-spf23a-0"
|
|
@@ -386,7 +386,7 @@ var sizeStyles$1 = function sizeStyles(props) {
|
|
|
386
386
|
};
|
|
387
387
|
var StyledGroupRow = styled(StyledBaseRow).attrs({
|
|
388
388
|
'data-garden-id': COMPONENT_ID$2,
|
|
389
|
-
'data-garden-version': '8.
|
|
389
|
+
'data-garden-version': '8.48.1'
|
|
390
390
|
}).withConfig({
|
|
391
391
|
displayName: "StyledGroupRow",
|
|
392
392
|
componentId: "sc-mpd0r8-0"
|
|
@@ -429,7 +429,7 @@ StyledSortableFillIconWrapper.defaultProps = {
|
|
|
429
429
|
};
|
|
430
430
|
var StyledSortableButton = styled.button.attrs({
|
|
431
431
|
'data-garden-id': COMPONENT_ID$1,
|
|
432
|
-
'data-garden-version': '8.
|
|
432
|
+
'data-garden-version': '8.48.1',
|
|
433
433
|
type: 'button'
|
|
434
434
|
}).withConfig({
|
|
435
435
|
displayName: "StyledSortableButton",
|
|
@@ -487,7 +487,7 @@ var sizeStyles = function sizeStyles(props) {
|
|
|
487
487
|
var StyledHeaderCell = styled(StyledCell).attrs({
|
|
488
488
|
as: 'th',
|
|
489
489
|
'data-garden-id': COMPONENT_ID,
|
|
490
|
-
'data-garden-version': '8.
|
|
490
|
+
'data-garden-version': '8.48.1'
|
|
491
491
|
}).withConfig({
|
|
492
492
|
displayName: "StyledHeaderCell",
|
|
493
493
|
componentId: "sc-fzagoe-0"
|
|
@@ -510,14 +510,14 @@ StyledHeaderCell.defaultProps = {
|
|
|
510
510
|
theme: DEFAULT_THEME
|
|
511
511
|
};
|
|
512
512
|
|
|
513
|
-
var Body =
|
|
513
|
+
var Body = forwardRef(function (props, ref) {
|
|
514
514
|
return React__default.createElement(StyledBody, _extends$3({
|
|
515
515
|
ref: ref
|
|
516
516
|
}, props));
|
|
517
517
|
});
|
|
518
518
|
Body.displayName = 'Body';
|
|
519
519
|
|
|
520
|
-
var Caption =
|
|
520
|
+
var Caption = forwardRef(function (props, ref) {
|
|
521
521
|
return React__default.createElement(StyledCaption, _extends$3({
|
|
522
522
|
ref: ref
|
|
523
523
|
}, props));
|
|
@@ -548,7 +548,7 @@ Cell.propTypes = {
|
|
|
548
548
|
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
|
|
549
549
|
};
|
|
550
550
|
|
|
551
|
-
var GroupRow =
|
|
551
|
+
var GroupRow = forwardRef(function (props, ref) {
|
|
552
552
|
var _useTableContext = useTableContext(),
|
|
553
553
|
size = _useTableContext.size;
|
|
554
554
|
return React__default.createElement(StyledGroupRow, _extends$3({
|
|
@@ -558,14 +558,14 @@ var GroupRow = React__default.forwardRef(function (props, ref) {
|
|
|
558
558
|
});
|
|
559
559
|
GroupRow.displayName = 'GroupRow';
|
|
560
560
|
|
|
561
|
-
var Head =
|
|
561
|
+
var Head = forwardRef(function (props, ref) {
|
|
562
562
|
return React__default.createElement(StyledHead, _extends$3({
|
|
563
563
|
ref: ref
|
|
564
564
|
}, props));
|
|
565
565
|
});
|
|
566
566
|
Head.displayName = 'Head';
|
|
567
567
|
|
|
568
|
-
var HeaderCell =
|
|
568
|
+
var HeaderCell = forwardRef(function (props, ref) {
|
|
569
569
|
var _useTableContext = useTableContext(),
|
|
570
570
|
size = _useTableContext.size;
|
|
571
571
|
return React__default.createElement(StyledHeaderCell, _extends$3({
|
|
@@ -591,37 +591,37 @@ var HeaderRow = React__default.forwardRef(function (props, ref) {
|
|
|
591
591
|
});
|
|
592
592
|
HeaderRow.displayName = 'HeaderRow';
|
|
593
593
|
|
|
594
|
+
var _g;
|
|
595
|
+
|
|
594
596
|
function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
|
|
595
597
|
|
|
596
|
-
var
|
|
597
|
-
fill: "currentColor"
|
|
598
|
-
}, /*#__PURE__*/React.createElement("circle", {
|
|
599
|
-
cx: 2.5,
|
|
600
|
-
cy: 8,
|
|
601
|
-
r: 1.5
|
|
602
|
-
}), /*#__PURE__*/React.createElement("circle", {
|
|
603
|
-
cx: 8,
|
|
604
|
-
cy: 8,
|
|
605
|
-
r: 1.5
|
|
606
|
-
}), /*#__PURE__*/React.createElement("circle", {
|
|
607
|
-
cx: 13.5,
|
|
608
|
-
cy: 8,
|
|
609
|
-
r: 1.5
|
|
610
|
-
}));
|
|
611
|
-
|
|
612
|
-
function SvgOverflowStroke(props) {
|
|
598
|
+
var SvgOverflowStroke = function SvgOverflowStroke(props) {
|
|
613
599
|
return /*#__PURE__*/React.createElement("svg", _extends$2({
|
|
614
600
|
xmlns: "http://www.w3.org/2000/svg",
|
|
615
601
|
width: 16,
|
|
616
602
|
height: 16,
|
|
617
|
-
viewBox: "0 0 16 16",
|
|
618
603
|
focusable: "false",
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
}
|
|
604
|
+
viewBox: "0 0 16 16",
|
|
605
|
+
"aria-hidden": "true"
|
|
606
|
+
}, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
|
|
607
|
+
fill: "currentColor"
|
|
608
|
+
}, /*#__PURE__*/React.createElement("circle", {
|
|
609
|
+
cx: 2.5,
|
|
610
|
+
cy: 8,
|
|
611
|
+
r: 1.5
|
|
612
|
+
}), /*#__PURE__*/React.createElement("circle", {
|
|
613
|
+
cx: 8,
|
|
614
|
+
cy: 8,
|
|
615
|
+
r: 1.5
|
|
616
|
+
}), /*#__PURE__*/React.createElement("circle", {
|
|
617
|
+
cx: 13.5,
|
|
618
|
+
cy: 8,
|
|
619
|
+
r: 1.5
|
|
620
|
+
}))));
|
|
621
|
+
};
|
|
622
622
|
|
|
623
623
|
var _excluded$2 = ["onFocus", "onBlur", "isFocused"];
|
|
624
|
-
var OverflowButton =
|
|
624
|
+
var OverflowButton = forwardRef(function (_ref, ref) {
|
|
625
625
|
var onFocus = _ref.onFocus,
|
|
626
626
|
onBlur = _ref.onBlur,
|
|
627
627
|
focused = _ref.isFocused,
|
|
@@ -652,7 +652,7 @@ OverflowButton.propTypes = {
|
|
|
652
652
|
};
|
|
653
653
|
|
|
654
654
|
var _excluded$1 = ["onFocus", "onBlur", "isFocused"];
|
|
655
|
-
var Row =
|
|
655
|
+
var Row = forwardRef(function (_ref, ref) {
|
|
656
656
|
var onFocus = _ref.onFocus,
|
|
657
657
|
onBlur = _ref.onBlur,
|
|
658
658
|
focused = _ref.isFocused,
|
|
@@ -694,50 +694,48 @@ Row.propTypes = {
|
|
|
694
694
|
isSelected: PropTypes.bool
|
|
695
695
|
};
|
|
696
696
|
|
|
697
|
-
|
|
697
|
+
var _path$1;
|
|
698
698
|
|
|
699
|
-
|
|
700
|
-
fill: "none",
|
|
701
|
-
stroke: "currentColor",
|
|
702
|
-
strokeLinecap: "round",
|
|
703
|
-
d: "M2.5 4L5.6.9c.2-.2.5-.2.7 0L9.5 4m-7 4l3.1 3.1c.2.2.5.2.7 0L9.5 8"
|
|
704
|
-
});
|
|
699
|
+
function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
|
|
705
700
|
|
|
706
|
-
function SvgSortStroke(props) {
|
|
701
|
+
var SvgSortStroke = function SvgSortStroke(props) {
|
|
707
702
|
return /*#__PURE__*/React.createElement("svg", _extends$1({
|
|
708
703
|
xmlns: "http://www.w3.org/2000/svg",
|
|
709
704
|
width: 12,
|
|
710
705
|
height: 12,
|
|
711
|
-
viewBox: "0 0 12 12",
|
|
712
706
|
focusable: "false",
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
}
|
|
716
|
-
|
|
717
|
-
|
|
707
|
+
viewBox: "0 0 12 12",
|
|
708
|
+
"aria-hidden": "true"
|
|
709
|
+
}, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
|
|
710
|
+
fill: "none",
|
|
711
|
+
stroke: "currentColor",
|
|
712
|
+
strokeLinecap: "round",
|
|
713
|
+
d: "M2.5 4L5.6.9c.2-.2.5-.2.7 0L9.5 4m-7 4l3.1 3.1c.2.2.5.2.7 0L9.5 8"
|
|
714
|
+
})));
|
|
715
|
+
};
|
|
718
716
|
|
|
719
|
-
var
|
|
720
|
-
fill: "currentColor",
|
|
721
|
-
d: "M10 5H2a.5.5 0 01-.46-.31.47.47 0 01.11-.54L5.29.5A1 1 0 016.7.5l3.65 3.65a.49.49 0 01.11.54A.51.51 0 0110 5z"
|
|
722
|
-
});
|
|
717
|
+
var _path, _path2;
|
|
723
718
|
|
|
724
|
-
var
|
|
725
|
-
d: "M2 7a.5.5 0 00-.46.31.47.47 0 00.11.54L5.3 11.5a1 1 0 001.41 0l3.65-3.65a.49.49 0 00.11-.54A.53.53 0 0010 7z"
|
|
726
|
-
});
|
|
719
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
727
720
|
|
|
728
|
-
function SvgSortFill(props) {
|
|
721
|
+
var SvgSortFill = function SvgSortFill(props) {
|
|
729
722
|
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
730
723
|
xmlns: "http://www.w3.org/2000/svg",
|
|
731
724
|
width: 12,
|
|
732
725
|
height: 12,
|
|
733
|
-
viewBox: "0 0 12 12",
|
|
734
726
|
focusable: "false",
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
}
|
|
727
|
+
viewBox: "0 0 12 12",
|
|
728
|
+
"aria-hidden": "true"
|
|
729
|
+
}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
|
|
730
|
+
fill: "currentColor",
|
|
731
|
+
d: "M10 5H2a.5.5 0 01-.46-.31.47.47 0 01.11-.54L5.29.5A1 1 0 016.7.5l3.65 3.65a.49.49 0 01.11.54A.51.51 0 0110 5z"
|
|
732
|
+
})), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
|
|
733
|
+
d: "M2 7a.5.5 0 00-.46.31.47.47 0 00.11.54L5.3 11.5a1 1 0 001.41 0l3.65-3.65a.49.49 0 00.11-.54A.53.53 0 0010 7z"
|
|
734
|
+
})));
|
|
735
|
+
};
|
|
738
736
|
|
|
739
737
|
var _excluded = ["sort", "cellProps", "width", "children"];
|
|
740
|
-
var SortableCell =
|
|
738
|
+
var SortableCell = forwardRef(function (_ref, ref) {
|
|
741
739
|
var sort = _ref.sort,
|
|
742
740
|
cellProps = _ref.cellProps,
|
|
743
741
|
width = _ref.width,
|
|
@@ -783,7 +781,8 @@ Table.defaultProps = {
|
|
|
783
781
|
size: 'medium'
|
|
784
782
|
};
|
|
785
783
|
Table.propTypes = {
|
|
786
|
-
size: PropTypes.oneOf(['small', 'medium', 'large'])
|
|
784
|
+
size: PropTypes.oneOf(['small', 'medium', 'large']),
|
|
785
|
+
isReadOnly: PropTypes.bool
|
|
787
786
|
};
|
|
788
787
|
|
|
789
788
|
export { Body, Caption, Cell, GroupRow, Head, HeaderCell, HeaderRow, OverflowButton, Row, SortableCell, Table };
|
|
@@ -4,9 +4,21 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
import React from 'react';
|
|
8
|
-
|
|
7
|
+
import React, { TdHTMLAttributes } from 'react';
|
|
8
|
+
export interface ICellProps extends TdHTMLAttributes<HTMLTableCellElement> {
|
|
9
|
+
/**
|
|
10
|
+
* Applies minimum fixed width styling (e.g. for cells that contain
|
|
11
|
+
* checkboxes or icons)
|
|
12
|
+
*/
|
|
13
|
+
isMinimum?: boolean;
|
|
14
|
+
/** Truncates long text with an ellipsis */
|
|
15
|
+
isTruncated?: boolean;
|
|
16
|
+
/** Applies styling for a cell that contains an overflow menu */
|
|
17
|
+
hasOverflow?: boolean;
|
|
18
|
+
/** Adjusts the [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width) of the cell */
|
|
19
|
+
width?: string | number;
|
|
20
|
+
}
|
|
9
21
|
/**
|
|
10
22
|
* @extends TdHTMLAttributes<HTMLTableCellElement>
|
|
11
23
|
*/
|
|
12
|
-
export declare const Cell: React.ForwardRefExoticComponent<
|
|
24
|
+
export declare const Cell: React.ForwardRefExoticComponent<ICellProps & React.RefAttributes<HTMLTableCellElement>>;
|
|
@@ -4,9 +4,21 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
import React from 'react';
|
|
8
|
-
|
|
7
|
+
import React, { ThHTMLAttributes } from 'react';
|
|
8
|
+
export interface IHeaderCellProps extends ThHTMLAttributes<HTMLTableCellElement> {
|
|
9
|
+
/**
|
|
10
|
+
* Applies minimum fixed width styling (e.g. for cells that contain
|
|
11
|
+
* checkboxes or icons)
|
|
12
|
+
*/
|
|
13
|
+
isMinimum?: boolean;
|
|
14
|
+
/** Truncates long text with an ellipsis */
|
|
15
|
+
isTruncated?: boolean;
|
|
16
|
+
/** Applies styling for a cell that contains an overflow menu */
|
|
17
|
+
hasOverflow?: boolean;
|
|
18
|
+
/** Adjusts the [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width) of the cell */
|
|
19
|
+
width?: string | number;
|
|
20
|
+
}
|
|
9
21
|
/**
|
|
10
|
-
* @extends ThHTMLAttributes<
|
|
22
|
+
* @extends ThHTMLAttributes<HTMLTableCellElement>
|
|
11
23
|
*/
|
|
12
|
-
export declare const HeaderCell: React.ForwardRefExoticComponent<
|
|
24
|
+
export declare const HeaderCell: React.ForwardRefExoticComponent<IHeaderCellProps & React.RefAttributes<HTMLTableCellElement>>;
|
|
@@ -4,9 +4,16 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
import React from 'react';
|
|
8
|
-
|
|
7
|
+
import React, { ButtonHTMLAttributes } from 'react';
|
|
8
|
+
export interface IOverflowButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
9
|
+
/** @ignore Applies hover styling */
|
|
10
|
+
isHovered?: boolean;
|
|
11
|
+
/** @ignore Applies active styling */
|
|
12
|
+
isActive?: boolean;
|
|
13
|
+
/** @ignore Applies focus styling */
|
|
14
|
+
isFocused?: boolean;
|
|
15
|
+
}
|
|
9
16
|
/**
|
|
10
17
|
* @extends ButtonHTMLAttributes<HTMLButtonElement>
|
|
11
18
|
*/
|
|
12
|
-
export declare const OverflowButton: React.ForwardRefExoticComponent<
|
|
19
|
+
export declare const OverflowButton: React.ForwardRefExoticComponent<IOverflowButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -4,9 +4,18 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
import React from 'react';
|
|
8
|
-
|
|
7
|
+
import React, { HTMLAttributes } from 'react';
|
|
8
|
+
export interface IRowProps extends HTMLAttributes<HTMLTableRowElement> {
|
|
9
|
+
/** Applies striped styling */
|
|
10
|
+
isStriped?: boolean;
|
|
11
|
+
/** @ignore Applies focus styling */
|
|
12
|
+
isFocused?: boolean;
|
|
13
|
+
/** @ignore Applies hover styling */
|
|
14
|
+
isHovered?: boolean;
|
|
15
|
+
/** Applies selected styling */
|
|
16
|
+
isSelected?: boolean;
|
|
17
|
+
}
|
|
9
18
|
/**
|
|
10
19
|
* @extends HTMLAttributes<HTMLTableRowElement>
|
|
11
20
|
*/
|
|
12
|
-
export declare const Row: React.ForwardRefExoticComponent<
|
|
21
|
+
export declare const Row: React.ForwardRefExoticComponent<IRowProps & React.RefAttributes<HTMLTableRowElement>>;
|
|
@@ -4,14 +4,17 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
import React from 'react';
|
|
8
|
-
import {
|
|
9
|
-
interface ISortableCellProps extends
|
|
7
|
+
import React, { ButtonHTMLAttributes } from 'react';
|
|
8
|
+
import { SORT } from '../styled';
|
|
9
|
+
export interface ISortableCellProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
10
|
+
/** Sets the sort order */
|
|
11
|
+
sort?: SORT;
|
|
12
|
+
/** Sets the width of the cell */
|
|
13
|
+
width?: string | number;
|
|
10
14
|
/** Passes props to the cell */
|
|
11
15
|
cellProps?: any;
|
|
12
16
|
}
|
|
13
17
|
/**
|
|
14
18
|
* @extends ButtonHTMLAttributes<HTMLButtonElement>
|
|
15
19
|
*/
|
|
16
|
-
export declare const SortableCell: React.ForwardRefExoticComponent<ISortableCellProps & React.
|
|
17
|
-
export {};
|
|
20
|
+
export declare const SortableCell: React.ForwardRefExoticComponent<ISortableCellProps & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -5,8 +5,10 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import React, { TableHTMLAttributes } from 'react';
|
|
8
|
-
import {
|
|
9
|
-
interface ITableProps extends
|
|
8
|
+
import { SIZE } from '../styled';
|
|
9
|
+
export interface ITableProps extends TableHTMLAttributes<HTMLTableElement> {
|
|
10
|
+
/** Sets the table size */
|
|
11
|
+
size?: SIZE;
|
|
10
12
|
/** Removes interactive styling from table rows */
|
|
11
13
|
isReadOnly?: boolean;
|
|
12
14
|
}
|
|
@@ -14,4 +16,3 @@ interface ITableProps extends IStyledTableProps, TableHTMLAttributes<HTMLTableEl
|
|
|
14
16
|
* @extends TableHTMLAttributes<HTMLTableElement>
|
|
15
17
|
*/
|
|
16
18
|
export declare const Table: React.ForwardRefExoticComponent<ITableProps & React.RefAttributes<HTMLTableElement>>;
|
|
17
|
-
export {};
|
package/dist/typings/index.d.ts
CHANGED
|
@@ -7,11 +7,16 @@
|
|
|
7
7
|
export { Body } from './elements/Body';
|
|
8
8
|
export { Caption } from './elements/Caption';
|
|
9
9
|
export { Cell } from './elements/Cell';
|
|
10
|
+
export type { ICellProps } from './elements/Cell';
|
|
10
11
|
export { GroupRow } from './elements/GroupRow';
|
|
11
12
|
export { Head } from './elements/Head';
|
|
12
13
|
export { HeaderCell } from './elements/HeaderCell';
|
|
14
|
+
export type { IHeaderCellProps } from './elements/HeaderCell';
|
|
13
15
|
export { HeaderRow } from './elements/HeaderRow';
|
|
14
16
|
export { OverflowButton } from './elements/OverflowButton';
|
|
15
17
|
export { Row } from './elements/Row';
|
|
18
|
+
export type { IRowProps } from './elements/Row';
|
|
16
19
|
export { SortableCell } from './elements/SortableCell';
|
|
20
|
+
export type { ISortableCellProps } from './elements/SortableCell';
|
|
17
21
|
export { Table } from './elements/Table';
|
|
22
|
+
export type { ITableProps } from './elements/Table';
|
|
@@ -7,18 +7,10 @@
|
|
|
7
7
|
import { DefaultTheme } from 'styled-components';
|
|
8
8
|
import { SIZE } from './StyledTable';
|
|
9
9
|
export interface IStyledCellProps {
|
|
10
|
-
/**
|
|
11
|
-
* Applies minimum fixed width styling (e.g. for cells that contain
|
|
12
|
-
* checkboxes or icons)
|
|
13
|
-
*/
|
|
14
10
|
isMinimum?: boolean;
|
|
15
|
-
/** Truncates long text with an ellipsis */
|
|
16
11
|
isTruncated?: boolean;
|
|
17
|
-
/** Applies styling for a cell that contains an overflow menu */
|
|
18
12
|
hasOverflow?: boolean;
|
|
19
|
-
/** Adjusts the [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width) of the cell */
|
|
20
13
|
width?: string | number;
|
|
21
|
-
/** Adjusts the vertical padding of the cell */
|
|
22
14
|
size: SIZE;
|
|
23
15
|
}
|
|
24
16
|
export declare const StyledCell: import("styled-components").StyledComponent<"td", DefaultTheme, IStyledCellProps, never>;
|
|
@@ -10,4 +10,4 @@ export declare const StyledHeaderCell: import("styled-components").StyledCompone
|
|
|
10
10
|
as: string;
|
|
11
11
|
'data-garden-id': string;
|
|
12
12
|
'data-garden-version': string;
|
|
13
|
-
}, "
|
|
13
|
+
}, "data-garden-id" | "data-garden-version" | "as">;
|
|
@@ -6,14 +6,10 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import { DefaultTheme } from 'styled-components';
|
|
8
8
|
import { SIZE } from './StyledTable';
|
|
9
|
-
|
|
10
|
-
/** Applies hover styling */
|
|
9
|
+
interface IStyledOverflowButtonProps {
|
|
11
10
|
isHovered?: boolean;
|
|
12
|
-
/** Applies active styling */
|
|
13
11
|
isActive?: boolean;
|
|
14
|
-
/** Applies focus styling */
|
|
15
12
|
isFocused?: boolean;
|
|
16
|
-
/** Sets the size */
|
|
17
13
|
size: SIZE;
|
|
18
14
|
}
|
|
19
15
|
/**
|
|
@@ -22,3 +18,4 @@ export interface IStyledOverflowButtonProps {
|
|
|
22
18
|
*/
|
|
23
19
|
export declare const StyledOverflowButton: import("styled-components").StyledComponent<"button", DefaultTheme, IStyledOverflowButtonProps, never>;
|
|
24
20
|
export declare const StyledOverflowButtonIconWrapper: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
|
|
21
|
+
export {};
|
|
@@ -7,17 +7,11 @@
|
|
|
7
7
|
import { DefaultTheme } from 'styled-components';
|
|
8
8
|
import { SIZE } from './StyledTable';
|
|
9
9
|
export interface IStyledRowProps {
|
|
10
|
-
/** Applies striped styling */
|
|
11
10
|
isStriped?: boolean;
|
|
12
|
-
/** Applies focus styling */
|
|
13
11
|
isFocused?: boolean;
|
|
14
|
-
/** Applies hover styling */
|
|
15
12
|
isHovered?: boolean;
|
|
16
|
-
/** Applies selected styling */
|
|
17
13
|
isSelected?: boolean;
|
|
18
|
-
/** Removes interactive styling */
|
|
19
14
|
isReadOnly?: boolean;
|
|
20
|
-
/** Adjusts vertical padding */
|
|
21
15
|
size: SIZE;
|
|
22
16
|
}
|
|
23
17
|
export declare const StyledBaseRow: import("styled-components").StyledComponent<"tr", DefaultTheme, IStyledRowProps, never>;
|
|
@@ -4,13 +4,11 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
declare type SORT = 'asc' | 'desc';
|
|
7
|
+
export declare type SORT = 'asc' | 'desc';
|
|
8
8
|
export declare const StyledSortableStrokeIconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
9
9
|
export declare const StyledSortableFillIconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
10
|
-
|
|
11
|
-
/** Sets the sort order */
|
|
10
|
+
interface IStyledSortableButtonProps {
|
|
12
11
|
sort?: SORT;
|
|
13
|
-
/** Sets the width of the cell */
|
|
14
12
|
width?: string | number;
|
|
15
13
|
}
|
|
16
14
|
/**
|
|
@@ -6,8 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import { ThemeProps, DefaultTheme } from 'styled-components';
|
|
8
8
|
export declare type SIZE = 'small' | 'medium' | 'large';
|
|
9
|
-
|
|
10
|
-
/** Sets the table size */
|
|
9
|
+
interface IStyledTableProps {
|
|
11
10
|
size?: SIZE;
|
|
12
11
|
}
|
|
13
12
|
export declare const getLineHeight: (props: ThemeProps<DefaultTheme>) => string;
|
|
@@ -15,3 +14,4 @@ export declare const getLineHeight: (props: ThemeProps<DefaultTheme>) => string;
|
|
|
15
14
|
* 1. <table> reset
|
|
16
15
|
*/
|
|
17
16
|
export declare const StyledTable: import("styled-components").StyledComponent<"table", DefaultTheme, IStyledTableProps, never>;
|
|
17
|
+
export {};
|
|
@@ -9,14 +9,9 @@ export { StyledCaption } from './StyledCaption';
|
|
|
9
9
|
export { StyledHeaderRow } from './StyledHeaderRow';
|
|
10
10
|
export { StyledHead } from './StyledHead';
|
|
11
11
|
export { StyledCell } from './StyledCell';
|
|
12
|
-
export type { IStyledCellProps } from './StyledCell';
|
|
13
12
|
export { StyledGroupRow } from './StyledGroupRow';
|
|
14
|
-
export { StyledTable } from './StyledTable';
|
|
15
|
-
export type { IStyledTableProps } from './StyledTable';
|
|
13
|
+
export { StyledTable, SIZE } from './StyledTable';
|
|
16
14
|
export { StyledHeaderCell } from './StyledHeaderCell';
|
|
17
|
-
export { StyledSortableButton, StyledSortableFillIconWrapper, StyledSortableStrokeIconWrapper } from './StyledSortableButton';
|
|
18
|
-
export type { IStyledSortableButtonProps } from './StyledSortableButton';
|
|
15
|
+
export { StyledSortableButton, StyledSortableFillIconWrapper, StyledSortableStrokeIconWrapper, SORT } from './StyledSortableButton';
|
|
19
16
|
export { StyledOverflowButton, StyledOverflowButtonIconWrapper } from './StyledOverflowButton';
|
|
20
|
-
export type { IStyledOverflowButtonProps } from './StyledOverflowButton';
|
|
21
17
|
export { StyledRow } from './StyledRow';
|
|
22
|
-
export type { IStyledRowProps } from './StyledRow';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-tables",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.48.1",
|
|
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>",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"sideEffects": false,
|
|
22
22
|
"types": "dist/typings/index.d.ts",
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@zendeskgarden/container-utilities": "^0.
|
|
24
|
+
"@zendeskgarden/container-utilities": "^0.7.0",
|
|
25
25
|
"dom-helpers": "^5.1.0",
|
|
26
26
|
"polished": "^4.0.0",
|
|
27
27
|
"prop-types": "^15.5.7"
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@types/react-beautiful-dnd": "13.1.2",
|
|
37
37
|
"@types/react-window": "1.8.5",
|
|
38
|
-
"@zendeskgarden/react-theming": "^8.
|
|
38
|
+
"@zendeskgarden/react-theming": "^8.48.1",
|
|
39
39
|
"@zendeskgarden/svg-icons": "6.30.2",
|
|
40
40
|
"react-beautiful-dnd": "13.1.0",
|
|
41
41
|
"react-window": "1.8.6"
|
|
@@ -50,5 +50,5 @@
|
|
|
50
50
|
"access": "public"
|
|
51
51
|
},
|
|
52
52
|
"zendeskgarden:src": "src/index.ts",
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "82c621bfbc943904baa6647a2f5e89d3271d7edf"
|
|
54
54
|
}
|