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

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 (15) hide show
  1. package/README.md +24 -33
  2. package/dist/index.cjs.js +53 -42
  3. package/dist/index.esm.js +54 -43
  4. package/dist/typings/elements/Body.d.ts +2 -0
  5. package/dist/typings/elements/Caption.d.ts +2 -0
  6. package/dist/typings/elements/Cell.d.ts +2 -0
  7. package/dist/typings/elements/GroupRow.d.ts +2 -0
  8. package/dist/typings/elements/Head.d.ts +2 -0
  9. package/dist/typings/elements/HeaderCell.d.ts +2 -0
  10. package/dist/typings/elements/HeaderRow.d.ts +2 -0
  11. package/dist/typings/elements/OverflowButton.d.ts +2 -0
  12. package/dist/typings/elements/Row.d.ts +2 -0
  13. package/dist/typings/elements/SortableCell.d.ts +2 -0
  14. package/dist/typings/elements/Table.d.ts +23 -1
  15. package/package.json +4 -4
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.5'
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.5'
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.5'
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.5'
130
130
  }).withConfig({
131
131
  displayName: "StyledCell",
132
132
  componentId: "sc-8hpncx-0"
@@ -138,17 +138,17 @@ StyledCell.defaultProps = {
138
138
  const COMPONENT_ID$7 = 'tables.overflow_button';
139
139
  const OVERFLOW_BUTTON_SIZE = '2em';
140
140
  const colorStyles$1 = props => {
141
- const hoverBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.08);
142
- const hoverForegroundColor = reactTheming.getColor('neutralHue', 700, props.theme);
143
- const activeBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.2);
144
- const activeForegroundColor = reactTheming.getColor('neutralHue', 800, props.theme);
141
+ const hoverBackgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.08);
142
+ const hoverForegroundColor = reactTheming.getColorV8('neutralHue', 700, props.theme);
143
+ const activeBackgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.2);
144
+ const activeForegroundColor = reactTheming.getColorV8('neutralHue', 800, props.theme);
145
145
  let foregroundColor;
146
146
  if (props.isHovered) {
147
147
  foregroundColor = hoverForegroundColor;
148
148
  } else if (props.isActive) {
149
149
  foregroundColor = activeForegroundColor;
150
150
  } else {
151
- foregroundColor = reactTheming.getColor('neutralHue', 600, props.theme);
151
+ foregroundColor = reactTheming.getColorV8('neutralHue', 600, props.theme);
152
152
  }
153
153
  return styled.css(["color:", ";&:hover{background-color:", ";color:", ";}", " &:active{background-color:", ";color:", ";}"], foregroundColor, hoverBackgroundColor, hoverForegroundColor, reactTheming.focusStyles({
154
154
  theme: props.theme,
@@ -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.5',
161
161
  type: 'button'
162
162
  }).withConfig({
163
163
  displayName: "StyledOverflowButton",
@@ -178,17 +178,17 @@ const COMPONENT_ID$6 = 'tables.row';
178
178
  const StyledBaseRow = styled__default.default.tr.withConfig({
179
179
  displayName: "StyledRow__StyledBaseRow",
180
180
  componentId: "sc-ek66ow-0"
181
- })(["display:table-row;transition:background-color 0.1s ease-in-out;border-bottom:", ";background-color:", ";vertical-align:top;box-sizing:border-box;"], props => `${props.theme.borders.sm} ${reactTheming.getColor('neutralHue', 200, props.theme)}`, props => props.isStriped && reactTheming.getColor('neutralHue', 100, props.theme));
181
+ })(["display:table-row;transition:background-color 0.1s ease-in-out;border-bottom:", ";background-color:", ";vertical-align:top;box-sizing:border-box;"], props => `${props.theme.borders.sm} ${reactTheming.getColorV8('neutralHue', 200, props.theme)}`, props => props.isStriped && reactTheming.getColorV8('neutralHue', 100, props.theme));
182
182
  StyledBaseRow.defaultProps = {
183
183
  theme: reactTheming.DEFAULT_THEME
184
184
  };
185
185
  const colorStyles = props => {
186
- const boxShadow = `inset ${props.theme.rtl ? '-' : ''}${props.theme.shadowWidths.md} 0 0 0 ${reactTheming.getColor('primaryHue', 600, props.theme)}`;
187
- const hoveredBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.08);
188
- const hoveredBorderColor = reactTheming.getColor('primaryHue', 200, props.theme);
189
- const selectedBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.2);
190
- const selectedBorderColor = reactTheming.getColor('primaryHue', 300, props.theme);
191
- const hoveredSelectedBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.28);
186
+ const boxShadow = `inset ${props.theme.rtl ? '-' : ''}${props.theme.shadowWidths.md} 0 0 0 ${reactTheming.getColorV8('primaryHue', 600, props.theme)}`;
187
+ const hoveredBackgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.08);
188
+ const hoveredBorderColor = reactTheming.getColorV8('primaryHue', 200, props.theme);
189
+ const selectedBackgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.2);
190
+ const selectedBorderColor = reactTheming.getColorV8('primaryHue', 300, props.theme);
191
+ const hoveredSelectedBackgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.28);
192
192
  let backgroundColor = undefined;
193
193
  let borderColor = undefined;
194
194
  let hoverBorderBottomColor = undefined;
@@ -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.5',
217
217
  tabIndex: props.isReadOnly ? undefined : -1
218
218
  })).withConfig({
219
219
  displayName: "StyledRow",
@@ -234,23 +234,23 @@ 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.5'
238
238
  }).withConfig({
239
239
  displayName: "StyledHeaderRow",
240
240
  componentId: "sc-16ogvdx-0"
241
- })(["border-bottom-color:", ";height:", ";vertical-align:bottom;font-weight:", ";", "{opacity:1;margin-top:0;margin-bottom:calc(", " - 1em);}", ";"], props => reactTheming.getColor('neutralHue', 300, props.theme), getHeaderRowHeight, props => props.theme.fontWeights.semibold, StyledOverflowButton, props => polished.math(`${getHeaderRowHeight(props)} / 2`), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
241
+ })(["border-bottom-color:", ";height:", ";vertical-align:bottom;font-weight:", ";", "{opacity:1;margin-top:0;margin-bottom:calc(", " - 1em);}", ";"], props => reactTheming.getColorV8('neutralHue', 300, props.theme), getHeaderRowHeight, props => props.theme.fontWeights.semibold, StyledOverflowButton, props => polished.math(`${getHeaderRowHeight(props)} / 2`), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
242
242
  StyledHeaderRow.defaultProps = {
243
243
  theme: reactTheming.DEFAULT_THEME
244
244
  };
245
245
 
246
246
  const COMPONENT_ID$4 = 'tables.head';
247
247
  const stickyStyles = props => {
248
- const borderColor = reactTheming.getColor('neutralHue', 300, props.theme);
248
+ const borderColor = reactTheming.getColorV8('neutralHue', 300, props.theme);
249
249
  return styled.css(["position:sticky;top:0;z-index:1;box-shadow:inset 0 -", " 0 ", ";background-color:", ";& > ", ":last-child{border-bottom-color:transparent;}"], props.theme.borderWidths.sm, borderColor, props.theme.colors.background, StyledHeaderRow);
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.5'
254
254
  }).withConfig({
255
255
  displayName: "StyledHead",
256
256
  componentId: "sc-spf23a-0"
@@ -267,11 +267,11 @@ 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.5'
271
271
  }).withConfig({
272
272
  displayName: "StyledGroupRow",
273
273
  componentId: "sc-mpd0r8-0"
274
- })(["background-color:", ";", " ", ";"], props => reactTheming.getColor('neutralHue', 100, props.theme), props => sizeStyles$1(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
274
+ })(["background-color:", ";", " ", ";"], props => reactTheming.getColorV8('neutralHue', 100, props.theme), props => sizeStyles$1(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
275
275
  StyledGroupRow.defaultProps = {
276
276
  theme: reactTheming.DEFAULT_THEME
277
277
  };
@@ -300,30 +300,30 @@ 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.5',
304
304
  type: 'button'
305
305
  }).withConfig({
306
306
  displayName: "StyledSortableButton",
307
307
  componentId: "sc-2s1dli-3"
308
308
  })(["position:relative;transition:box-shadow 0.1s ease-in-out;border:none;border-radius:", ";background-color:transparent;cursor:pointer;padding:0;padding-", ":", ";width:", ";text-decoration:none;color:inherit;font-family:inherit;font-size:inherit;font-weight:", ";", "{opacity:", ";}", "{opacity:", ";color:", ";fill:", ";}&:hover,", "{text-decoration:none;color:", ";", ";", " ", "}", " ", ";"], props => props.theme.borderRadii.sm, props => props.theme.rtl ? 'left' : 'right', props => polished.math(`${props.theme.space.base} + ${props.theme.iconSizes.sm}`), props => props.width, props => props.theme.fontWeights.semibold, StyledSortableStrokeIconWrapper, props => props.sort === undefined && 1, StyledSortableFillIconWrapper, props => props.sort !== undefined && 1, props => {
309
309
  if (props.sort === 'asc') {
310
- return reactTheming.getColor('neutralHue', 600, props.theme);
310
+ return reactTheming.getColorV8('neutralHue', 600, props.theme);
311
311
  } else if (props.sort === 'desc') {
312
- return reactTheming.getColor('neutralHue', 400, props.theme);
312
+ return reactTheming.getColorV8('neutralHue', 400, props.theme);
313
313
  }
314
314
  return undefined;
315
315
  }, props => {
316
316
  if (props.sort === 'asc') {
317
- return reactTheming.getColor('neutralHue', 400, props.theme);
317
+ return reactTheming.getColorV8('neutralHue', 400, props.theme);
318
318
  } else if (props.sort === 'desc') {
319
- return reactTheming.getColor('neutralHue', 600, props.theme);
319
+ return reactTheming.getColorV8('neutralHue', 600, props.theme);
320
320
  }
321
321
  return undefined;
322
- }, reactTheming.SELECTOR_FOCUS_VISIBLE, props => reactTheming.getColor('primaryHue', 600, props.theme), props => props.sort === undefined && `
322
+ }, reactTheming.SELECTOR_FOCUS_VISIBLE, props => reactTheming.getColorV8('primaryHue', 600, props.theme), props => props.sort === undefined && `
323
323
  ${StyledSortableFillIconWrapper} {
324
324
  opacity: 1;
325
- color: ${reactTheming.getColor('primaryHue', 600, props.theme)};
326
- fill: ${reactTheming.getColor('primaryHue', 600, props.theme)};
325
+ color: ${reactTheming.getColorV8('primaryHue', 600, props.theme)};
326
+ fill: ${reactTheming.getColorV8('primaryHue', 600, props.theme)};
327
327
  }
328
328
 
329
329
  ${StyledSortableStrokeIconWrapper} {
@@ -331,13 +331,13 @@ const StyledSortableButton = styled__default.default.button.attrs({
331
331
  }
332
332
  `, props => props.sort === 'asc' && `
333
333
  ${StyledSortableFillIconWrapper} {
334
- color: ${reactTheming.getColor('primaryHue', 600, props.theme)};
335
- fill: ${reactTheming.getColor('primaryHue', 600, props.theme, 0.25)};
334
+ color: ${reactTheming.getColorV8('primaryHue', 600, props.theme)};
335
+ fill: ${reactTheming.getColorV8('primaryHue', 600, props.theme, 0.25)};
336
336
  }
337
337
  `, props => props.sort === 'desc' && `
338
338
  ${StyledSortableFillIconWrapper} {
339
- color: ${reactTheming.getColor('primaryHue', 600, props.theme, 0.25)};
340
- fill: ${reactTheming.getColor('primaryHue', 600, props.theme)};
339
+ color: ${reactTheming.getColorV8('primaryHue', 600, props.theme, 0.25)};
340
+ fill: ${reactTheming.getColorV8('primaryHue', 600, props.theme)};
341
341
  }
342
342
  `, props => reactTheming.focusStyles({
343
343
  theme: props.theme
@@ -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.5'
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.5'
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
@@ -8,7 +8,7 @@
8
8
  import * as React from 'react';
9
9
  import React__default, { forwardRef, useContext, useState, useMemo } from 'react';
10
10
  import styled, { css } from 'styled-components';
11
- import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles, SELECTOR_FOCUS_VISIBLE } from '@zendeskgarden/react-theming';
11
+ import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles, SELECTOR_FOCUS_VISIBLE } from '@zendeskgarden/react-theming';
12
12
  import { math, hideVisually } from 'polished';
13
13
  import PropTypes from 'prop-types';
14
14
  import { composeEventHandlers } from '@zendeskgarden/container-utilities';
@@ -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.5'
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.5'
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.5'
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.5'
105
105
  }).withConfig({
106
106
  displayName: "StyledCell",
107
107
  componentId: "sc-8hpncx-0"
@@ -113,17 +113,17 @@ StyledCell.defaultProps = {
113
113
  const COMPONENT_ID$7 = 'tables.overflow_button';
114
114
  const OVERFLOW_BUTTON_SIZE = '2em';
115
115
  const colorStyles$1 = props => {
116
- const hoverBackgroundColor = getColor('primaryHue', 600, props.theme, 0.08);
117
- const hoverForegroundColor = getColor('neutralHue', 700, props.theme);
118
- const activeBackgroundColor = getColor('primaryHue', 600, props.theme, 0.2);
119
- const activeForegroundColor = getColor('neutralHue', 800, props.theme);
116
+ const hoverBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.08);
117
+ const hoverForegroundColor = getColorV8('neutralHue', 700, props.theme);
118
+ const activeBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.2);
119
+ const activeForegroundColor = getColorV8('neutralHue', 800, props.theme);
120
120
  let foregroundColor;
121
121
  if (props.isHovered) {
122
122
  foregroundColor = hoverForegroundColor;
123
123
  } else if (props.isActive) {
124
124
  foregroundColor = activeForegroundColor;
125
125
  } else {
126
- foregroundColor = getColor('neutralHue', 600, props.theme);
126
+ foregroundColor = getColorV8('neutralHue', 600, props.theme);
127
127
  }
128
128
  return css(["color:", ";&:hover{background-color:", ";color:", ";}", " &:active{background-color:", ";color:", ";}"], foregroundColor, hoverBackgroundColor, hoverForegroundColor, focusStyles({
129
129
  theme: props.theme,
@@ -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.5',
136
136
  type: 'button'
137
137
  }).withConfig({
138
138
  displayName: "StyledOverflowButton",
@@ -153,17 +153,17 @@ const COMPONENT_ID$6 = 'tables.row';
153
153
  const StyledBaseRow = styled.tr.withConfig({
154
154
  displayName: "StyledRow__StyledBaseRow",
155
155
  componentId: "sc-ek66ow-0"
156
- })(["display:table-row;transition:background-color 0.1s ease-in-out;border-bottom:", ";background-color:", ";vertical-align:top;box-sizing:border-box;"], props => `${props.theme.borders.sm} ${getColor('neutralHue', 200, props.theme)}`, props => props.isStriped && getColor('neutralHue', 100, props.theme));
156
+ })(["display:table-row;transition:background-color 0.1s ease-in-out;border-bottom:", ";background-color:", ";vertical-align:top;box-sizing:border-box;"], props => `${props.theme.borders.sm} ${getColorV8('neutralHue', 200, props.theme)}`, props => props.isStriped && getColorV8('neutralHue', 100, props.theme));
157
157
  StyledBaseRow.defaultProps = {
158
158
  theme: DEFAULT_THEME
159
159
  };
160
160
  const colorStyles = props => {
161
- const boxShadow = `inset ${props.theme.rtl ? '-' : ''}${props.theme.shadowWidths.md} 0 0 0 ${getColor('primaryHue', 600, props.theme)}`;
162
- const hoveredBackgroundColor = getColor('primaryHue', 600, props.theme, 0.08);
163
- const hoveredBorderColor = getColor('primaryHue', 200, props.theme);
164
- const selectedBackgroundColor = getColor('primaryHue', 600, props.theme, 0.2);
165
- const selectedBorderColor = getColor('primaryHue', 300, props.theme);
166
- const hoveredSelectedBackgroundColor = getColor('primaryHue', 600, props.theme, 0.28);
161
+ const boxShadow = `inset ${props.theme.rtl ? '-' : ''}${props.theme.shadowWidths.md} 0 0 0 ${getColorV8('primaryHue', 600, props.theme)}`;
162
+ const hoveredBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.08);
163
+ const hoveredBorderColor = getColorV8('primaryHue', 200, props.theme);
164
+ const selectedBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.2);
165
+ const selectedBorderColor = getColorV8('primaryHue', 300, props.theme);
166
+ const hoveredSelectedBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.28);
167
167
  let backgroundColor = undefined;
168
168
  let borderColor = undefined;
169
169
  let hoverBorderBottomColor = undefined;
@@ -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.5',
192
192
  tabIndex: props.isReadOnly ? undefined : -1
193
193
  })).withConfig({
194
194
  displayName: "StyledRow",
@@ -209,23 +209,23 @@ 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.5'
213
213
  }).withConfig({
214
214
  displayName: "StyledHeaderRow",
215
215
  componentId: "sc-16ogvdx-0"
216
- })(["border-bottom-color:", ";height:", ";vertical-align:bottom;font-weight:", ";", "{opacity:1;margin-top:0;margin-bottom:calc(", " - 1em);}", ";"], props => getColor('neutralHue', 300, props.theme), getHeaderRowHeight, props => props.theme.fontWeights.semibold, StyledOverflowButton, props => math(`${getHeaderRowHeight(props)} / 2`), props => retrieveComponentStyles(COMPONENT_ID$5, props));
216
+ })(["border-bottom-color:", ";height:", ";vertical-align:bottom;font-weight:", ";", "{opacity:1;margin-top:0;margin-bottom:calc(", " - 1em);}", ";"], props => getColorV8('neutralHue', 300, props.theme), getHeaderRowHeight, props => props.theme.fontWeights.semibold, StyledOverflowButton, props => math(`${getHeaderRowHeight(props)} / 2`), props => retrieveComponentStyles(COMPONENT_ID$5, props));
217
217
  StyledHeaderRow.defaultProps = {
218
218
  theme: DEFAULT_THEME
219
219
  };
220
220
 
221
221
  const COMPONENT_ID$4 = 'tables.head';
222
222
  const stickyStyles = props => {
223
- const borderColor = getColor('neutralHue', 300, props.theme);
223
+ const borderColor = getColorV8('neutralHue', 300, props.theme);
224
224
  return css(["position:sticky;top:0;z-index:1;box-shadow:inset 0 -", " 0 ", ";background-color:", ";& > ", ":last-child{border-bottom-color:transparent;}"], props.theme.borderWidths.sm, borderColor, props.theme.colors.background, StyledHeaderRow);
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.5'
229
229
  }).withConfig({
230
230
  displayName: "StyledHead",
231
231
  componentId: "sc-spf23a-0"
@@ -242,11 +242,11 @@ 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.5'
246
246
  }).withConfig({
247
247
  displayName: "StyledGroupRow",
248
248
  componentId: "sc-mpd0r8-0"
249
- })(["background-color:", ";", " ", ";"], props => getColor('neutralHue', 100, props.theme), props => sizeStyles$1(props), props => retrieveComponentStyles(COMPONENT_ID$3, props));
249
+ })(["background-color:", ";", " ", ";"], props => getColorV8('neutralHue', 100, props.theme), props => sizeStyles$1(props), props => retrieveComponentStyles(COMPONENT_ID$3, props));
250
250
  StyledGroupRow.defaultProps = {
251
251
  theme: DEFAULT_THEME
252
252
  };
@@ -275,30 +275,30 @@ 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.5',
279
279
  type: 'button'
280
280
  }).withConfig({
281
281
  displayName: "StyledSortableButton",
282
282
  componentId: "sc-2s1dli-3"
283
283
  })(["position:relative;transition:box-shadow 0.1s ease-in-out;border:none;border-radius:", ";background-color:transparent;cursor:pointer;padding:0;padding-", ":", ";width:", ";text-decoration:none;color:inherit;font-family:inherit;font-size:inherit;font-weight:", ";", "{opacity:", ";}", "{opacity:", ";color:", ";fill:", ";}&:hover,", "{text-decoration:none;color:", ";", ";", " ", "}", " ", ";"], props => props.theme.borderRadii.sm, props => props.theme.rtl ? 'left' : 'right', props => math(`${props.theme.space.base} + ${props.theme.iconSizes.sm}`), props => props.width, props => props.theme.fontWeights.semibold, StyledSortableStrokeIconWrapper, props => props.sort === undefined && 1, StyledSortableFillIconWrapper, props => props.sort !== undefined && 1, props => {
284
284
  if (props.sort === 'asc') {
285
- return getColor('neutralHue', 600, props.theme);
285
+ return getColorV8('neutralHue', 600, props.theme);
286
286
  } else if (props.sort === 'desc') {
287
- return getColor('neutralHue', 400, props.theme);
287
+ return getColorV8('neutralHue', 400, props.theme);
288
288
  }
289
289
  return undefined;
290
290
  }, props => {
291
291
  if (props.sort === 'asc') {
292
- return getColor('neutralHue', 400, props.theme);
292
+ return getColorV8('neutralHue', 400, props.theme);
293
293
  } else if (props.sort === 'desc') {
294
- return getColor('neutralHue', 600, props.theme);
294
+ return getColorV8('neutralHue', 600, props.theme);
295
295
  }
296
296
  return undefined;
297
- }, SELECTOR_FOCUS_VISIBLE, props => getColor('primaryHue', 600, props.theme), props => props.sort === undefined && `
297
+ }, SELECTOR_FOCUS_VISIBLE, props => getColorV8('primaryHue', 600, props.theme), props => props.sort === undefined && `
298
298
  ${StyledSortableFillIconWrapper} {
299
299
  opacity: 1;
300
- color: ${getColor('primaryHue', 600, props.theme)};
301
- fill: ${getColor('primaryHue', 600, props.theme)};
300
+ color: ${getColorV8('primaryHue', 600, props.theme)};
301
+ fill: ${getColorV8('primaryHue', 600, props.theme)};
302
302
  }
303
303
 
304
304
  ${StyledSortableStrokeIconWrapper} {
@@ -306,13 +306,13 @@ const StyledSortableButton = styled.button.attrs({
306
306
  }
307
307
  `, props => props.sort === 'asc' && `
308
308
  ${StyledSortableFillIconWrapper} {
309
- color: ${getColor('primaryHue', 600, props.theme)};
310
- fill: ${getColor('primaryHue', 600, props.theme, 0.25)};
309
+ color: ${getColorV8('primaryHue', 600, props.theme)};
310
+ fill: ${getColorV8('primaryHue', 600, props.theme, 0.25)};
311
311
  }
312
312
  `, props => props.sort === 'desc' && `
313
313
  ${StyledSortableFillIconWrapper} {
314
- color: ${getColor('primaryHue', 600, props.theme, 0.25)};
315
- fill: ${getColor('primaryHue', 600, props.theme)};
314
+ color: ${getColorV8('primaryHue', 600, props.theme, 0.25)};
315
+ fill: ${getColorV8('primaryHue', 600, props.theme)};
316
316
  }
317
317
  `, props => focusStyles({
318
318
  theme: props.theme
@@ -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.5'
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.5'
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/Body.d.ts CHANGED
@@ -6,6 +6,8 @@
6
6
  */
7
7
  import React from 'react';
8
8
  /**
9
+ * @deprecated use `Table.Body` instead
10
+ *
9
11
  * @extends HTMLAttributes<HTMLTableSectionElement>
10
12
  */
11
13
  export declare const Body: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
package/dist/typings/elements/Caption.d.ts CHANGED
@@ -6,6 +6,8 @@
6
6
  */
7
7
  import React from 'react';
8
8
  /**
9
+ * @deprecated use `Table.Caption` instead
10
+ *
9
11
  * @extends HTMLAttributes<HTMLTableCaptionElement>
10
12
  */
11
13
  export declare const Caption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
package/dist/typings/elements/Cell.d.ts CHANGED
@@ -7,6 +7,8 @@
7
7
  import React from 'react';
8
8
  import { ICellProps } from '../types';
9
9
  /**
10
+ * @deprecated use `Table.Cell` instead
11
+ *
10
12
  * @extends TdHTMLAttributes<HTMLTableCellElement>
11
13
  */
12
14
  export declare const Cell: React.ForwardRefExoticComponent<ICellProps & React.RefAttributes<HTMLTableCellElement>>;
package/dist/typings/elements/GroupRow.d.ts CHANGED
@@ -6,6 +6,8 @@
6
6
  */
7
7
  import React from 'react';
8
8
  /**
9
+ * @deprecated use `Table.GroupRow` instead
10
+ *
9
11
  * @extends HTMLAttributes<HTMLTableRowElement>
10
12
  */
11
13
  export declare const GroupRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
package/dist/typings/elements/Head.d.ts CHANGED
@@ -7,6 +7,8 @@
7
7
  import React from 'react';
8
8
  import { IHeadProps } from '../types';
9
9
  /**
10
+ * @deprecated use `Table.Head` instead
11
+ *
10
12
  * @extends HTMLAttributes<HTMLTableSectionElement>
11
13
  */
12
14
  export declare const Head: React.ForwardRefExoticComponent<IHeadProps & React.RefAttributes<HTMLTableSectionElement>>;
package/dist/typings/elements/HeaderCell.d.ts CHANGED
@@ -7,6 +7,8 @@
7
7
  import React from 'react';
8
8
  import { IHeaderCellProps } from '../types';
9
9
  /**
10
+ * @deprecated use `Table.HeaderCell` instead
11
+ *
10
12
  * @extends ThHTMLAttributes<HTMLTableCellElement>
11
13
  */
12
14
  export declare const HeaderCell: React.ForwardRefExoticComponent<IHeaderCellProps & React.RefAttributes<HTMLTableCellElement>>;
package/dist/typings/elements/HeaderRow.d.ts CHANGED
@@ -6,6 +6,8 @@
6
6
  */
7
7
  import React from 'react';
8
8
  /**
9
+ * @deprecated use `Table.HeaderRow` instead
10
+ *
9
11
  * @extends HTMLAttributes<HTMLTableRowElement>
10
12
  */
11
13
  export declare const HeaderRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
package/dist/typings/elements/OverflowButton.d.ts CHANGED
@@ -14,6 +14,8 @@ export interface IOverflowButtonProps extends ButtonHTMLAttributes<HTMLButtonEle
14
14
  isFocused?: boolean;
15
15
  }
16
16
  /**
17
+ * @deprecated use `Table.OverflowButton` instead
18
+ *
17
19
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
18
20
  */
19
21
  export declare const OverflowButton: React.ForwardRefExoticComponent<IOverflowButtonProps & React.RefAttributes<HTMLButtonElement>>;
package/dist/typings/elements/Row.d.ts CHANGED
@@ -7,6 +7,8 @@
7
7
  import React from 'react';
8
8
  import { IRowProps } from '../types';
9
9
  /**
10
+ * @deprecated use `Table.Row` instead
11
+ *
10
12
  * @extends HTMLAttributes<HTMLTableRowElement>
11
13
  */
12
14
  export declare const Row: React.ForwardRefExoticComponent<IRowProps & React.RefAttributes<HTMLTableRowElement>>;
package/dist/typings/elements/SortableCell.d.ts CHANGED
@@ -7,6 +7,8 @@
7
7
  import React from 'react';
8
8
  import { ISortableCellProps } from '../types';
9
9
  /**
10
+ * @deprecated use `Table.SortableCell` instead
11
+ *
10
12
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
11
13
  */
12
14
  export declare const SortableCell: React.ForwardRefExoticComponent<ISortableCellProps & React.RefAttributes<HTMLButtonElement>>;
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/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.5",
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>",
@@ -30,12 +30,12 @@
30
30
  "@zendeskgarden/react-theming": "^8.67.0",
31
31
  "react": ">=16.8.0",
32
32
  "react-dom": ">=16.8.0",
33
- "styled-components": "^5.1.0"
33
+ "styled-components": "^5.3.1"
34
34
  },
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.5",
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": "806fa33feb06142c3f69b6a87b53628469117e4d"
54
54
  }