@zendeskgarden/react-tables 9.0.0-next.2 → 9.0.0-next.20

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 (58) hide show
  1. package/README.md +24 -33
  2. package/dist/esm/elements/Body.js +26 -0
  3. package/dist/esm/elements/Caption.js +26 -0
  4. package/dist/esm/elements/Cell.js +50 -0
  5. package/dist/esm/elements/GroupRow.js +33 -0
  6. package/dist/esm/elements/Head.js +33 -0
  7. package/dist/esm/elements/HeaderCell.js +45 -0
  8. package/dist/esm/elements/HeaderRow.js +33 -0
  9. package/dist/esm/elements/OverflowButton.js +37 -0
  10. package/dist/esm/elements/Row.js +76 -0
  11. package/dist/esm/elements/SortableCell.js +63 -0
  12. package/dist/esm/elements/Table.js +70 -0
  13. package/dist/esm/index.js +17 -0
  14. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/sort-fill.svg.js +27 -0
  15. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/sort-stroke.svg.js +27 -0
  16. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/overflow-vertical-stroke.svg.js +25 -0
  17. package/dist/esm/styled/StyledBaseRow.js +46 -0
  18. package/dist/esm/styled/StyledBody.js +22 -0
  19. package/dist/esm/styled/StyledCaption.js +22 -0
  20. package/dist/esm/styled/StyledCell.js +47 -0
  21. package/dist/esm/styled/StyledGroupRow.js +47 -0
  22. package/dist/esm/styled/StyledHead.js +40 -0
  23. package/dist/esm/styled/StyledHeaderCell.js +44 -0
  24. package/dist/esm/styled/StyledHeaderRow.js +46 -0
  25. package/dist/esm/styled/StyledHiddenCell.js +23 -0
  26. package/dist/esm/styled/StyledOverflowButton.js +26 -0
  27. package/dist/esm/styled/StyledRow.js +106 -0
  28. package/dist/esm/styled/StyledSortableButton.js +104 -0
  29. package/dist/esm/styled/StyledTable.js +28 -0
  30. package/dist/esm/styled/style-utils.js +16 -0
  31. package/dist/esm/types/index.js +10 -0
  32. package/dist/esm/utils/useTableContext.js +17 -0
  33. package/dist/index.cjs.js +428 -298
  34. package/dist/typings/elements/Body.d.ts +2 -0
  35. package/dist/typings/elements/Caption.d.ts +2 -0
  36. package/dist/typings/elements/Cell.d.ts +2 -0
  37. package/dist/typings/elements/GroupRow.d.ts +2 -0
  38. package/dist/typings/elements/Head.d.ts +2 -0
  39. package/dist/typings/elements/HeaderCell.d.ts +2 -0
  40. package/dist/typings/elements/HeaderRow.d.ts +2 -0
  41. package/dist/typings/elements/OverflowButton.d.ts +4 -10
  42. package/dist/typings/elements/Row.d.ts +2 -0
  43. package/dist/typings/elements/SortableCell.d.ts +2 -0
  44. package/dist/typings/elements/Table.d.ts +23 -1
  45. package/dist/typings/styled/StyledBaseRow.d.ts +11 -0
  46. package/dist/typings/styled/StyledCell.d.ts +5 -2
  47. package/dist/typings/styled/StyledGroupRow.d.ts +7 -3
  48. package/dist/typings/styled/StyledHead.d.ts +1 -1
  49. package/dist/typings/styled/StyledHeaderCell.d.ts +1 -1
  50. package/dist/typings/styled/StyledHeaderRow.d.ts +7 -3
  51. package/dist/typings/styled/StyledOverflowButton.d.ts +7 -9
  52. package/dist/typings/styled/StyledRow.d.ts +10 -8
  53. package/dist/typings/styled/StyledSortableButton.d.ts +5 -4
  54. package/dist/typings/styled/StyledTable.d.ts +4 -6
  55. package/dist/typings/styled/index.d.ts +1 -1
  56. package/dist/typings/styled/style-utils.d.ts +1 -1
  57. package/package.json +9 -8
  58. package/dist/index.esm.js +0 -637
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/esm/elements/Body.js ADDED
@@ -0,0 +1,26 @@
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 React__default, { forwardRef } from 'react';
8
+ import { StyledBody } from '../styled/StyledBody.js';
9
+ import '../styled/StyledCaption.js';
10
+ import '../styled/StyledHeaderRow.js';
11
+ import '../styled/StyledHead.js';
12
+ import '../styled/StyledCell.js';
13
+ import '../styled/StyledGroupRow.js';
14
+ import '../styled/StyledTable.js';
15
+ import '../styled/StyledHeaderCell.js';
16
+ import '../styled/StyledHiddenCell.js';
17
+ import '../styled/StyledSortableButton.js';
18
+ import '../styled/StyledOverflowButton.js';
19
+ import '../styled/StyledRow.js';
20
+
21
+ const Body = forwardRef((props, ref) => React__default.createElement(StyledBody, Object.assign({
22
+ ref: ref
23
+ }, props)));
24
+ Body.displayName = 'Body';
25
+
26
+ export { Body };
package/dist/esm/elements/Caption.js ADDED
@@ -0,0 +1,26 @@
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 React__default, { forwardRef } from 'react';
8
+ import '../styled/StyledBody.js';
9
+ import { StyledCaption } from '../styled/StyledCaption.js';
10
+ import '../styled/StyledHeaderRow.js';
11
+ import '../styled/StyledHead.js';
12
+ import '../styled/StyledCell.js';
13
+ import '../styled/StyledGroupRow.js';
14
+ import '../styled/StyledTable.js';
15
+ import '../styled/StyledHeaderCell.js';
16
+ import '../styled/StyledHiddenCell.js';
17
+ import '../styled/StyledSortableButton.js';
18
+ import '../styled/StyledOverflowButton.js';
19
+ import '../styled/StyledRow.js';
20
+
21
+ const Caption = forwardRef((props, ref) => React__default.createElement(StyledCaption, Object.assign({
22
+ ref: ref
23
+ }, props)));
24
+ Caption.displayName = 'Caption';
25
+
26
+ export { Caption };
package/dist/esm/elements/Cell.js ADDED
@@ -0,0 +1,50 @@
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 React__default from 'react';
8
+ import PropTypes from 'prop-types';
9
+ import '../styled/StyledBody.js';
10
+ import '../styled/StyledCaption.js';
11
+ import '../styled/StyledHeaderRow.js';
12
+ import '../styled/StyledHead.js';
13
+ import { StyledCell } from '../styled/StyledCell.js';
14
+ import '../styled/StyledGroupRow.js';
15
+ import '../styled/StyledTable.js';
16
+ import '../styled/StyledHeaderCell.js';
17
+ import { StyledHiddenCell } from '../styled/StyledHiddenCell.js';
18
+ import '../styled/StyledSortableButton.js';
19
+ import '../styled/StyledOverflowButton.js';
20
+ import '../styled/StyledRow.js';
21
+ import { useTableContext } from '../utils/useTableContext.js';
22
+
23
+ const Cell = React__default.forwardRef((_ref, ref) => {
24
+ let {
25
+ hidden,
26
+ isMinimum,
27
+ isTruncated,
28
+ hasOverflow,
29
+ ...props
30
+ } = _ref;
31
+ const {
32
+ size
33
+ } = useTableContext();
34
+ return React__default.createElement(StyledCell, Object.assign({
35
+ ref: ref,
36
+ $size: size,
37
+ $isMinimum: isMinimum,
38
+ $isTruncated: isTruncated,
39
+ $hasOverflow: hasOverflow
40
+ }, props), hidden && props.children ? React__default.createElement(StyledHiddenCell, null, props.children) : props.children);
41
+ });
42
+ Cell.displayName = 'Cell';
43
+ Cell.propTypes = {
44
+ isMinimum: PropTypes.bool,
45
+ isTruncated: PropTypes.bool,
46
+ hasOverflow: PropTypes.bool,
47
+ width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
48
+ };
49
+
50
+ export { Cell };
package/dist/esm/elements/GroupRow.js ADDED
@@ -0,0 +1,33 @@
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 React__default, { forwardRef } from 'react';
8
+ import '../styled/StyledBody.js';
9
+ import '../styled/StyledCaption.js';
10
+ import '../styled/StyledHeaderRow.js';
11
+ import '../styled/StyledHead.js';
12
+ import '../styled/StyledCell.js';
13
+ import { StyledGroupRow } from '../styled/StyledGroupRow.js';
14
+ import '../styled/StyledTable.js';
15
+ import '../styled/StyledHeaderCell.js';
16
+ import '../styled/StyledHiddenCell.js';
17
+ import '../styled/StyledSortableButton.js';
18
+ import '../styled/StyledOverflowButton.js';
19
+ import '../styled/StyledRow.js';
20
+ import { useTableContext } from '../utils/useTableContext.js';
21
+
22
+ const GroupRow = forwardRef((props, ref) => {
23
+ const {
24
+ size
25
+ } = useTableContext();
26
+ return React__default.createElement(StyledGroupRow, Object.assign({
27
+ ref: ref,
28
+ $size: size
29
+ }, props));
30
+ });
31
+ GroupRow.displayName = 'GroupRow';
32
+
33
+ export { GroupRow };
package/dist/esm/elements/Head.js ADDED
@@ -0,0 +1,33 @@
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 React__default, { forwardRef } from 'react';
8
+ import '../styled/StyledBody.js';
9
+ import '../styled/StyledCaption.js';
10
+ import '../styled/StyledHeaderRow.js';
11
+ import { StyledHead } from '../styled/StyledHead.js';
12
+ import '../styled/StyledCell.js';
13
+ import '../styled/StyledGroupRow.js';
14
+ import '../styled/StyledTable.js';
15
+ import '../styled/StyledHeaderCell.js';
16
+ import '../styled/StyledHiddenCell.js';
17
+ import '../styled/StyledSortableButton.js';
18
+ import '../styled/StyledOverflowButton.js';
19
+ import '../styled/StyledRow.js';
20
+
21
+ const Head = forwardRef((_ref, ref) => {
22
+ let {
23
+ isSticky,
24
+ ...props
25
+ } = _ref;
26
+ return React__default.createElement(StyledHead, Object.assign({
27
+ ref: ref,
28
+ $isSticky: isSticky
29
+ }, props));
30
+ });
31
+ Head.displayName = 'Head';
32
+
33
+ export { Head };
package/dist/esm/elements/HeaderCell.js ADDED
@@ -0,0 +1,45 @@
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 React__default, { forwardRef } from 'react';
8
+ import '../styled/StyledBody.js';
9
+ import '../styled/StyledCaption.js';
10
+ import '../styled/StyledHeaderRow.js';
11
+ import '../styled/StyledHead.js';
12
+ import '../styled/StyledCell.js';
13
+ import '../styled/StyledGroupRow.js';
14
+ import '../styled/StyledTable.js';
15
+ import { StyledHeaderCell } from '../styled/StyledHeaderCell.js';
16
+ import { StyledHiddenCell } from '../styled/StyledHiddenCell.js';
17
+ import '../styled/StyledSortableButton.js';
18
+ import '../styled/StyledOverflowButton.js';
19
+ import '../styled/StyledRow.js';
20
+ import { useTableContext } from '../utils/useTableContext.js';
21
+ import { Cell } from './Cell.js';
22
+
23
+ const HeaderCell = forwardRef((_ref, ref) => {
24
+ let {
25
+ hidden,
26
+ isMinimum,
27
+ isTruncated,
28
+ hasOverflow,
29
+ ...props
30
+ } = _ref;
31
+ const {
32
+ size
33
+ } = useTableContext();
34
+ return React__default.createElement(StyledHeaderCell, Object.assign({
35
+ ref: ref,
36
+ $size: size,
37
+ $isMinimum: isMinimum,
38
+ $isTruncated: isTruncated,
39
+ $hasOverflow: hasOverflow
40
+ }, props), hidden && props.children ? React__default.createElement(StyledHiddenCell, null, props.children) : props.children);
41
+ });
42
+ HeaderCell.displayName = 'HeaderCell';
43
+ HeaderCell.propTypes = Cell.propTypes;
44
+
45
+ export { HeaderCell };
package/dist/esm/elements/HeaderRow.js ADDED
@@ -0,0 +1,33 @@
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 React__default from 'react';
8
+ import '../styled/StyledBody.js';
9
+ import '../styled/StyledCaption.js';
10
+ import { StyledHeaderRow } from '../styled/StyledHeaderRow.js';
11
+ import '../styled/StyledHead.js';
12
+ import '../styled/StyledCell.js';
13
+ import '../styled/StyledGroupRow.js';
14
+ import '../styled/StyledTable.js';
15
+ import '../styled/StyledHeaderCell.js';
16
+ import '../styled/StyledHiddenCell.js';
17
+ import '../styled/StyledSortableButton.js';
18
+ import '../styled/StyledOverflowButton.js';
19
+ import '../styled/StyledRow.js';
20
+ import { useTableContext } from '../utils/useTableContext.js';
21
+
22
+ const HeaderRow = React__default.forwardRef((props, ref) => {
23
+ const {
24
+ size
25
+ } = useTableContext();
26
+ return React__default.createElement(StyledHeaderRow, Object.assign({
27
+ ref: ref,
28
+ $size: size
29
+ }, props));
30
+ });
31
+ HeaderRow.displayName = 'HeaderRow';
32
+
33
+ export { HeaderRow };
package/dist/esm/elements/OverflowButton.js ADDED
@@ -0,0 +1,37 @@
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 React__default, { forwardRef } from 'react';
8
+ import SvgOverflowVerticalStroke from '../node_modules/@zendeskgarden/svg-icons/src/16/overflow-vertical-stroke.svg.js';
9
+ import '../styled/StyledBody.js';
10
+ import '../styled/StyledCaption.js';
11
+ import '../styled/StyledHeaderRow.js';
12
+ import '../styled/StyledHead.js';
13
+ import '../styled/StyledCell.js';
14
+ import '../styled/StyledGroupRow.js';
15
+ import '../styled/StyledTable.js';
16
+ import '../styled/StyledHeaderCell.js';
17
+ import '../styled/StyledHiddenCell.js';
18
+ import '../styled/StyledSortableButton.js';
19
+ import { StyledOverflowButton } from '../styled/StyledOverflowButton.js';
20
+ import '../styled/StyledRow.js';
21
+ import { useTableContext } from '../utils/useTableContext.js';
22
+
23
+ const OverflowButton = forwardRef((props, ref) => {
24
+ const {
25
+ size
26
+ } = useTableContext();
27
+ return React__default.createElement(StyledOverflowButton, Object.assign({
28
+ type: "button",
29
+ $size: size,
30
+ ref: ref
31
+ }, props, {
32
+ focusInset: true
33
+ }), React__default.createElement(SvgOverflowVerticalStroke, null));
34
+ });
35
+ OverflowButton.displayName = 'OverflowButton';
36
+
37
+ export { OverflowButton };
package/dist/esm/elements/Row.js ADDED
@@ -0,0 +1,76 @@
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 React__default, { forwardRef, useState, useMemo } from 'react';
8
+ import PropTypes from 'prop-types';
9
+ import { composeEventHandlers } from '@zendeskgarden/container-utilities';
10
+ import '../styled/StyledBody.js';
11
+ import '../styled/StyledCaption.js';
12
+ import '../styled/StyledHeaderRow.js';
13
+ import '../styled/StyledHead.js';
14
+ import '../styled/StyledCell.js';
15
+ import '../styled/StyledGroupRow.js';
16
+ import '../styled/StyledTable.js';
17
+ import '../styled/StyledHeaderCell.js';
18
+ import '../styled/StyledHiddenCell.js';
19
+ import '../styled/StyledSortableButton.js';
20
+ import '../styled/StyledOverflowButton.js';
21
+ import { StyledRow } from '../styled/StyledRow.js';
22
+ import { useTableContext } from '../utils/useTableContext.js';
23
+
24
+ const Row = forwardRef((_ref, ref) => {
25
+ let {
26
+ onFocus,
27
+ onBlur,
28
+ isSelected,
29
+ isStriped,
30
+ isHovered,
31
+ isFocused: focused,
32
+ ...otherProps
33
+ } = _ref;
34
+ const [isFocused, setIsFocused] = useState(false);
35
+ const {
36
+ size,
37
+ isReadOnly
38
+ } = useTableContext();
39
+ const computedFocused = useMemo(() => {
40
+ if (typeof focused !== 'undefined') {
41
+ return focused;
42
+ }
43
+ if (isReadOnly) {
44
+ return false;
45
+ }
46
+ return isFocused;
47
+ }, [focused, isFocused, isReadOnly]);
48
+ const onFocusCallback = useMemo(() => composeEventHandlers(onFocus, () => {
49
+ setIsFocused(true);
50
+ }), [onFocus, setIsFocused]);
51
+ const onBlurCallback = useMemo(() => composeEventHandlers(onBlur, () => {
52
+ setIsFocused(false);
53
+ }), [onBlur, setIsFocused]);
54
+ return React__default.createElement(StyledRow, Object.assign({
55
+ onFocus: onFocusCallback,
56
+ onBlur: onBlurCallback,
57
+ ref: ref,
58
+ $size: size,
59
+ $isReadOnly: isReadOnly,
60
+ $isFocused: computedFocused,
61
+ $isHovered: isHovered,
62
+ $isStriped: isStriped,
63
+ $isSelected: isSelected
64
+ }, otherProps, {
65
+ tabIndex: isReadOnly ? undefined : -1
66
+ }));
67
+ });
68
+ Row.displayName = 'Row';
69
+ Row.propTypes = {
70
+ isStriped: PropTypes.bool,
71
+ isFocused: PropTypes.bool,
72
+ isHovered: PropTypes.bool,
73
+ isSelected: PropTypes.bool
74
+ };
75
+
76
+ export { Row };
package/dist/esm/elements/SortableCell.js ADDED
@@ -0,0 +1,63 @@
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 React__default, { forwardRef } from 'react';
8
+ import PropTypes from 'prop-types';
9
+ import SvgSortStroke from '../node_modules/@zendeskgarden/svg-icons/src/12/sort-stroke.svg.js';
10
+ import SvgSortFill from '../node_modules/@zendeskgarden/svg-icons/src/12/sort-fill.svg.js';
11
+ import { SORT } from '../types/index.js';
12
+ import '../styled/StyledBody.js';
13
+ import '../styled/StyledCaption.js';
14
+ import '../styled/StyledHeaderRow.js';
15
+ import '../styled/StyledHead.js';
16
+ import '../styled/StyledCell.js';
17
+ import '../styled/StyledGroupRow.js';
18
+ import '../styled/StyledTable.js';
19
+ import { StyledHeaderCell } from '../styled/StyledHeaderCell.js';
20
+ import '../styled/StyledHiddenCell.js';
21
+ import { StyledSortableButton, StyledSortableStrokeIconWrapper, StyledSortableFillIconWrapper } from '../styled/StyledSortableButton.js';
22
+ import '../styled/StyledOverflowButton.js';
23
+ import '../styled/StyledRow.js';
24
+
25
+ const SortableCell = forwardRef((_ref, ref) => {
26
+ let {
27
+ sort,
28
+ cellProps = {},
29
+ width,
30
+ children,
31
+ ...sortableButtonProps
32
+ } = _ref;
33
+ const {
34
+ isMinimum,
35
+ isTruncated,
36
+ hasOverflow
37
+ } = cellProps;
38
+ let ariaSortValue = 'none';
39
+ if (sort === 'asc') {
40
+ ariaSortValue = 'ascending';
41
+ } else if (sort === 'desc') {
42
+ ariaSortValue = 'descending';
43
+ }
44
+ const SortIcon = sort === undefined ? SvgSortStroke : SvgSortFill;
45
+ return React__default.createElement(StyledHeaderCell, Object.assign({
46
+ "aria-sort": ariaSortValue,
47
+ width: width,
48
+ $isMinimum: isMinimum,
49
+ $isTruncated: isTruncated,
50
+ $hasOverflow: hasOverflow
51
+ }, cellProps), React__default.createElement(StyledSortableButton, Object.assign({
52
+ $sort: sort,
53
+ ref: ref
54
+ }, sortableButtonProps), children, React__default.createElement(StyledSortableStrokeIconWrapper, null, React__default.createElement(SortIcon, null)), React__default.createElement(StyledSortableFillIconWrapper, null, React__default.createElement(SvgSortFill, null))));
55
+ });
56
+ SortableCell.displayName = 'SortableCell';
57
+ SortableCell.propTypes = {
58
+ sort: PropTypes.oneOf(SORT),
59
+ cellProps: PropTypes.any,
60
+ width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
61
+ };
62
+
63
+ export { SortableCell };
package/dist/esm/elements/Table.js ADDED
@@ -0,0 +1,70 @@
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 React__default, { useMemo } from 'react';
8
+ import PropTypes from 'prop-types';
9
+ import { SIZE } from '../types/index.js';
10
+ import '../styled/StyledBody.js';
11
+ import '../styled/StyledCaption.js';
12
+ import '../styled/StyledHeaderRow.js';
13
+ import '../styled/StyledHead.js';
14
+ import '../styled/StyledCell.js';
15
+ import '../styled/StyledGroupRow.js';
16
+ import { StyledTable } from '../styled/StyledTable.js';
17
+ import '../styled/StyledHeaderCell.js';
18
+ import '../styled/StyledHiddenCell.js';
19
+ import '../styled/StyledSortableButton.js';
20
+ import '../styled/StyledOverflowButton.js';
21
+ import '../styled/StyledRow.js';
22
+ import { TableContext } from '../utils/useTableContext.js';
23
+ import { Head } from './Head.js';
24
+ import { Body } from './Body.js';
25
+ import { Caption } from './Caption.js';
26
+ import { Cell } from './Cell.js';
27
+ import { GroupRow } from './GroupRow.js';
28
+ import { HeaderCell } from './HeaderCell.js';
29
+ import { HeaderRow } from './HeaderRow.js';
30
+ import { OverflowButton } from './OverflowButton.js';
31
+ import { Row } from './Row.js';
32
+ import { SortableCell } from './SortableCell.js';
33
+
34
+ const TableComponent = React__default.forwardRef((_ref, ref) => {
35
+ let {
36
+ isReadOnly,
37
+ size,
38
+ ...props
39
+ } = _ref;
40
+ const tableContextValue = useMemo(() => ({
41
+ size: size,
42
+ isReadOnly: isReadOnly
43
+ }), [size, isReadOnly]);
44
+ return React__default.createElement(TableContext.Provider, {
45
+ value: tableContextValue
46
+ }, React__default.createElement(StyledTable, Object.assign({
47
+ ref: ref
48
+ }, props)));
49
+ });
50
+ TableComponent.displayName = 'Table';
51
+ TableComponent.defaultProps = {
52
+ size: 'medium'
53
+ };
54
+ TableComponent.propTypes = {
55
+ size: PropTypes.oneOf(SIZE),
56
+ isReadOnly: PropTypes.bool
57
+ };
58
+ const Table = TableComponent;
59
+ Table.Body = Body;
60
+ Table.Caption = Caption;
61
+ Table.Cell = Cell;
62
+ Table.GroupRow = GroupRow;
63
+ Table.Head = Head;
64
+ Table.HeaderCell = HeaderCell;
65
+ Table.HeaderRow = HeaderRow;
66
+ Table.OverflowButton = OverflowButton;
67
+ Table.Row = Row;
68
+ Table.SortableCell = SortableCell;
69
+
70
+ export { Table, TableComponent };
package/dist/esm/index.js ADDED
@@ -0,0 +1,17 @@
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
+ export { Body } from './elements/Body.js';
8
+ export { Caption } from './elements/Caption.js';
9
+ export { Cell } from './elements/Cell.js';
10
+ export { GroupRow } from './elements/GroupRow.js';
11
+ export { Head } from './elements/Head.js';
12
+ export { HeaderCell } from './elements/HeaderCell.js';
13
+ export { HeaderRow } from './elements/HeaderRow.js';
14
+ export { OverflowButton } from './elements/OverflowButton.js';
15
+ export { Row } from './elements/Row.js';
16
+ export { SortableCell } from './elements/SortableCell.js';
17
+ export { Table } from './elements/Table.js';
package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/sort-fill.svg.js ADDED
@@ -0,0 +1,27 @@
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 * as React from 'react';
8
+
9
+ var _path, _path2;
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
+ var SvgSortFill = function SvgSortFill(props) {
12
+ return /*#__PURE__*/React.createElement("svg", _extends({
13
+ xmlns: "http://www.w3.org/2000/svg",
14
+ width: 12,
15
+ height: 12,
16
+ focusable: "false",
17
+ viewBox: "0 0 12 12",
18
+ "aria-hidden": "true"
19
+ }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
20
+ fill: "currentColor",
21
+ 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"
22
+ })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
23
+ 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"
24
+ })));
25
+ };
26
+
27
+ export { SvgSortFill as default };
package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/sort-stroke.svg.js ADDED
@@ -0,0 +1,27 @@
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 * as React from 'react';
8
+
9
+ var _path;
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
+ var SvgSortStroke = function SvgSortStroke(props) {
12
+ return /*#__PURE__*/React.createElement("svg", _extends({
13
+ xmlns: "http://www.w3.org/2000/svg",
14
+ width: 12,
15
+ height: 12,
16
+ focusable: "false",
17
+ viewBox: "0 0 12 12",
18
+ "aria-hidden": "true"
19
+ }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
20
+ fill: "none",
21
+ stroke: "currentColor",
22
+ strokeLinecap: "round",
23
+ 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"
24
+ })));
25
+ };
26
+
27
+ export { SvgSortStroke as default };
package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/overflow-vertical-stroke.svg.js ADDED
@@ -0,0 +1,25 @@
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 * as React from 'react';
8
+
9
+ var _path;
10
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
11
+ var SvgOverflowVerticalStroke = function SvgOverflowVerticalStroke(props) {
12
+ return /*#__PURE__*/React.createElement("svg", _extends({
13
+ xmlns: "http://www.w3.org/2000/svg",
14
+ width: 16,
15
+ height: 16,
16
+ focusable: "false",
17
+ viewBox: "0 0 16 16",
18
+ "aria-hidden": "true"
19
+ }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
20
+ fill: "currentColor",
21
+ d: "M9.5 2.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm0 5.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm0 5.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"
22
+ })));
23
+ };
24
+
25
+ export { SvgOverflowVerticalStroke as default };