@zendeskgarden/react-tables 9.4.0 → 9.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/styled/StyledBody.js +3 -3
- package/dist/esm/styled/StyledCaption.js +3 -3
- package/dist/esm/styled/StyledCell.js +3 -3
- package/dist/esm/styled/StyledGroupRow.js +3 -3
- package/dist/esm/styled/StyledHead.js +3 -3
- package/dist/esm/styled/StyledHeaderCell.js +3 -3
- package/dist/esm/styled/StyledHeaderRow.js +3 -3
- package/dist/esm/styled/StyledHiddenCell.js +3 -3
- package/dist/esm/styled/StyledOverflowButton.js +3 -3
- package/dist/esm/styled/StyledRow.js +3 -3
- package/dist/esm/styled/StyledSortableButton.js +3 -3
- package/dist/esm/styled/StyledTable.js +3 -3
- package/dist/index.cjs.js +24 -24
- package/package.json +5 -5
|
@@ -5,15 +5,15 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'tables.body';
|
|
11
11
|
const StyledBody = styled.tbody.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.
|
|
13
|
+
'data-garden-version': '9.5.0'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledBody",
|
|
16
16
|
componentId: "sc-14ud6y-0"
|
|
17
|
-
})(["", ";"],
|
|
17
|
+
})(["", ";"], componentStyles);
|
|
18
18
|
|
|
19
19
|
export { StyledBody };
|
|
@@ -5,15 +5,15 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'tables.caption';
|
|
11
11
|
const StyledCaption = styled.caption.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.
|
|
13
|
+
'data-garden-version': '9.5.0'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledCaption",
|
|
16
16
|
componentId: "sc-113y327-0"
|
|
17
|
-
})(["display:table-caption;text-align:", ";", ";"], props => props.theme.rtl ? 'right' : 'left',
|
|
17
|
+
})(["display:table-caption;text-align:", ";", ";"], props => props.theme.rtl ? 'right' : 'left', componentStyles);
|
|
18
18
|
|
|
19
19
|
export { StyledCaption };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { math } from 'polished';
|
|
9
|
-
import {
|
|
9
|
+
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { getLineHeight } from './StyledTable.js';
|
|
11
11
|
import { getRowHeight } from './style-utils.js';
|
|
12
12
|
|
|
@@ -35,10 +35,10 @@ const sizeStyling = props => {
|
|
|
35
35
|
};
|
|
36
36
|
const StyledCell = styled.td.attrs({
|
|
37
37
|
'data-garden-id': COMPONENT_ID,
|
|
38
|
-
'data-garden-version': '9.
|
|
38
|
+
'data-garden-version': '9.5.0'
|
|
39
39
|
}).withConfig({
|
|
40
40
|
displayName: "StyledCell",
|
|
41
41
|
componentId: "sc-8hpncx-0"
|
|
42
|
-
})(["display:table-cell;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out;", ";", ";", ";"], props => sizeStyling(props), props => props.$isTruncated && truncatedStyling,
|
|
42
|
+
})(["display:table-cell;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out;", ";", ";", ";"], props => sizeStyling(props), props => props.$isTruncated && truncatedStyling, componentStyles);
|
|
43
43
|
|
|
44
44
|
export { StyledCell };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { math } from 'polished';
|
|
9
|
-
import {
|
|
9
|
+
import { componentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { StyledBaseRow } from './StyledBaseRow.js';
|
|
11
11
|
import { StyledCell } from './StyledCell.js';
|
|
12
12
|
import { getLineHeight } from './StyledTable.js';
|
|
@@ -35,10 +35,10 @@ const sizeStyles = props => {
|
|
|
35
35
|
};
|
|
36
36
|
const StyledGroupRow = styled(StyledBaseRow).attrs({
|
|
37
37
|
'data-garden-id': COMPONENT_ID,
|
|
38
|
-
'data-garden-version': '9.
|
|
38
|
+
'data-garden-version': '9.5.0'
|
|
39
39
|
}).withConfig({
|
|
40
40
|
displayName: "StyledGroupRow",
|
|
41
41
|
componentId: "sc-mpd0r8-0"
|
|
42
|
-
})(["", " ", " ", ";"], sizeStyles, colorStyles,
|
|
42
|
+
})(["", " ", " ", ";"], sizeStyles, colorStyles, componentStyles);
|
|
43
43
|
|
|
44
44
|
export { StyledGroupRow };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { componentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledHeaderRow } from './StyledHeaderRow.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'tables.head';
|
|
@@ -28,10 +28,10 @@ const stickyStyles = () => {
|
|
|
28
28
|
};
|
|
29
29
|
const StyledHead = styled.thead.attrs({
|
|
30
30
|
'data-garden-id': COMPONENT_ID,
|
|
31
|
-
'data-garden-version': '9.
|
|
31
|
+
'data-garden-version': '9.5.0'
|
|
32
32
|
}).withConfig({
|
|
33
33
|
displayName: "StyledHead",
|
|
34
34
|
componentId: "sc-spf23a-0"
|
|
35
|
-
})(["", " ", " ", ";"], props => props.$isSticky && stickyStyles(), colorStyles,
|
|
35
|
+
})(["", " ", " ", ";"], props => props.$isSticky && stickyStyles(), colorStyles, componentStyles);
|
|
36
36
|
|
|
37
37
|
export { StyledHead };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { math } from 'polished';
|
|
9
|
-
import {
|
|
9
|
+
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { StyledCell } from './StyledCell.js';
|
|
11
11
|
import { StyledSortableButton } from './StyledSortableButton.js';
|
|
12
12
|
import { getLineHeight } from './StyledTable.js';
|
|
@@ -24,7 +24,7 @@ const sizeStyles = props => {
|
|
|
24
24
|
const StyledHeaderCell = styled(StyledCell).attrs({
|
|
25
25
|
as: 'th',
|
|
26
26
|
'data-garden-id': COMPONENT_ID,
|
|
27
|
-
'data-garden-version': '9.
|
|
27
|
+
'data-garden-version': '9.5.0'
|
|
28
28
|
}).withConfig({
|
|
29
29
|
displayName: "StyledHeaderCell",
|
|
30
30
|
componentId: "sc-fzagoe-0"
|
|
@@ -36,6 +36,6 @@ const StyledHeaderCell = styled(StyledCell).attrs({
|
|
|
36
36
|
return 'left';
|
|
37
37
|
}
|
|
38
38
|
return undefined;
|
|
39
|
-
}, props => sizeStyles(props), props => props.$isTruncated && truncatedStyling,
|
|
39
|
+
}, props => sizeStyles(props), props => props.$isTruncated && truncatedStyling, componentStyles);
|
|
40
40
|
|
|
41
41
|
export { StyledHeaderCell };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { math } from 'polished';
|
|
9
|
-
import {
|
|
9
|
+
import { componentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { StyledBaseRow } from './StyledBaseRow.js';
|
|
11
11
|
import { StyledOverflowButton } from './StyledOverflowButton.js';
|
|
12
12
|
|
|
@@ -34,10 +34,10 @@ const sizeStyles = props => {
|
|
|
34
34
|
};
|
|
35
35
|
const StyledHeaderRow = styled(StyledBaseRow).attrs({
|
|
36
36
|
'data-garden-id': COMPONENT_ID,
|
|
37
|
-
'data-garden-version': '9.
|
|
37
|
+
'data-garden-version': '9.5.0'
|
|
38
38
|
}).withConfig({
|
|
39
39
|
displayName: "StyledHeaderRow",
|
|
40
40
|
componentId: "sc-16ogvdx-0"
|
|
41
|
-
})(["font-weight:", ";", " ", " ", "{opacity:1;}", ";"], props => props.theme.fontWeights.semibold, sizeStyles, colorStyles, StyledOverflowButton,
|
|
41
|
+
})(["font-weight:", ";", " ", " ", "{opacity:1;}", ";"], props => props.theme.fontWeights.semibold, sizeStyles, colorStyles, StyledOverflowButton, componentStyles);
|
|
42
42
|
|
|
43
43
|
export { StyledHeaderRow };
|
|
@@ -6,15 +6,15 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { hideVisually } from 'polished';
|
|
9
|
-
import {
|
|
9
|
+
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'tables.hidden_cell';
|
|
12
12
|
const StyledHiddenCell = styled.div.attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.
|
|
14
|
+
'data-garden-version': '9.5.0'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledHiddenCell",
|
|
17
17
|
componentId: "sc-1x454xw-0"
|
|
18
|
-
})(["", " ", ";"], hideVisually(),
|
|
18
|
+
})(["", " ", ";"], hideVisually(), componentStyles);
|
|
19
19
|
|
|
20
20
|
export { StyledHiddenCell };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { math } from 'polished';
|
|
9
|
-
import {
|
|
9
|
+
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { getRowHeight } from './style-utils.js';
|
|
11
11
|
import { IconButton } from '@zendeskgarden/react-buttons';
|
|
12
12
|
|
|
@@ -14,10 +14,10 @@ const COMPONENT_ID = 'tables.overflow_button';
|
|
|
14
14
|
const OVERFLOW_BUTTON_SIZE = '2em';
|
|
15
15
|
const StyledOverflowButton = styled(IconButton).attrs({
|
|
16
16
|
'data-garden-id': COMPONENT_ID,
|
|
17
|
-
'data-garden-version': '9.
|
|
17
|
+
'data-garden-version': '9.5.0'
|
|
18
18
|
}).withConfig({
|
|
19
19
|
displayName: "StyledOverflowButton",
|
|
20
20
|
componentId: "sc-1eba2ml-0"
|
|
21
|
-
})(["margin-top:calc(", " - 1em);width:100%;min-width:unset;height:", ";font-size:inherit;", ";"], props => math(`${getRowHeight(props)} / 2`), OVERFLOW_BUTTON_SIZE,
|
|
21
|
+
})(["margin-top:calc(", " - 1em);width:100%;min-width:unset;height:", ";font-size:inherit;", ";"], props => math(`${getRowHeight(props)} / 2`), OVERFLOW_BUTTON_SIZE, componentStyles);
|
|
22
22
|
|
|
23
23
|
export { StyledOverflowButton };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { componentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledCell } from './StyledCell.js';
|
|
10
10
|
import { StyledBaseRow } from './StyledBaseRow.js';
|
|
11
11
|
import { StyledOverflowButton } from './StyledOverflowButton.js';
|
|
@@ -94,10 +94,10 @@ const sizeStyles = props => {
|
|
|
94
94
|
};
|
|
95
95
|
const StyledRow = styled(StyledBaseRow).attrs({
|
|
96
96
|
'data-garden-id': COMPONENT_ID,
|
|
97
|
-
'data-garden-version': '9.
|
|
97
|
+
'data-garden-version': '9.5.0'
|
|
98
98
|
}).withConfig({
|
|
99
99
|
displayName: "StyledRow",
|
|
100
100
|
componentId: "sc-ek66ow-0"
|
|
101
|
-
})(["", " ", " ", ";"], sizeStyles, colorStyles,
|
|
101
|
+
})(["", " ", " ", ";"], sizeStyles, colorStyles, componentStyles);
|
|
102
102
|
|
|
103
103
|
export { StyledRow };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { math } from 'polished';
|
|
9
|
-
import { SELECTOR_FOCUS_VISIBLE,
|
|
9
|
+
import { SELECTOR_FOCUS_VISIBLE, componentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'tables.sortable';
|
|
12
12
|
const StyledBaseIconWrapper = styled.div.withConfig({
|
|
@@ -82,11 +82,11 @@ const colorStyles = _ref => {
|
|
|
82
82
|
};
|
|
83
83
|
const StyledSortableButton = styled.button.attrs({
|
|
84
84
|
'data-garden-id': COMPONENT_ID,
|
|
85
|
-
'data-garden-version': '9.
|
|
85
|
+
'data-garden-version': '9.5.0',
|
|
86
86
|
type: 'button'
|
|
87
87
|
}).withConfig({
|
|
88
88
|
displayName: "StyledSortableButton",
|
|
89
89
|
componentId: "sc-2s1dli-3"
|
|
90
|
-
})(["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:", ";}&:hover,", "{text-decoration:none;}", " ", ";"], 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, SELECTOR_FOCUS_VISIBLE, colorStyles,
|
|
90
|
+
})(["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:", ";}&:hover,", "{text-decoration:none;}", " ", ";"], 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, SELECTOR_FOCUS_VISIBLE, colorStyles, componentStyles);
|
|
91
91
|
|
|
92
92
|
export { StyledSortableButton, StyledSortableFillIconWrapper, StyledSortableStrokeIconWrapper };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { getColor,
|
|
8
|
+
import { getColor, componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'tables.table';
|
|
11
11
|
const getLineHeight = props => {
|
|
@@ -13,13 +13,13 @@ const getLineHeight = props => {
|
|
|
13
13
|
};
|
|
14
14
|
const StyledTable = styled.table.attrs({
|
|
15
15
|
'data-garden-id': COMPONENT_ID,
|
|
16
|
-
'data-garden-version': '9.
|
|
16
|
+
'data-garden-version': '9.5.0'
|
|
17
17
|
}).withConfig({
|
|
18
18
|
displayName: "StyledTable",
|
|
19
19
|
componentId: "sc-gje7na-0"
|
|
20
20
|
})(["display:table;border:none;width:100%;table-layout:fixed;border-collapse:collapse;border-spacing:0;line-height:", ";color:", ";font-size:", ";direction:", ";", ";"], props => getLineHeight(props), props => getColor({
|
|
21
21
|
variable: 'foreground.default',
|
|
22
22
|
theme: props.theme
|
|
23
|
-
}), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl',
|
|
23
|
+
}), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', componentStyles);
|
|
24
24
|
|
|
25
25
|
export { StyledTable, getLineHeight };
|
package/dist/index.cjs.js
CHANGED
|
@@ -41,20 +41,20 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
|
41
41
|
const COMPONENT_ID$b = 'tables.body';
|
|
42
42
|
const StyledBody = styled__default.default.tbody.attrs({
|
|
43
43
|
'data-garden-id': COMPONENT_ID$b,
|
|
44
|
-
'data-garden-version': '9.
|
|
44
|
+
'data-garden-version': '9.5.0'
|
|
45
45
|
}).withConfig({
|
|
46
46
|
displayName: "StyledBody",
|
|
47
47
|
componentId: "sc-14ud6y-0"
|
|
48
|
-
})(["", ";"],
|
|
48
|
+
})(["", ";"], reactTheming.componentStyles);
|
|
49
49
|
|
|
50
50
|
const COMPONENT_ID$a = 'tables.caption';
|
|
51
51
|
const StyledCaption = styled__default.default.caption.attrs({
|
|
52
52
|
'data-garden-id': COMPONENT_ID$a,
|
|
53
|
-
'data-garden-version': '9.
|
|
53
|
+
'data-garden-version': '9.5.0'
|
|
54
54
|
}).withConfig({
|
|
55
55
|
displayName: "StyledCaption",
|
|
56
56
|
componentId: "sc-113y327-0"
|
|
57
|
-
})(["display:table-caption;text-align:", ";", ";"], props => props.theme.rtl ? 'right' : 'left',
|
|
57
|
+
})(["display:table-caption;text-align:", ";", ";"], props => props.theme.rtl ? 'right' : 'left', reactTheming.componentStyles);
|
|
58
58
|
|
|
59
59
|
const sizeStyles$4 = _ref => {
|
|
60
60
|
let {
|
|
@@ -102,11 +102,11 @@ const COMPONENT_ID$9 = 'tables.overflow_button';
|
|
|
102
102
|
const OVERFLOW_BUTTON_SIZE = '2em';
|
|
103
103
|
const StyledOverflowButton = styled__default.default(reactButtons.IconButton).attrs({
|
|
104
104
|
'data-garden-id': COMPONENT_ID$9,
|
|
105
|
-
'data-garden-version': '9.
|
|
105
|
+
'data-garden-version': '9.5.0'
|
|
106
106
|
}).withConfig({
|
|
107
107
|
displayName: "StyledOverflowButton",
|
|
108
108
|
componentId: "sc-1eba2ml-0"
|
|
109
|
-
})(["margin-top:calc(", " - 1em);width:100%;min-width:unset;height:", ";font-size:inherit;", ";"], props => polished.math(`${getRowHeight(props)} / 2`), OVERFLOW_BUTTON_SIZE,
|
|
109
|
+
})(["margin-top:calc(", " - 1em);width:100%;min-width:unset;height:", ";font-size:inherit;", ";"], props => polished.math(`${getRowHeight(props)} / 2`), OVERFLOW_BUTTON_SIZE, reactTheming.componentStyles);
|
|
110
110
|
|
|
111
111
|
const COMPONENT_ID$8 = 'tables.header_row';
|
|
112
112
|
const getHeaderRowHeight = props => {
|
|
@@ -132,11 +132,11 @@ const sizeStyles$3 = props => {
|
|
|
132
132
|
};
|
|
133
133
|
const StyledHeaderRow = styled__default.default(StyledBaseRow).attrs({
|
|
134
134
|
'data-garden-id': COMPONENT_ID$8,
|
|
135
|
-
'data-garden-version': '9.
|
|
135
|
+
'data-garden-version': '9.5.0'
|
|
136
136
|
}).withConfig({
|
|
137
137
|
displayName: "StyledHeaderRow",
|
|
138
138
|
componentId: "sc-16ogvdx-0"
|
|
139
|
-
})(["font-weight:", ";", " ", " ", "{opacity:1;}", ";"], props => props.theme.fontWeights.semibold, sizeStyles$3, colorStyles$4, StyledOverflowButton,
|
|
139
|
+
})(["font-weight:", ";", " ", " ", "{opacity:1;}", ";"], props => props.theme.fontWeights.semibold, sizeStyles$3, colorStyles$4, StyledOverflowButton, reactTheming.componentStyles);
|
|
140
140
|
|
|
141
141
|
const COMPONENT_ID$7 = 'tables.head';
|
|
142
142
|
const colorStyles$3 = _ref => {
|
|
@@ -158,11 +158,11 @@ const stickyStyles = () => {
|
|
|
158
158
|
};
|
|
159
159
|
const StyledHead = styled__default.default.thead.attrs({
|
|
160
160
|
'data-garden-id': COMPONENT_ID$7,
|
|
161
|
-
'data-garden-version': '9.
|
|
161
|
+
'data-garden-version': '9.5.0'
|
|
162
162
|
}).withConfig({
|
|
163
163
|
displayName: "StyledHead",
|
|
164
164
|
componentId: "sc-spf23a-0"
|
|
165
|
-
})(["", " ", " ", ";"], props => props.$isSticky && stickyStyles(), colorStyles$3,
|
|
165
|
+
})(["", " ", " ", ";"], props => props.$isSticky && stickyStyles(), colorStyles$3, reactTheming.componentStyles);
|
|
166
166
|
|
|
167
167
|
const COMPONENT_ID$6 = 'tables.table';
|
|
168
168
|
const getLineHeight = props => {
|
|
@@ -170,14 +170,14 @@ const getLineHeight = props => {
|
|
|
170
170
|
};
|
|
171
171
|
const StyledTable = styled__default.default.table.attrs({
|
|
172
172
|
'data-garden-id': COMPONENT_ID$6,
|
|
173
|
-
'data-garden-version': '9.
|
|
173
|
+
'data-garden-version': '9.5.0'
|
|
174
174
|
}).withConfig({
|
|
175
175
|
displayName: "StyledTable",
|
|
176
176
|
componentId: "sc-gje7na-0"
|
|
177
177
|
})(["display:table;border:none;width:100%;table-layout:fixed;border-collapse:collapse;border-spacing:0;line-height:", ";color:", ";font-size:", ";direction:", ";", ";"], props => getLineHeight(props), props => reactTheming.getColor({
|
|
178
178
|
variable: 'foreground.default',
|
|
179
179
|
theme: props.theme
|
|
180
|
-
}), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl',
|
|
180
|
+
}), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', reactTheming.componentStyles);
|
|
181
181
|
|
|
182
182
|
const COMPONENT_ID$5 = 'tables.cell';
|
|
183
183
|
const truncatedStyling$1 = styled.css(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
|
|
@@ -204,11 +204,11 @@ const sizeStyling = props => {
|
|
|
204
204
|
};
|
|
205
205
|
const StyledCell = styled__default.default.td.attrs({
|
|
206
206
|
'data-garden-id': COMPONENT_ID$5,
|
|
207
|
-
'data-garden-version': '9.
|
|
207
|
+
'data-garden-version': '9.5.0'
|
|
208
208
|
}).withConfig({
|
|
209
209
|
displayName: "StyledCell",
|
|
210
210
|
componentId: "sc-8hpncx-0"
|
|
211
|
-
})(["display:table-cell;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out;", ";", ";", ";"], props => sizeStyling(props), props => props.$isTruncated && truncatedStyling$1,
|
|
211
|
+
})(["display:table-cell;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out;", ";", ";", ";"], props => sizeStyling(props), props => props.$isTruncated && truncatedStyling$1, reactTheming.componentStyles);
|
|
212
212
|
|
|
213
213
|
const COMPONENT_ID$4 = 'tables.group_row';
|
|
214
214
|
const colorStyles$2 = _ref => {
|
|
@@ -234,11 +234,11 @@ const sizeStyles$2 = props => {
|
|
|
234
234
|
};
|
|
235
235
|
const StyledGroupRow = styled__default.default(StyledBaseRow).attrs({
|
|
236
236
|
'data-garden-id': COMPONENT_ID$4,
|
|
237
|
-
'data-garden-version': '9.
|
|
237
|
+
'data-garden-version': '9.5.0'
|
|
238
238
|
}).withConfig({
|
|
239
239
|
displayName: "StyledGroupRow",
|
|
240
240
|
componentId: "sc-mpd0r8-0"
|
|
241
|
-
})(["", " ", " ", ";"], sizeStyles$2, colorStyles$2,
|
|
241
|
+
})(["", " ", " ", ";"], sizeStyles$2, colorStyles$2, reactTheming.componentStyles);
|
|
242
242
|
|
|
243
243
|
const COMPONENT_ID$3 = 'tables.sortable';
|
|
244
244
|
const StyledBaseIconWrapper = styled__default.default.div.withConfig({
|
|
@@ -314,12 +314,12 @@ const colorStyles$1 = _ref => {
|
|
|
314
314
|
};
|
|
315
315
|
const StyledSortableButton = styled__default.default.button.attrs({
|
|
316
316
|
'data-garden-id': COMPONENT_ID$3,
|
|
317
|
-
'data-garden-version': '9.
|
|
317
|
+
'data-garden-version': '9.5.0',
|
|
318
318
|
type: 'button'
|
|
319
319
|
}).withConfig({
|
|
320
320
|
displayName: "StyledSortableButton",
|
|
321
321
|
componentId: "sc-2s1dli-3"
|
|
322
|
-
})(["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:", ";}&:hover,", "{text-decoration:none;}", " ", ";"], 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, reactTheming.SELECTOR_FOCUS_VISIBLE, colorStyles$1,
|
|
322
|
+
})(["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:", ";}&:hover,", "{text-decoration:none;}", " ", ";"], 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, reactTheming.SELECTOR_FOCUS_VISIBLE, colorStyles$1, reactTheming.componentStyles);
|
|
323
323
|
|
|
324
324
|
const COMPONENT_ID$2 = 'tables.header_cell';
|
|
325
325
|
const truncatedStyling = styled.css(["", "{max-width:100%;overflow:hidden;text-overflow:ellipsis;}"], StyledSortableButton);
|
|
@@ -333,7 +333,7 @@ const sizeStyles$1 = props => {
|
|
|
333
333
|
const StyledHeaderCell = styled__default.default(StyledCell).attrs({
|
|
334
334
|
as: 'th',
|
|
335
335
|
'data-garden-id': COMPONENT_ID$2,
|
|
336
|
-
'data-garden-version': '9.
|
|
336
|
+
'data-garden-version': '9.5.0'
|
|
337
337
|
}).withConfig({
|
|
338
338
|
displayName: "StyledHeaderCell",
|
|
339
339
|
componentId: "sc-fzagoe-0"
|
|
@@ -345,16 +345,16 @@ const StyledHeaderCell = styled__default.default(StyledCell).attrs({
|
|
|
345
345
|
return 'left';
|
|
346
346
|
}
|
|
347
347
|
return undefined;
|
|
348
|
-
}, props => sizeStyles$1(props), props => props.$isTruncated && truncatedStyling,
|
|
348
|
+
}, props => sizeStyles$1(props), props => props.$isTruncated && truncatedStyling, reactTheming.componentStyles);
|
|
349
349
|
|
|
350
350
|
const COMPONENT_ID$1 = 'tables.hidden_cell';
|
|
351
351
|
const StyledHiddenCell = styled__default.default.div.attrs({
|
|
352
352
|
'data-garden-id': COMPONENT_ID$1,
|
|
353
|
-
'data-garden-version': '9.
|
|
353
|
+
'data-garden-version': '9.5.0'
|
|
354
354
|
}).withConfig({
|
|
355
355
|
displayName: "StyledHiddenCell",
|
|
356
356
|
componentId: "sc-1x454xw-0"
|
|
357
|
-
})(["", " ", ";"], polished.hideVisually(),
|
|
357
|
+
})(["", " ", ";"], polished.hideVisually(), reactTheming.componentStyles);
|
|
358
358
|
|
|
359
359
|
const COMPONENT_ID = 'tables.row';
|
|
360
360
|
const colorStyles = _ref => {
|
|
@@ -439,11 +439,11 @@ const sizeStyles = props => {
|
|
|
439
439
|
};
|
|
440
440
|
const StyledRow = styled__default.default(StyledBaseRow).attrs({
|
|
441
441
|
'data-garden-id': COMPONENT_ID,
|
|
442
|
-
'data-garden-version': '9.
|
|
442
|
+
'data-garden-version': '9.5.0'
|
|
443
443
|
}).withConfig({
|
|
444
444
|
displayName: "StyledRow",
|
|
445
445
|
componentId: "sc-ek66ow-0"
|
|
446
|
-
})(["", " ", " ", ";"], sizeStyles, colorStyles,
|
|
446
|
+
})(["", " ", " ", ";"], sizeStyles, colorStyles, reactTheming.componentStyles);
|
|
447
447
|
|
|
448
448
|
const Body = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledBody, Object.assign({
|
|
449
449
|
ref: ref
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-tables",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.5.0",
|
|
4
4
|
"description": "Components relating to tables in the Garden Design System",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Zendesk Garden <garden@zendesk.com>",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"types": "dist/typings/index.d.ts",
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@zendeskgarden/container-utilities": "^2.0.0",
|
|
25
|
-
"@zendeskgarden/react-buttons": "^9.
|
|
25
|
+
"@zendeskgarden/react-buttons": "^9.5.0",
|
|
26
26
|
"dom-helpers": "^5.1.0",
|
|
27
27
|
"polished": "^4.3.1",
|
|
28
28
|
"prop-types": "^15.5.7"
|
|
@@ -34,8 +34,8 @@
|
|
|
34
34
|
"styled-components": "^5.3.1 || ^6.0.0"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"@zendeskgarden/react-theming": "^9.
|
|
38
|
-
"@zendeskgarden/svg-icons": "7.
|
|
37
|
+
"@zendeskgarden/react-theming": "^9.5.0",
|
|
38
|
+
"@zendeskgarden/svg-icons": "7.5.0"
|
|
39
39
|
},
|
|
40
40
|
"keywords": [
|
|
41
41
|
"components",
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
"access": "public"
|
|
48
48
|
},
|
|
49
49
|
"zendeskgarden:src": "src/index.ts",
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "43546784a9aa985332ddcc6dd09209a11e2c03ff"
|
|
51
51
|
}
|