@zendeskgarden/react-tables 9.0.0-next.3 → 9.0.0-next.4

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.
Files changed (6) hide show
  1. package/README.md +24 -33
  2. package/dist/index.cjs.js +27 -16
  3. package/dist/index.esm.js +27 -16
  4. package/dist/typings/elements/Table.d.ts +23 -1
  5. package/dist/typings/index.d.ts +10 -0
  6. package/package.json +3 -3
package/README.md CHANGED
@@ -16,45 +16,36 @@ npm install react react-dom styled-components @zendeskgarden/react-theming
16
16
 
17
17
  ```jsx
18
18
  import { ThemeProvider } from '@zendeskgarden/react-theming';
19
- import {
20
- Table,
21
- Caption,
22
- Head,
23
- HeaderRow,
24
- HeaderCell,
25
- Body,
26
- Row,
27
- Cell
28
- } from '@zendeskgarden/react-tables';
19
+ import { Table } from '@zendeskgarden/react-tables';
29
20
 
30
21
  /**
31
22
  * Place a `ThemeProvider` at the root of your React application
32
23
  */
33
24
  <ThemeProvider>
34
25
  <Table>
35
- <Caption>Your Unsolved Tickets</Caption>
36
- <Head>
37
- <HeaderRow>
38
- <HeaderCell>Subject</HeaderCell>
39
- <HeaderCell>Requester</HeaderCell>
40
- <HeaderCell>Requested</HeaderCell>
41
- <HeaderCell>Type</HeaderCell>
42
- </HeaderRow>
43
- </Head>
44
- <Body>
45
- <Row>
46
- <Cell>Where are my shoes?</Cell>
47
- <Cell>John Smith</Cell>
48
- <Cell>15 minutes ago</Cell>
49
- <Cell>Ticket</Cell>
50
- </Row>
51
- <Row>
52
- <Cell>I was charged twice!</Cell>
53
- <Cell>Jane Doe</Cell>
54
- <Cell>25 minutes ago</Cell>
55
- <Cell>Call</Cell>
56
- </Row>
57
- </Body>
26
+ <Table.Caption>Your Unsolved Tickets</Table.Caption>
27
+ <Table.Head>
28
+ <Table.HeaderRow>
29
+ <Table.HeaderCell>Subject</Table.HeaderCell>
30
+ <Table.HeaderCell>Requester</Table.HeaderCell>
31
+ <Table.HeaderCell>Requested</Table.HeaderCell>
32
+ <Table.HeaderCell>Type</Table.HeaderCell>
33
+ </Table.HeaderRow>
34
+ </Table.Head>
35
+ <Table.Body>
36
+ <Table.Row>
37
+ <Table.Cell>Where are my shoes?</Table.Cell>
38
+ <Table.Cell>John Smith</Table.Cell>
39
+ <Table.Cell>15 minutes ago</Table.Cell>
40
+ <Table.Cell>Ticket</Table.Cell>
41
+ </Table.Row>
42
+ <Table.Row>
43
+ <Table.Cell>I was charged twice!</Table.Cell>
44
+ <Table.Cell>Jane Doe</Table.Cell>
45
+ <Table.Cell>25 minutes ago</Table.Cell>
46
+ <Table.Cell>Call</Table.Cell>
47
+ </Table.Row>
48
+ </Table.Body>
58
49
  </Table>
59
50
  </ThemeProvider>;
60
51
  ```
package/dist/index.cjs.js CHANGED
@@ -56,7 +56,7 @@ function _extends$3() {
56
56
  const COMPONENT_ID$b = 'tables.body';
57
57
  const StyledBody = styled__default.default.tbody.attrs({
58
58
  'data-garden-id': COMPONENT_ID$b,
59
- 'data-garden-version': '9.0.0-next.3'
59
+ 'data-garden-version': '9.0.0-next.4'
60
60
  }).withConfig({
61
61
  displayName: "StyledBody",
62
62
  componentId: "sc-14ud6y-0"
@@ -68,7 +68,7 @@ StyledBody.defaultProps = {
68
68
  const COMPONENT_ID$a = 'tables.caption';
69
69
  const StyledCaption = styled__default.default.caption.attrs({
70
70
  'data-garden-id': COMPONENT_ID$a,
71
- 'data-garden-version': '9.0.0-next.3'
71
+ 'data-garden-version': '9.0.0-next.4'
72
72
  }).withConfig({
73
73
  displayName: "StyledCaption",
74
74
  componentId: "sc-113y327-0"
@@ -83,7 +83,7 @@ const getLineHeight = props => {
83
83
  };
84
84
  const StyledTable = styled__default.default.table.attrs({
85
85
  'data-garden-id': COMPONENT_ID$9,
86
- 'data-garden-version': '9.0.0-next.3'
86
+ 'data-garden-version': '9.0.0-next.4'
87
87
  }).withConfig({
88
88
  displayName: "StyledTable",
89
89
  componentId: "sc-gje7na-0"
@@ -126,7 +126,7 @@ const sizeStyling = props => {
126
126
  };
127
127
  const StyledCell = styled__default.default.td.attrs({
128
128
  'data-garden-id': COMPONENT_ID$8,
129
- 'data-garden-version': '9.0.0-next.3'
129
+ 'data-garden-version': '9.0.0-next.4'
130
130
  }).withConfig({
131
131
  displayName: "StyledCell",
132
132
  componentId: "sc-8hpncx-0"
@@ -157,7 +157,7 @@ const colorStyles$1 = props => {
157
157
  };
158
158
  const StyledOverflowButton = styled__default.default.button.attrs({
159
159
  'data-garden-id': COMPONENT_ID$7,
160
- 'data-garden-version': '9.0.0-next.3',
160
+ 'data-garden-version': '9.0.0-next.4',
161
161
  type: 'button'
162
162
  }).withConfig({
163
163
  displayName: "StyledOverflowButton",
@@ -213,7 +213,7 @@ const colorStyles = props => {
213
213
  };
214
214
  const StyledRow = styled__default.default(StyledBaseRow).attrs(props => ({
215
215
  'data-garden-id': COMPONENT_ID$6,
216
- 'data-garden-version': '9.0.0-next.3',
216
+ 'data-garden-version': '9.0.0-next.4',
217
217
  tabIndex: props.isReadOnly ? undefined : -1
218
218
  })).withConfig({
219
219
  displayName: "StyledRow",
@@ -234,7 +234,7 @@ const getHeaderRowHeight = props => {
234
234
  };
235
235
  const StyledHeaderRow = styled__default.default(StyledBaseRow).attrs({
236
236
  'data-garden-id': COMPONENT_ID$5,
237
- 'data-garden-version': '9.0.0-next.3'
237
+ 'data-garden-version': '9.0.0-next.4'
238
238
  }).withConfig({
239
239
  displayName: "StyledHeaderRow",
240
240
  componentId: "sc-16ogvdx-0"
@@ -250,7 +250,7 @@ const stickyStyles = props => {
250
250
  };
251
251
  const StyledHead = styled__default.default.thead.attrs({
252
252
  'data-garden-id': COMPONENT_ID$4,
253
- 'data-garden-version': '9.0.0-next.3'
253
+ 'data-garden-version': '9.0.0-next.4'
254
254
  }).withConfig({
255
255
  displayName: "StyledHead",
256
256
  componentId: "sc-spf23a-0"
@@ -267,7 +267,7 @@ const sizeStyles$1 = props => {
267
267
  };
268
268
  const StyledGroupRow = styled__default.default(StyledBaseRow).attrs({
269
269
  'data-garden-id': COMPONENT_ID$3,
270
- 'data-garden-version': '9.0.0-next.3'
270
+ 'data-garden-version': '9.0.0-next.4'
271
271
  }).withConfig({
272
272
  displayName: "StyledGroupRow",
273
273
  componentId: "sc-mpd0r8-0"
@@ -300,7 +300,7 @@ StyledSortableFillIconWrapper.defaultProps = {
300
300
  };
301
301
  const StyledSortableButton = styled__default.default.button.attrs({
302
302
  'data-garden-id': COMPONENT_ID$2,
303
- 'data-garden-version': '9.0.0-next.3',
303
+ 'data-garden-version': '9.0.0-next.4',
304
304
  type: 'button'
305
305
  }).withConfig({
306
306
  displayName: "StyledSortableButton",
@@ -358,7 +358,7 @@ const sizeStyles = props => {
358
358
  const StyledHeaderCell = styled__default.default(StyledCell).attrs({
359
359
  as: 'th',
360
360
  'data-garden-id': COMPONENT_ID$1,
361
- 'data-garden-version': '9.0.0-next.3'
361
+ 'data-garden-version': '9.0.0-next.4'
362
362
  }).withConfig({
363
363
  displayName: "StyledHeaderCell",
364
364
  componentId: "sc-fzagoe-0"
@@ -378,7 +378,7 @@ StyledHeaderCell.defaultProps = {
378
378
  const COMPONENT_ID = 'tables.hidden_cell';
379
379
  const StyledHiddenCell = styled__default.default.div.attrs({
380
380
  'data-garden-id': COMPONENT_ID,
381
- 'data-garden-version': '9.0.0-next.3'
381
+ 'data-garden-version': '9.0.0-next.4'
382
382
  }).withConfig({
383
383
  displayName: "StyledHiddenCell",
384
384
  componentId: "sc-1x454xw-0"
@@ -639,7 +639,7 @@ SortableCell.propTypes = {
639
639
  width: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number])
640
640
  };
641
641
 
642
- const Table = React__namespace.default.forwardRef((props, ref) => {
642
+ const TableComponent = React__namespace.default.forwardRef((props, ref) => {
643
643
  const tableContextValue = React.useMemo(() => ({
644
644
  size: props.size,
645
645
  isReadOnly: props.isReadOnly
@@ -650,14 +650,25 @@ const Table = React__namespace.default.forwardRef((props, ref) => {
650
650
  ref: ref
651
651
  }, props)));
652
652
  });
653
- Table.displayName = 'Table';
654
- Table.defaultProps = {
653
+ TableComponent.displayName = 'Table';
654
+ TableComponent.defaultProps = {
655
655
  size: 'medium'
656
656
  };
657
- Table.propTypes = {
657
+ TableComponent.propTypes = {
658
658
  size: PropTypes__default.default.oneOf(SIZE),
659
659
  isReadOnly: PropTypes__default.default.bool
660
660
  };
661
+ const Table = TableComponent;
662
+ Table.Body = Body;
663
+ Table.Caption = Caption;
664
+ Table.Cell = Cell;
665
+ Table.GroupRow = GroupRow;
666
+ Table.Head = Head;
667
+ Table.HeaderCell = HeaderCell;
668
+ Table.HeaderRow = HeaderRow;
669
+ Table.OverflowButton = OverflowButton;
670
+ Table.Row = Row;
671
+ Table.SortableCell = SortableCell;
661
672
 
662
673
  exports.Body = Body;
663
674
  exports.Caption = Caption;
package/dist/index.esm.js CHANGED
@@ -31,7 +31,7 @@ function _extends$3() {
31
31
  const COMPONENT_ID$b = 'tables.body';
32
32
  const StyledBody = styled.tbody.attrs({
33
33
  'data-garden-id': COMPONENT_ID$b,
34
- 'data-garden-version': '9.0.0-next.3'
34
+ 'data-garden-version': '9.0.0-next.4'
35
35
  }).withConfig({
36
36
  displayName: "StyledBody",
37
37
  componentId: "sc-14ud6y-0"
@@ -43,7 +43,7 @@ StyledBody.defaultProps = {
43
43
  const COMPONENT_ID$a = 'tables.caption';
44
44
  const StyledCaption = styled.caption.attrs({
45
45
  'data-garden-id': COMPONENT_ID$a,
46
- 'data-garden-version': '9.0.0-next.3'
46
+ 'data-garden-version': '9.0.0-next.4'
47
47
  }).withConfig({
48
48
  displayName: "StyledCaption",
49
49
  componentId: "sc-113y327-0"
@@ -58,7 +58,7 @@ const getLineHeight = props => {
58
58
  };
59
59
  const StyledTable = styled.table.attrs({
60
60
  'data-garden-id': COMPONENT_ID$9,
61
- 'data-garden-version': '9.0.0-next.3'
61
+ 'data-garden-version': '9.0.0-next.4'
62
62
  }).withConfig({
63
63
  displayName: "StyledTable",
64
64
  componentId: "sc-gje7na-0"
@@ -101,7 +101,7 @@ const sizeStyling = props => {
101
101
  };
102
102
  const StyledCell = styled.td.attrs({
103
103
  'data-garden-id': COMPONENT_ID$8,
104
- 'data-garden-version': '9.0.0-next.3'
104
+ 'data-garden-version': '9.0.0-next.4'
105
105
  }).withConfig({
106
106
  displayName: "StyledCell",
107
107
  componentId: "sc-8hpncx-0"
@@ -132,7 +132,7 @@ const colorStyles$1 = props => {
132
132
  };
133
133
  const StyledOverflowButton = styled.button.attrs({
134
134
  'data-garden-id': COMPONENT_ID$7,
135
- 'data-garden-version': '9.0.0-next.3',
135
+ 'data-garden-version': '9.0.0-next.4',
136
136
  type: 'button'
137
137
  }).withConfig({
138
138
  displayName: "StyledOverflowButton",
@@ -188,7 +188,7 @@ const colorStyles = props => {
188
188
  };
189
189
  const StyledRow = styled(StyledBaseRow).attrs(props => ({
190
190
  'data-garden-id': COMPONENT_ID$6,
191
- 'data-garden-version': '9.0.0-next.3',
191
+ 'data-garden-version': '9.0.0-next.4',
192
192
  tabIndex: props.isReadOnly ? undefined : -1
193
193
  })).withConfig({
194
194
  displayName: "StyledRow",
@@ -209,7 +209,7 @@ const getHeaderRowHeight = props => {
209
209
  };
210
210
  const StyledHeaderRow = styled(StyledBaseRow).attrs({
211
211
  'data-garden-id': COMPONENT_ID$5,
212
- 'data-garden-version': '9.0.0-next.3'
212
+ 'data-garden-version': '9.0.0-next.4'
213
213
  }).withConfig({
214
214
  displayName: "StyledHeaderRow",
215
215
  componentId: "sc-16ogvdx-0"
@@ -225,7 +225,7 @@ const stickyStyles = props => {
225
225
  };
226
226
  const StyledHead = styled.thead.attrs({
227
227
  'data-garden-id': COMPONENT_ID$4,
228
- 'data-garden-version': '9.0.0-next.3'
228
+ 'data-garden-version': '9.0.0-next.4'
229
229
  }).withConfig({
230
230
  displayName: "StyledHead",
231
231
  componentId: "sc-spf23a-0"
@@ -242,7 +242,7 @@ const sizeStyles$1 = props => {
242
242
  };
243
243
  const StyledGroupRow = styled(StyledBaseRow).attrs({
244
244
  'data-garden-id': COMPONENT_ID$3,
245
- 'data-garden-version': '9.0.0-next.3'
245
+ 'data-garden-version': '9.0.0-next.4'
246
246
  }).withConfig({
247
247
  displayName: "StyledGroupRow",
248
248
  componentId: "sc-mpd0r8-0"
@@ -275,7 +275,7 @@ StyledSortableFillIconWrapper.defaultProps = {
275
275
  };
276
276
  const StyledSortableButton = styled.button.attrs({
277
277
  'data-garden-id': COMPONENT_ID$2,
278
- 'data-garden-version': '9.0.0-next.3',
278
+ 'data-garden-version': '9.0.0-next.4',
279
279
  type: 'button'
280
280
  }).withConfig({
281
281
  displayName: "StyledSortableButton",
@@ -333,7 +333,7 @@ const sizeStyles = props => {
333
333
  const StyledHeaderCell = styled(StyledCell).attrs({
334
334
  as: 'th',
335
335
  'data-garden-id': COMPONENT_ID$1,
336
- 'data-garden-version': '9.0.0-next.3'
336
+ 'data-garden-version': '9.0.0-next.4'
337
337
  }).withConfig({
338
338
  displayName: "StyledHeaderCell",
339
339
  componentId: "sc-fzagoe-0"
@@ -353,7 +353,7 @@ StyledHeaderCell.defaultProps = {
353
353
  const COMPONENT_ID = 'tables.hidden_cell';
354
354
  const StyledHiddenCell = styled.div.attrs({
355
355
  'data-garden-id': COMPONENT_ID,
356
- 'data-garden-version': '9.0.0-next.3'
356
+ 'data-garden-version': '9.0.0-next.4'
357
357
  }).withConfig({
358
358
  displayName: "StyledHiddenCell",
359
359
  componentId: "sc-1x454xw-0"
@@ -614,7 +614,7 @@ SortableCell.propTypes = {
614
614
  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
615
615
  };
616
616
 
617
- const Table = React__default.forwardRef((props, ref) => {
617
+ const TableComponent = React__default.forwardRef((props, ref) => {
618
618
  const tableContextValue = useMemo(() => ({
619
619
  size: props.size,
620
620
  isReadOnly: props.isReadOnly
@@ -625,13 +625,24 @@ const Table = React__default.forwardRef((props, ref) => {
625
625
  ref: ref
626
626
  }, props)));
627
627
  });
628
- Table.displayName = 'Table';
629
- Table.defaultProps = {
628
+ TableComponent.displayName = 'Table';
629
+ TableComponent.defaultProps = {
630
630
  size: 'medium'
631
631
  };
632
- Table.propTypes = {
632
+ TableComponent.propTypes = {
633
633
  size: PropTypes.oneOf(SIZE),
634
634
  isReadOnly: PropTypes.bool
635
635
  };
636
+ const Table = TableComponent;
637
+ Table.Body = Body;
638
+ Table.Caption = Caption;
639
+ Table.Cell = Cell;
640
+ Table.GroupRow = GroupRow;
641
+ Table.Head = Head;
642
+ Table.HeaderCell = HeaderCell;
643
+ Table.HeaderRow = HeaderRow;
644
+ Table.OverflowButton = OverflowButton;
645
+ Table.Row = Row;
646
+ Table.SortableCell = SortableCell;
636
647
 
637
648
  export { Body, Caption, Cell, GroupRow, Head, HeaderCell, HeaderRow, OverflowButton, Row, SortableCell, Table };
package/dist/typings/elements/Table.d.ts CHANGED
@@ -6,7 +6,29 @@
6
6
  */
7
7
  import React from 'react';
8
8
  import { ITableProps } from '../types';
9
+ import { Head } from './Head';
10
+ import { Body } from './Body';
11
+ import { Caption } from './Caption';
12
+ import { Cell } from './Cell';
13
+ import { GroupRow } from './GroupRow';
14
+ import { HeaderCell } from './HeaderCell';
15
+ import { HeaderRow } from './HeaderRow';
16
+ import { OverflowButton } from './OverflowButton';
17
+ import { Row } from './Row';
18
+ import { SortableCell } from './SortableCell';
19
+ export declare const TableComponent: React.ForwardRefExoticComponent<ITableProps & React.RefAttributes<HTMLTableElement>>;
9
20
  /**
10
21
  * @extends TableHTMLAttributes<HTMLTableElement>
11
22
  */
12
- export declare const Table: React.ForwardRefExoticComponent<ITableProps & React.RefAttributes<HTMLTableElement>>;
23
+ export declare const Table: React.ForwardRefExoticComponent<ITableProps & React.RefAttributes<HTMLTableElement>> & {
24
+ Body: typeof Body;
25
+ Caption: typeof Caption;
26
+ Cell: typeof Cell;
27
+ GroupRow: typeof GroupRow;
28
+ Head: typeof Head;
29
+ HeaderCell: typeof HeaderCell;
30
+ HeaderRow: typeof HeaderRow;
31
+ OverflowButton: typeof OverflowButton;
32
+ Row: typeof Row;
33
+ SortableCell: typeof SortableCell;
34
+ };
package/dist/typings/index.d.ts CHANGED
@@ -4,15 +4,25 @@
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
+ /** @deprecated use `Table.Body` intead */
7
8
  export { Body } from './elements/Body';
9
+ /** @deprecated use `Table.Caption` intead */
8
10
  export { Caption } from './elements/Caption';
11
+ /** @deprecated use `Table.Cell` intead */
9
12
  export { Cell } from './elements/Cell';
13
+ /** @deprecated use `Table.GroupRow` intead */
10
14
  export { GroupRow } from './elements/GroupRow';
15
+ /** @deprecated use `Table.Head` intead */
11
16
  export { Head } from './elements/Head';
17
+ /** @deprecated use `Table.HeaderCell` intead */
12
18
  export { HeaderCell } from './elements/HeaderCell';
19
+ /** @deprecated use `Table.HeaderRow` intead */
13
20
  export { HeaderRow } from './elements/HeaderRow';
21
+ /** @deprecated use `Table.OverflowButton` intead */
14
22
  export { OverflowButton } from './elements/OverflowButton';
23
+ /** @deprecated use `Table.Row` intead */
15
24
  export { Row } from './elements/Row';
25
+ /** @deprecated use `Table.SortableCell` intead */
16
26
  export { SortableCell } from './elements/SortableCell';
17
27
  export { Table } from './elements/Table';
18
28
  export type { ITableProps, IRowProps, ICellProps, IHeadProps, IHeaderCellProps, ISortableCellProps } from './types';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-tables",
3
- "version": "9.0.0-next.3",
3
+ "version": "9.0.0-next.4",
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.8",
37
37
  "@types/react-window": "1.8.8",
38
- "@zendeskgarden/react-theming": "^9.0.0-next.3",
38
+ "@zendeskgarden/react-theming": "^9.0.0-next.4",
39
39
  "@zendeskgarden/svg-icons": "7.0.0",
40
40
  "react-beautiful-dnd": "13.1.1",
41
41
  "react-window": "1.8.10"
@@ -50,5 +50,5 @@
50
50
  "access": "public"
51
51
  },
52
52
  "zendeskgarden:src": "src/index.ts",
53
- "gitHead": "d5086e8a3ae0c8608361966954bf434ef03005ec"
53
+ "gitHead": "749220247e3a22d2d502dcb3691d81e6a3d52b02"
54
54
  }