@zendeskgarden/react-tables 8.49.0 → 8.49.3
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 +17 -19
- package/dist/index.esm.js +17 -19
- package/dist/typings/elements/Cell.d.ts +2 -14
- package/dist/typings/elements/HeaderCell.d.ts +2 -14
- package/dist/typings/elements/Row.d.ts +2 -11
- package/dist/typings/elements/SortableCell.d.ts +2 -10
- package/dist/typings/elements/Table.d.ts +2 -8
- package/dist/typings/index.d.ts +1 -5
- package/dist/typings/styled/StyledCell.d.ts +3 -7
- package/dist/typings/styled/StyledOverflowButton.d.ts +2 -2
- package/dist/typings/styled/StyledRow.d.ts +3 -3
- package/dist/typings/styled/StyledSortableButton.d.ts +3 -3
- package/dist/typings/styled/StyledTable.d.ts +2 -2
- package/dist/typings/styled/index.d.ts +2 -2
- package/dist/typings/styled/style-utils.d.ts +2 -2
- package/dist/typings/types/index.d.ts +48 -0
- package/dist/typings/utils/useTableContext.d.ts +3 -3
- package/package.json +4 -4
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.49.
|
|
160
|
+
'data-garden-version': '8.49.3'
|
|
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.49.
|
|
174
|
+
'data-garden-version': '8.49.3'
|
|
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.49.
|
|
193
|
+
'data-garden-version': '8.49.3'
|
|
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.49.
|
|
246
|
+
'data-garden-version': '8.49.3'
|
|
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.49.
|
|
281
|
+
'data-garden-version': '8.49.3',
|
|
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.49.
|
|
352
|
+
'data-garden-version': '8.49.3',
|
|
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.49.
|
|
378
|
+
'data-garden-version': '8.49.3'
|
|
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.49.
|
|
398
|
+
'data-garden-version': '8.49.3'
|
|
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.49.
|
|
417
|
+
'data-garden-version': '8.49.3'
|
|
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.49.
|
|
460
|
+
'data-garden-version': '8.49.3',
|
|
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.49.
|
|
518
|
+
'data-garden-version': '8.49.3'
|
|
519
519
|
}).withConfig({
|
|
520
520
|
displayName: "StyledHeaderCell",
|
|
521
521
|
componentId: "sc-fzagoe-0"
|
|
@@ -602,12 +602,7 @@ var HeaderCell = React.forwardRef(function (props, ref) {
|
|
|
602
602
|
}, props));
|
|
603
603
|
});
|
|
604
604
|
HeaderCell.displayName = 'HeaderCell';
|
|
605
|
-
HeaderCell.propTypes =
|
|
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])
|
|
610
|
-
};
|
|
605
|
+
HeaderCell.propTypes = Cell.propTypes;
|
|
611
606
|
|
|
612
607
|
var HeaderRow = React__default["default"].forwardRef(function (props, ref) {
|
|
613
608
|
var _useTableContext = useTableContext(),
|
|
@@ -762,6 +757,9 @@ var SvgSortFill = function SvgSortFill(props) {
|
|
|
762
757
|
})));
|
|
763
758
|
};
|
|
764
759
|
|
|
760
|
+
var SIZE = ['small', 'medium', 'large'];
|
|
761
|
+
var SORT = ['asc', 'desc'];
|
|
762
|
+
|
|
765
763
|
var _excluded = ["sort", "cellProps", "width", "children"];
|
|
766
764
|
var SortableCell = React.forwardRef(function (_ref, ref) {
|
|
767
765
|
var sort = _ref.sort,
|
|
@@ -786,7 +784,7 @@ var SortableCell = React.forwardRef(function (_ref, ref) {
|
|
|
786
784
|
});
|
|
787
785
|
SortableCell.displayName = 'SortableCell';
|
|
788
786
|
SortableCell.propTypes = {
|
|
789
|
-
sort: PropTypes__default["default"].oneOf(
|
|
787
|
+
sort: PropTypes__default["default"].oneOf(SORT),
|
|
790
788
|
cellProps: PropTypes__default["default"].any,
|
|
791
789
|
width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
|
|
792
790
|
};
|
|
@@ -809,7 +807,7 @@ Table.defaultProps = {
|
|
|
809
807
|
size: 'medium'
|
|
810
808
|
};
|
|
811
809
|
Table.propTypes = {
|
|
812
|
-
size: PropTypes__default["default"].oneOf(
|
|
810
|
+
size: PropTypes__default["default"].oneOf(SIZE),
|
|
813
811
|
isReadOnly: PropTypes__default["default"].bool
|
|
814
812
|
};
|
|
815
813
|
|
package/dist/index.esm.js
CHANGED
|
@@ -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.49.
|
|
132
|
+
'data-garden-version': '8.49.3'
|
|
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.49.
|
|
146
|
+
'data-garden-version': '8.49.3'
|
|
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.49.
|
|
165
|
+
'data-garden-version': '8.49.3'
|
|
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.49.
|
|
218
|
+
'data-garden-version': '8.49.3'
|
|
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.49.
|
|
253
|
+
'data-garden-version': '8.49.3',
|
|
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.49.
|
|
324
|
+
'data-garden-version': '8.49.3',
|
|
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.49.
|
|
350
|
+
'data-garden-version': '8.49.3'
|
|
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.49.
|
|
370
|
+
'data-garden-version': '8.49.3'
|
|
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.49.
|
|
389
|
+
'data-garden-version': '8.49.3'
|
|
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.49.
|
|
432
|
+
'data-garden-version': '8.49.3',
|
|
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.49.
|
|
490
|
+
'data-garden-version': '8.49.3'
|
|
491
491
|
}).withConfig({
|
|
492
492
|
displayName: "StyledHeaderCell",
|
|
493
493
|
componentId: "sc-fzagoe-0"
|
|
@@ -574,12 +574,7 @@ var HeaderCell = forwardRef(function (props, ref) {
|
|
|
574
574
|
}, props));
|
|
575
575
|
});
|
|
576
576
|
HeaderCell.displayName = 'HeaderCell';
|
|
577
|
-
HeaderCell.propTypes =
|
|
578
|
-
isMinimum: PropTypes.bool,
|
|
579
|
-
isTruncated: PropTypes.bool,
|
|
580
|
-
hasOverflow: PropTypes.bool,
|
|
581
|
-
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
|
|
582
|
-
};
|
|
577
|
+
HeaderCell.propTypes = Cell.propTypes;
|
|
583
578
|
|
|
584
579
|
var HeaderRow = React__default.forwardRef(function (props, ref) {
|
|
585
580
|
var _useTableContext = useTableContext(),
|
|
@@ -734,6 +729,9 @@ var SvgSortFill = function SvgSortFill(props) {
|
|
|
734
729
|
})));
|
|
735
730
|
};
|
|
736
731
|
|
|
732
|
+
var SIZE = ['small', 'medium', 'large'];
|
|
733
|
+
var SORT = ['asc', 'desc'];
|
|
734
|
+
|
|
737
735
|
var _excluded = ["sort", "cellProps", "width", "children"];
|
|
738
736
|
var SortableCell = forwardRef(function (_ref, ref) {
|
|
739
737
|
var sort = _ref.sort,
|
|
@@ -758,7 +756,7 @@ var SortableCell = forwardRef(function (_ref, ref) {
|
|
|
758
756
|
});
|
|
759
757
|
SortableCell.displayName = 'SortableCell';
|
|
760
758
|
SortableCell.propTypes = {
|
|
761
|
-
sort: PropTypes.oneOf(
|
|
759
|
+
sort: PropTypes.oneOf(SORT),
|
|
762
760
|
cellProps: PropTypes.any,
|
|
763
761
|
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
|
|
764
762
|
};
|
|
@@ -781,7 +779,7 @@ Table.defaultProps = {
|
|
|
781
779
|
size: 'medium'
|
|
782
780
|
};
|
|
783
781
|
Table.propTypes = {
|
|
784
|
-
size: PropTypes.oneOf(
|
|
782
|
+
size: PropTypes.oneOf(SIZE),
|
|
785
783
|
isReadOnly: PropTypes.bool
|
|
786
784
|
};
|
|
787
785
|
|
|
@@ -4,20 +4,8 @@
|
|
|
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
|
|
8
|
-
|
|
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
|
-
}
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import { ICellProps } from '../types';
|
|
21
9
|
/**
|
|
22
10
|
* @extends TdHTMLAttributes<HTMLTableCellElement>
|
|
23
11
|
*/
|
|
@@ -4,20 +4,8 @@
|
|
|
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
|
|
8
|
-
|
|
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
|
-
}
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import { IHeaderCellProps } from '../types';
|
|
21
9
|
/**
|
|
22
10
|
* @extends ThHTMLAttributes<HTMLTableCellElement>
|
|
23
11
|
*/
|
|
@@ -4,17 +4,8 @@
|
|
|
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
|
|
8
|
-
|
|
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
|
-
}
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import { IRowProps } from '../types';
|
|
18
9
|
/**
|
|
19
10
|
* @extends HTMLAttributes<HTMLTableRowElement>
|
|
20
11
|
*/
|
|
@@ -4,16 +4,8 @@
|
|
|
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
|
|
8
|
-
import {
|
|
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;
|
|
14
|
-
/** Passes props to the cell */
|
|
15
|
-
cellProps?: any;
|
|
16
|
-
}
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import { ISortableCellProps } from '../types';
|
|
17
9
|
/**
|
|
18
10
|
* @extends ButtonHTMLAttributes<HTMLButtonElement>
|
|
19
11
|
*/
|
|
@@ -4,14 +4,8 @@
|
|
|
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
|
|
8
|
-
import {
|
|
9
|
-
export interface ITableProps extends TableHTMLAttributes<HTMLTableElement> {
|
|
10
|
-
/** Sets the table size */
|
|
11
|
-
size?: SIZE;
|
|
12
|
-
/** Removes interactive styling from table rows */
|
|
13
|
-
isReadOnly?: boolean;
|
|
14
|
-
}
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import { ITableProps } from '../types';
|
|
15
9
|
/**
|
|
16
10
|
* @extends TableHTMLAttributes<HTMLTableElement>
|
|
17
11
|
*/
|
package/dist/typings/index.d.ts
CHANGED
|
@@ -7,16 +7,12 @@
|
|
|
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';
|
|
11
10
|
export { GroupRow } from './elements/GroupRow';
|
|
12
11
|
export { Head } from './elements/Head';
|
|
13
12
|
export { HeaderCell } from './elements/HeaderCell';
|
|
14
|
-
export type { IHeaderCellProps } from './elements/HeaderCell';
|
|
15
13
|
export { HeaderRow } from './elements/HeaderRow';
|
|
16
14
|
export { OverflowButton } from './elements/OverflowButton';
|
|
17
15
|
export { Row } from './elements/Row';
|
|
18
|
-
export type { IRowProps } from './elements/Row';
|
|
19
16
|
export { SortableCell } from './elements/SortableCell';
|
|
20
|
-
export type { ISortableCellProps } from './elements/SortableCell';
|
|
21
17
|
export { Table } from './elements/Table';
|
|
22
|
-
export type { ITableProps } from './
|
|
18
|
+
export type { ITableProps, IRowProps, ICellProps, IHeaderCellProps, ISortableCellProps } from './types';
|
|
@@ -5,12 +5,8 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import { DefaultTheme } from 'styled-components';
|
|
8
|
-
import {
|
|
9
|
-
export interface IStyledCellProps {
|
|
10
|
-
|
|
11
|
-
isTruncated?: boolean;
|
|
12
|
-
hasOverflow?: boolean;
|
|
13
|
-
width?: string | number;
|
|
14
|
-
size: SIZE;
|
|
8
|
+
import { ICellProps, ITableProps } from '../types';
|
|
9
|
+
export interface IStyledCellProps extends Pick<ICellProps, 'isMinimum' | 'isTruncated' | 'hasOverflow' | 'width'> {
|
|
10
|
+
size?: ITableProps['size'];
|
|
15
11
|
}
|
|
16
12
|
export declare const StyledCell: import("styled-components").StyledComponent<"td", DefaultTheme, IStyledCellProps, never>;
|
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import { DefaultTheme } from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { ITableProps } from '../types';
|
|
9
9
|
interface IStyledOverflowButtonProps {
|
|
10
10
|
isHovered?: boolean;
|
|
11
11
|
isActive?: boolean;
|
|
12
12
|
isFocused?: boolean;
|
|
13
|
-
size
|
|
13
|
+
size?: ITableProps['size'];
|
|
14
14
|
}
|
|
15
15
|
/**
|
|
16
16
|
* 1. Reset for <button> element
|
|
@@ -5,14 +5,14 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import { DefaultTheme } from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { ITableProps } from '../types';
|
|
9
9
|
export interface IStyledRowProps {
|
|
10
10
|
isStriped?: boolean;
|
|
11
11
|
isFocused?: boolean;
|
|
12
12
|
isHovered?: boolean;
|
|
13
13
|
isSelected?: boolean;
|
|
14
|
-
isReadOnly?:
|
|
15
|
-
size
|
|
14
|
+
isReadOnly?: ITableProps['isReadOnly'];
|
|
15
|
+
size?: ITableProps['size'];
|
|
16
16
|
}
|
|
17
17
|
export declare const StyledBaseRow: import("styled-components").StyledComponent<"tr", DefaultTheme, IStyledRowProps, never>;
|
|
18
18
|
export declare const StyledRow: import("styled-components").StyledComponent<"tr", DefaultTheme, IStyledRowProps, never>;
|
|
@@ -4,12 +4,12 @@
|
|
|
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
|
-
|
|
7
|
+
import { ISortableCellProps } from '../types';
|
|
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
10
|
interface IStyledSortableButtonProps {
|
|
11
|
-
sort?:
|
|
12
|
-
width?:
|
|
11
|
+
sort?: ISortableCellProps['sort'];
|
|
12
|
+
width?: ISortableCellProps['width'];
|
|
13
13
|
}
|
|
14
14
|
/**
|
|
15
15
|
* 1. Reset for <button> element
|
|
@@ -5,9 +5,9 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import { ThemeProps, DefaultTheme } from 'styled-components';
|
|
8
|
-
|
|
8
|
+
import { ITableProps } from '../types';
|
|
9
9
|
interface IStyledTableProps {
|
|
10
|
-
size?:
|
|
10
|
+
size?: ITableProps['size'];
|
|
11
11
|
}
|
|
12
12
|
export declare const getLineHeight: (props: ThemeProps<DefaultTheme>) => string;
|
|
13
13
|
/**
|
|
@@ -10,8 +10,8 @@ export { StyledHeaderRow } from './StyledHeaderRow';
|
|
|
10
10
|
export { StyledHead } from './StyledHead';
|
|
11
11
|
export { StyledCell } from './StyledCell';
|
|
12
12
|
export { StyledGroupRow } from './StyledGroupRow';
|
|
13
|
-
export { StyledTable
|
|
13
|
+
export { StyledTable } from './StyledTable';
|
|
14
14
|
export { StyledHeaderCell } from './StyledHeaderCell';
|
|
15
|
-
export { StyledSortableButton, StyledSortableFillIconWrapper, StyledSortableStrokeIconWrapper
|
|
15
|
+
export { StyledSortableButton, StyledSortableFillIconWrapper, StyledSortableStrokeIconWrapper } from './StyledSortableButton';
|
|
16
16
|
export { StyledOverflowButton, StyledOverflowButtonIconWrapper } from './StyledOverflowButton';
|
|
17
17
|
export { StyledRow } from './StyledRow';
|
|
@@ -4,8 +4,8 @@
|
|
|
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 { SIZE } from './StyledTable';
|
|
8
7
|
import { ThemeProps, DefaultTheme } from 'styled-components';
|
|
8
|
+
import { ITableProps } from '../types';
|
|
9
9
|
export declare const getRowHeight: (props: {
|
|
10
|
-
size
|
|
10
|
+
size?: ITableProps['size'];
|
|
11
11
|
} & ThemeProps<DefaultTheme>) => string;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import { ButtonHTMLAttributes, HTMLAttributes, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
|
|
8
|
+
export declare const SIZE: readonly ["small", "medium", "large"];
|
|
9
|
+
export declare const SORT: string[];
|
|
10
|
+
export interface ITableProps extends TableHTMLAttributes<HTMLTableElement> {
|
|
11
|
+
/** Sets the table size */
|
|
12
|
+
size?: typeof SIZE[number];
|
|
13
|
+
/** Removes interactive styling from table rows */
|
|
14
|
+
isReadOnly?: boolean;
|
|
15
|
+
}
|
|
16
|
+
export interface IRowProps extends HTMLAttributes<HTMLTableRowElement> {
|
|
17
|
+
/** Applies striped styling */
|
|
18
|
+
isStriped?: boolean;
|
|
19
|
+
/** Applies selected styling */
|
|
20
|
+
isSelected?: boolean;
|
|
21
|
+
/** @ignore Applies focus styling */
|
|
22
|
+
isFocused?: boolean;
|
|
23
|
+
/** @ignore Applies hover styling */
|
|
24
|
+
isHovered?: boolean;
|
|
25
|
+
}
|
|
26
|
+
export interface ICellProps extends TdHTMLAttributes<HTMLTableCellElement> {
|
|
27
|
+
/**
|
|
28
|
+
* Applies minimum fixed width styling (e.g. for cells that contain
|
|
29
|
+
* checkboxes or icons)
|
|
30
|
+
*/
|
|
31
|
+
isMinimum?: boolean;
|
|
32
|
+
/** Truncates long text with an ellipsis */
|
|
33
|
+
isTruncated?: boolean;
|
|
34
|
+
/** Applies styling for a cell that contains an overflow menu */
|
|
35
|
+
hasOverflow?: boolean;
|
|
36
|
+
/** Adjusts the [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width) of the cell */
|
|
37
|
+
width?: TdHTMLAttributes<HTMLTableCellElement>['width'];
|
|
38
|
+
}
|
|
39
|
+
export interface IHeaderCellProps extends Pick<ICellProps, 'isMinimum' | 'isTruncated' | 'hasOverflow' | 'width'>, ThHTMLAttributes<HTMLTableCellElement> {
|
|
40
|
+
}
|
|
41
|
+
export interface ISortableCellProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
42
|
+
/** Sets the sort order */
|
|
43
|
+
sort?: typeof SORT[number];
|
|
44
|
+
/** Sets the width of the cell */
|
|
45
|
+
width?: ICellProps['width'];
|
|
46
|
+
/** Passes props to the cell */
|
|
47
|
+
cellProps?: any;
|
|
48
|
+
}
|
|
@@ -5,10 +5,10 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import React from 'react';
|
|
8
|
-
import {
|
|
8
|
+
import { ITableProps } from '../types';
|
|
9
9
|
interface ITableContext {
|
|
10
|
-
size:
|
|
11
|
-
isReadOnly:
|
|
10
|
+
size: NonNullable<ITableProps['size']>;
|
|
11
|
+
isReadOnly: NonNullable<ITableProps['isReadOnly']>;
|
|
12
12
|
}
|
|
13
13
|
export declare const TableContext: React.Context<ITableContext>;
|
|
14
14
|
export declare const useTableContext: () => ITableContext;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-tables",
|
|
3
|
-
"version": "8.49.
|
|
3
|
+
"version": "8.49.3",
|
|
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,8 +35,8 @@
|
|
|
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.49.
|
|
39
|
-
"@zendeskgarden/svg-icons": "6.
|
|
38
|
+
"@zendeskgarden/react-theming": "^8.49.3",
|
|
39
|
+
"@zendeskgarden/svg-icons": "6.31.1",
|
|
40
40
|
"react-beautiful-dnd": "13.1.0",
|
|
41
41
|
"react-window": "1.8.6"
|
|
42
42
|
},
|
|
@@ -50,5 +50,5 @@
|
|
|
50
50
|
"access": "public"
|
|
51
51
|
},
|
|
52
52
|
"zendeskgarden:src": "src/index.ts",
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "983322364971c051ca6ce478770edfc3310e4c4b"
|
|
54
54
|
}
|