@zendeskgarden/react-tables 8.47.2 → 8.48.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +21 -20
- package/dist/index.esm.js +22 -21
- package/dist/typings/elements/Cell.d.ts +1 -2
- 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 -4
- package/dist/typings/elements/Table.d.ts +4 -2
- package/dist/typings/index.d.ts +2 -0
- package/dist/typings/styled/StyledCell.d.ts +0 -8
- 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 +3 -3
package/dist/index.cjs.js
CHANGED
|
@@ -157,7 +157,7 @@ function _nonIterableRest() {
|
|
|
157
157
|
var COMPONENT_ID$a = 'tables.body';
|
|
158
158
|
var StyledBody = styled__default["default"].tbody.attrs({
|
|
159
159
|
'data-garden-id': COMPONENT_ID$a,
|
|
160
|
-
'data-garden-version': '8.
|
|
160
|
+
'data-garden-version': '8.48.0'
|
|
161
161
|
}).withConfig({
|
|
162
162
|
displayName: "StyledBody",
|
|
163
163
|
componentId: "sc-14ud6y-0"
|
|
@@ -171,7 +171,7 @@ StyledBody.defaultProps = {
|
|
|
171
171
|
var COMPONENT_ID$9 = 'tables.caption';
|
|
172
172
|
var StyledCaption = styled__default["default"].caption.attrs({
|
|
173
173
|
'data-garden-id': COMPONENT_ID$9,
|
|
174
|
-
'data-garden-version': '8.
|
|
174
|
+
'data-garden-version': '8.48.0'
|
|
175
175
|
}).withConfig({
|
|
176
176
|
displayName: "StyledCaption",
|
|
177
177
|
componentId: "sc-113y327-0"
|
|
@@ -190,7 +190,7 @@ var getLineHeight = function getLineHeight(props) {
|
|
|
190
190
|
};
|
|
191
191
|
var StyledTable = styled__default["default"].table.attrs({
|
|
192
192
|
'data-garden-id': COMPONENT_ID$8,
|
|
193
|
-
'data-garden-version': '8.
|
|
193
|
+
'data-garden-version': '8.48.0'
|
|
194
194
|
}).withConfig({
|
|
195
195
|
displayName: "StyledTable",
|
|
196
196
|
componentId: "sc-gje7na-0"
|
|
@@ -243,7 +243,7 @@ var sizeStyling = function sizeStyling(props) {
|
|
|
243
243
|
};
|
|
244
244
|
var StyledCell = styled__default["default"].td.attrs({
|
|
245
245
|
'data-garden-id': COMPONENT_ID$7,
|
|
246
|
-
'data-garden-version': '8.
|
|
246
|
+
'data-garden-version': '8.48.0'
|
|
247
247
|
}).withConfig({
|
|
248
248
|
displayName: "StyledCell",
|
|
249
249
|
componentId: "sc-8hpncx-0"
|
|
@@ -278,7 +278,7 @@ var colorStyles$1 = function colorStyles(props) {
|
|
|
278
278
|
};
|
|
279
279
|
var StyledOverflowButton = styled__default["default"].button.attrs({
|
|
280
280
|
'data-garden-id': COMPONENT_ID$6,
|
|
281
|
-
'data-garden-version': '8.
|
|
281
|
+
'data-garden-version': '8.48.0',
|
|
282
282
|
type: 'button'
|
|
283
283
|
}).withConfig({
|
|
284
284
|
displayName: "StyledOverflowButton",
|
|
@@ -349,7 +349,7 @@ var colorStyles = function colorStyles(props) {
|
|
|
349
349
|
var StyledRow = styled__default["default"](StyledBaseRow).attrs(function (props) {
|
|
350
350
|
return {
|
|
351
351
|
'data-garden-id': COMPONENT_ID$5,
|
|
352
|
-
'data-garden-version': '8.
|
|
352
|
+
'data-garden-version': '8.48.0',
|
|
353
353
|
tabIndex: props.isReadOnly ? undefined : -1
|
|
354
354
|
};
|
|
355
355
|
}).withConfig({
|
|
@@ -375,7 +375,7 @@ var getHeaderRowHeight = function getHeaderRowHeight(props) {
|
|
|
375
375
|
};
|
|
376
376
|
var StyledHeaderRow = styled__default["default"](StyledBaseRow).attrs({
|
|
377
377
|
'data-garden-id': COMPONENT_ID$4,
|
|
378
|
-
'data-garden-version': '8.
|
|
378
|
+
'data-garden-version': '8.48.0'
|
|
379
379
|
}).withConfig({
|
|
380
380
|
displayName: "StyledHeaderRow",
|
|
381
381
|
componentId: "sc-16ogvdx-0"
|
|
@@ -395,7 +395,7 @@ StyledHeaderRow.defaultProps = {
|
|
|
395
395
|
var COMPONENT_ID$3 = 'tables.head';
|
|
396
396
|
var StyledHead = styled__default["default"].thead.attrs({
|
|
397
397
|
'data-garden-id': COMPONENT_ID$3,
|
|
398
|
-
'data-garden-version': '8.
|
|
398
|
+
'data-garden-version': '8.48.0'
|
|
399
399
|
}).withConfig({
|
|
400
400
|
displayName: "StyledHead",
|
|
401
401
|
componentId: "sc-spf23a-0"
|
|
@@ -414,7 +414,7 @@ var sizeStyles$1 = function sizeStyles(props) {
|
|
|
414
414
|
};
|
|
415
415
|
var StyledGroupRow = styled__default["default"](StyledBaseRow).attrs({
|
|
416
416
|
'data-garden-id': COMPONENT_ID$2,
|
|
417
|
-
'data-garden-version': '8.
|
|
417
|
+
'data-garden-version': '8.48.0'
|
|
418
418
|
}).withConfig({
|
|
419
419
|
displayName: "StyledGroupRow",
|
|
420
420
|
componentId: "sc-mpd0r8-0"
|
|
@@ -457,7 +457,7 @@ StyledSortableFillIconWrapper.defaultProps = {
|
|
|
457
457
|
};
|
|
458
458
|
var StyledSortableButton = styled__default["default"].button.attrs({
|
|
459
459
|
'data-garden-id': COMPONENT_ID$1,
|
|
460
|
-
'data-garden-version': '8.
|
|
460
|
+
'data-garden-version': '8.48.0',
|
|
461
461
|
type: 'button'
|
|
462
462
|
}).withConfig({
|
|
463
463
|
displayName: "StyledSortableButton",
|
|
@@ -515,7 +515,7 @@ var sizeStyles = function sizeStyles(props) {
|
|
|
515
515
|
var StyledHeaderCell = styled__default["default"](StyledCell).attrs({
|
|
516
516
|
as: 'th',
|
|
517
517
|
'data-garden-id': COMPONENT_ID,
|
|
518
|
-
'data-garden-version': '8.
|
|
518
|
+
'data-garden-version': '8.48.0'
|
|
519
519
|
}).withConfig({
|
|
520
520
|
displayName: "StyledHeaderCell",
|
|
521
521
|
componentId: "sc-fzagoe-0"
|
|
@@ -538,14 +538,14 @@ StyledHeaderCell.defaultProps = {
|
|
|
538
538
|
theme: reactTheming.DEFAULT_THEME
|
|
539
539
|
};
|
|
540
540
|
|
|
541
|
-
var Body =
|
|
541
|
+
var Body = React.forwardRef(function (props, ref) {
|
|
542
542
|
return React__default["default"].createElement(StyledBody, _extends$3({
|
|
543
543
|
ref: ref
|
|
544
544
|
}, props));
|
|
545
545
|
});
|
|
546
546
|
Body.displayName = 'Body';
|
|
547
547
|
|
|
548
|
-
var Caption =
|
|
548
|
+
var Caption = React.forwardRef(function (props, ref) {
|
|
549
549
|
return React__default["default"].createElement(StyledCaption, _extends$3({
|
|
550
550
|
ref: ref
|
|
551
551
|
}, props));
|
|
@@ -576,7 +576,7 @@ Cell.propTypes = {
|
|
|
576
576
|
width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
|
|
577
577
|
};
|
|
578
578
|
|
|
579
|
-
var GroupRow =
|
|
579
|
+
var GroupRow = React.forwardRef(function (props, ref) {
|
|
580
580
|
var _useTableContext = useTableContext(),
|
|
581
581
|
size = _useTableContext.size;
|
|
582
582
|
return React__default["default"].createElement(StyledGroupRow, _extends$3({
|
|
@@ -586,14 +586,14 @@ var GroupRow = React__default["default"].forwardRef(function (props, ref) {
|
|
|
586
586
|
});
|
|
587
587
|
GroupRow.displayName = 'GroupRow';
|
|
588
588
|
|
|
589
|
-
var Head =
|
|
589
|
+
var Head = React.forwardRef(function (props, ref) {
|
|
590
590
|
return React__default["default"].createElement(StyledHead, _extends$3({
|
|
591
591
|
ref: ref
|
|
592
592
|
}, props));
|
|
593
593
|
});
|
|
594
594
|
Head.displayName = 'Head';
|
|
595
595
|
|
|
596
|
-
var HeaderCell =
|
|
596
|
+
var HeaderCell = React.forwardRef(function (props, ref) {
|
|
597
597
|
var _useTableContext = useTableContext(),
|
|
598
598
|
size = _useTableContext.size;
|
|
599
599
|
return React__default["default"].createElement(StyledHeaderCell, _extends$3({
|
|
@@ -649,7 +649,7 @@ var SvgOverflowStroke = function SvgOverflowStroke(props) {
|
|
|
649
649
|
};
|
|
650
650
|
|
|
651
651
|
var _excluded$2 = ["onFocus", "onBlur", "isFocused"];
|
|
652
|
-
var OverflowButton =
|
|
652
|
+
var OverflowButton = React.forwardRef(function (_ref, ref) {
|
|
653
653
|
var onFocus = _ref.onFocus,
|
|
654
654
|
onBlur = _ref.onBlur,
|
|
655
655
|
focused = _ref.isFocused,
|
|
@@ -680,7 +680,7 @@ OverflowButton.propTypes = {
|
|
|
680
680
|
};
|
|
681
681
|
|
|
682
682
|
var _excluded$1 = ["onFocus", "onBlur", "isFocused"];
|
|
683
|
-
var Row =
|
|
683
|
+
var Row = React.forwardRef(function (_ref, ref) {
|
|
684
684
|
var onFocus = _ref.onFocus,
|
|
685
685
|
onBlur = _ref.onBlur,
|
|
686
686
|
focused = _ref.isFocused,
|
|
@@ -763,7 +763,7 @@ var SvgSortFill = function SvgSortFill(props) {
|
|
|
763
763
|
};
|
|
764
764
|
|
|
765
765
|
var _excluded = ["sort", "cellProps", "width", "children"];
|
|
766
|
-
var SortableCell =
|
|
766
|
+
var SortableCell = React.forwardRef(function (_ref, ref) {
|
|
767
767
|
var sort = _ref.sort,
|
|
768
768
|
cellProps = _ref.cellProps,
|
|
769
769
|
width = _ref.width,
|
|
@@ -809,7 +809,8 @@ Table.defaultProps = {
|
|
|
809
809
|
size: 'medium'
|
|
810
810
|
};
|
|
811
811
|
Table.propTypes = {
|
|
812
|
-
size: PropTypes__default["default"].oneOf(['small', 'medium', 'large'])
|
|
812
|
+
size: PropTypes__default["default"].oneOf(['small', 'medium', 'large']),
|
|
813
|
+
isReadOnly: PropTypes__default["default"].bool
|
|
813
814
|
};
|
|
814
815
|
|
|
815
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.0'
|
|
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.0'
|
|
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.0'
|
|
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.0'
|
|
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.0',
|
|
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.0',
|
|
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.0'
|
|
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.0'
|
|
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.0'
|
|
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.0',
|
|
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.0'
|
|
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({
|
|
@@ -621,7 +621,7 @@ var SvgOverflowStroke = function SvgOverflowStroke(props) {
|
|
|
621
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,
|
|
@@ -735,7 +735,7 @@ var SvgSortFill = function SvgSortFill(props) {
|
|
|
735
735
|
};
|
|
736
736
|
|
|
737
737
|
var _excluded = ["sort", "cellProps", "width", "children"];
|
|
738
|
-
var SortableCell =
|
|
738
|
+
var SortableCell = forwardRef(function (_ref, ref) {
|
|
739
739
|
var sort = _ref.sort,
|
|
740
740
|
cellProps = _ref.cellProps,
|
|
741
741
|
width = _ref.width,
|
|
@@ -781,7 +781,8 @@ Table.defaultProps = {
|
|
|
781
781
|
size: 'medium'
|
|
782
782
|
};
|
|
783
783
|
Table.propTypes = {
|
|
784
|
-
size: PropTypes.oneOf(['small', 'medium', 'large'])
|
|
784
|
+
size: PropTypes.oneOf(['small', 'medium', 'large']),
|
|
785
|
+
isReadOnly: PropTypes.bool
|
|
785
786
|
};
|
|
786
787
|
|
|
787
788
|
export { Body, Caption, Cell, GroupRow, Head, HeaderCell, HeaderRow, OverflowButton, Row, SortableCell, Table };
|
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import React, { TdHTMLAttributes } from 'react';
|
|
8
|
-
import { IStyledCellProps } from '../styled';
|
|
9
8
|
export interface ICellProps extends TdHTMLAttributes<HTMLTableCellElement> {
|
|
10
9
|
/**
|
|
11
10
|
* Applies minimum fixed width styling (e.g. for cells that contain
|
|
@@ -17,7 +16,7 @@ export interface ICellProps extends TdHTMLAttributes<HTMLTableCellElement> {
|
|
|
17
16
|
/** Applies styling for a cell that contains an overflow menu */
|
|
18
17
|
hasOverflow?: boolean;
|
|
19
18
|
/** Adjusts the [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width) of the cell */
|
|
20
|
-
width?:
|
|
19
|
+
width?: string | number;
|
|
21
20
|
}
|
|
22
21
|
/**
|
|
23
22
|
* @extends TdHTMLAttributes<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,13 +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
|
-
export 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.
|
|
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
|
-
export 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
|
}
|
package/dist/typings/index.d.ts
CHANGED
|
@@ -11,9 +11,11 @@ export type { ICellProps } from './elements/Cell';
|
|
|
11
11
|
export { GroupRow } from './elements/GroupRow';
|
|
12
12
|
export { Head } from './elements/Head';
|
|
13
13
|
export { HeaderCell } from './elements/HeaderCell';
|
|
14
|
+
export type { IHeaderCellProps } from './elements/HeaderCell';
|
|
14
15
|
export { HeaderRow } from './elements/HeaderRow';
|
|
15
16
|
export { OverflowButton } from './elements/OverflowButton';
|
|
16
17
|
export { Row } from './elements/Row';
|
|
18
|
+
export type { IRowProps } from './elements/Row';
|
|
17
19
|
export { SortableCell } from './elements/SortableCell';
|
|
18
20
|
export type { ISortableCellProps } from './elements/SortableCell';
|
|
19
21
|
export { Table } 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>;
|
|
@@ -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.0",
|
|
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.2",
|
|
37
37
|
"@types/react-window": "1.8.5",
|
|
38
|
-
"@zendeskgarden/react-theming": "^8.
|
|
38
|
+
"@zendeskgarden/react-theming": "^8.48.0",
|
|
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": "75f36aee62043004650c3eb2e1583b98a87d71f8"
|
|
54
54
|
}
|