@zendeskgarden/react-tables 9.0.0-next.23 → 9.0.0-next.25
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/StyledBaseRow.js +1 -4
- package/dist/esm/styled/StyledBody.js +2 -5
- package/dist/esm/styled/StyledCaption.js +2 -5
- package/dist/esm/styled/StyledCell.js +2 -5
- package/dist/esm/styled/StyledGroupRow.js +2 -5
- package/dist/esm/styled/StyledHead.js +2 -5
- package/dist/esm/styled/StyledHeaderCell.js +2 -5
- package/dist/esm/styled/StyledHeaderRow.js +2 -5
- package/dist/esm/styled/StyledHiddenCell.js +2 -5
- package/dist/esm/styled/StyledOverflowButton.js +2 -5
- package/dist/esm/styled/StyledRow.js +2 -5
- package/dist/esm/styled/StyledSortableButton.js +2 -14
- package/dist/esm/styled/StyledTable.js +2 -5
- package/dist/index.cjs.js +12 -60
- package/package.json +4 -4
|
@@ -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 { getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const sizeStyles = _ref => {
|
|
11
11
|
let {
|
|
@@ -39,8 +39,5 @@ const StyledBaseRow = styled.tr.withConfig({
|
|
|
39
39
|
displayName: "StyledBaseRow",
|
|
40
40
|
componentId: "sc-1t4zqg4-0"
|
|
41
41
|
})(["display:table-row;transition:background-color 0.1s ease-in-out;", " ", ""], sizeStyles, colorStyles);
|
|
42
|
-
StyledBaseRow.defaultProps = {
|
|
43
|
-
theme: DEFAULT_THEME
|
|
44
|
-
};
|
|
45
42
|
|
|
46
43
|
export { StyledBaseRow };
|
|
@@ -5,18 +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 { retrieveComponentStyles
|
|
8
|
+
import { retrieveComponentStyles } 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.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.25'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledBody",
|
|
16
16
|
componentId: "sc-14ud6y-0"
|
|
17
17
|
})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledBody.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledBody };
|
|
@@ -5,18 +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 { retrieveComponentStyles
|
|
8
|
+
import { retrieveComponentStyles } 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.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.25'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledCaption",
|
|
16
16
|
componentId: "sc-113y327-0"
|
|
17
17
|
})(["display:table-caption;text-align:", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledCaption.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
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 { retrieveComponentStyles
|
|
9
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { getLineHeight } from './StyledTable.js';
|
|
11
11
|
import { getRowHeight } from './style-utils.js';
|
|
12
12
|
|
|
@@ -35,13 +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.0.0-next.
|
|
38
|
+
'data-garden-version': '9.0.0-next.25'
|
|
39
39
|
}).withConfig({
|
|
40
40
|
displayName: "StyledCell",
|
|
41
41
|
componentId: "sc-8hpncx-0"
|
|
42
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, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
43
|
-
StyledCell.defaultProps = {
|
|
44
|
-
theme: DEFAULT_THEME
|
|
45
|
-
};
|
|
46
43
|
|
|
47
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 { retrieveComponentStyles,
|
|
9
|
+
import { retrieveComponentStyles, 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,13 +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.0.0-next.
|
|
38
|
+
'data-garden-version': '9.0.0-next.25'
|
|
39
39
|
}).withConfig({
|
|
40
40
|
displayName: "StyledGroupRow",
|
|
41
41
|
componentId: "sc-mpd0r8-0"
|
|
42
42
|
})(["", " ", " ", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
43
|
-
StyledGroupRow.defaultProps = {
|
|
44
|
-
theme: DEFAULT_THEME
|
|
45
|
-
};
|
|
46
43
|
|
|
47
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 { retrieveComponentStyles,
|
|
8
|
+
import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledHeaderRow } from './StyledHeaderRow.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'tables.head';
|
|
@@ -28,13 +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.0.0-next.
|
|
31
|
+
'data-garden-version': '9.0.0-next.25'
|
|
32
32
|
}).withConfig({
|
|
33
33
|
displayName: "StyledHead",
|
|
34
34
|
componentId: "sc-spf23a-0"
|
|
35
35
|
})(["", " ", " ", ";"], props => props.$isSticky && stickyStyles(), colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
36
|
-
StyledHead.defaultProps = {
|
|
37
|
-
theme: DEFAULT_THEME
|
|
38
|
-
};
|
|
39
36
|
|
|
40
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 { retrieveComponentStyles
|
|
9
|
+
import { retrieveComponentStyles } 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.0.0-next.
|
|
27
|
+
'data-garden-version': '9.0.0-next.25'
|
|
28
28
|
}).withConfig({
|
|
29
29
|
displayName: "StyledHeaderCell",
|
|
30
30
|
componentId: "sc-fzagoe-0"
|
|
@@ -37,8 +37,5 @@ const StyledHeaderCell = styled(StyledCell).attrs({
|
|
|
37
37
|
}
|
|
38
38
|
return undefined;
|
|
39
39
|
}, props => sizeStyles(props), props => props.$isTruncated && truncatedStyling, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
40
|
-
StyledHeaderCell.defaultProps = {
|
|
41
|
-
theme: DEFAULT_THEME
|
|
42
|
-
};
|
|
43
40
|
|
|
44
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 { retrieveComponentStyles,
|
|
9
|
+
import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { StyledBaseRow } from './StyledBaseRow.js';
|
|
11
11
|
import { StyledOverflowButton } from './StyledOverflowButton.js';
|
|
12
12
|
|
|
@@ -34,13 +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.0.0-next.
|
|
37
|
+
'data-garden-version': '9.0.0-next.25'
|
|
38
38
|
}).withConfig({
|
|
39
39
|
displayName: "StyledHeaderRow",
|
|
40
40
|
componentId: "sc-16ogvdx-0"
|
|
41
41
|
})(["font-weight:", ";", " ", " ", "{opacity:1;}", ";"], props => props.theme.fontWeights.semibold, sizeStyles, colorStyles, StyledOverflowButton, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
42
|
-
StyledHeaderRow.defaultProps = {
|
|
43
|
-
theme: DEFAULT_THEME
|
|
44
|
-
};
|
|
45
42
|
|
|
46
43
|
export { StyledHeaderRow };
|
|
@@ -6,18 +6,15 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { hideVisually } from 'polished';
|
|
9
|
-
import { retrieveComponentStyles
|
|
9
|
+
import { retrieveComponentStyles } 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.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.25'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledHiddenCell",
|
|
17
17
|
componentId: "sc-1x454xw-0"
|
|
18
18
|
})(["", " ", ";"], hideVisually(), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
19
|
-
StyledHiddenCell.defaultProps = {
|
|
20
|
-
theme: DEFAULT_THEME
|
|
21
|
-
};
|
|
22
19
|
|
|
23
20
|
export { StyledHiddenCell };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { math } from 'polished';
|
|
9
|
-
import { retrieveComponentStyles
|
|
9
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { getRowHeight } from './style-utils.js';
|
|
11
11
|
import { IconButton } from '@zendeskgarden/react-buttons';
|
|
12
12
|
|
|
@@ -14,13 +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.0.0-next.
|
|
17
|
+
'data-garden-version': '9.0.0-next.25'
|
|
18
18
|
}).withConfig({
|
|
19
19
|
displayName: "StyledOverflowButton",
|
|
20
20
|
componentId: "sc-1eba2ml-0"
|
|
21
21
|
})(["margin-top:calc(", " - 1em);width:100%;min-width:unset;height:", ";font-size:inherit;", ";"], props => math(`${getRowHeight(props)} / 2`), OVERFLOW_BUTTON_SIZE, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
22
|
-
StyledOverflowButton.defaultProps = {
|
|
23
|
-
theme: DEFAULT_THEME
|
|
24
|
-
};
|
|
25
22
|
|
|
26
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 { retrieveComponentStyles,
|
|
8
|
+
import { retrieveComponentStyles, 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,13 +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.0.0-next.
|
|
97
|
+
'data-garden-version': '9.0.0-next.25'
|
|
98
98
|
}).withConfig({
|
|
99
99
|
displayName: "StyledRow",
|
|
100
100
|
componentId: "sc-ek66ow-0"
|
|
101
101
|
})(["", " ", " ", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
102
|
-
StyledRow.defaultProps = {
|
|
103
|
-
theme: DEFAULT_THEME
|
|
104
|
-
};
|
|
105
102
|
|
|
106
103
|
export { StyledRow };
|
|
@@ -6,30 +6,21 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { math } from 'polished';
|
|
9
|
-
import {
|
|
9
|
+
import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'tables.sortable';
|
|
12
12
|
const StyledBaseIconWrapper = styled.div.withConfig({
|
|
13
13
|
displayName: "StyledSortableButton__StyledBaseIconWrapper",
|
|
14
14
|
componentId: "sc-2s1dli-0"
|
|
15
15
|
})(["display:flex;position:absolute;top:0;", ":0;align-items:center;justify-content:center;opacity:0;width:", ";height:100%;color:inherit;fill:inherit;"], props => props.theme.rtl ? 'left' : 'right', props => props.theme.iconSizes.sm);
|
|
16
|
-
StyledBaseIconWrapper.defaultProps = {
|
|
17
|
-
theme: DEFAULT_THEME
|
|
18
|
-
};
|
|
19
16
|
const StyledSortableStrokeIconWrapper = styled(StyledBaseIconWrapper).withConfig({
|
|
20
17
|
displayName: "StyledSortableButton__StyledSortableStrokeIconWrapper",
|
|
21
18
|
componentId: "sc-2s1dli-1"
|
|
22
19
|
})([""]);
|
|
23
|
-
StyledSortableStrokeIconWrapper.defaultProps = {
|
|
24
|
-
theme: DEFAULT_THEME
|
|
25
|
-
};
|
|
26
20
|
const StyledSortableFillIconWrapper = styled(StyledBaseIconWrapper).withConfig({
|
|
27
21
|
displayName: "StyledSortableButton__StyledSortableFillIconWrapper",
|
|
28
22
|
componentId: "sc-2s1dli-2"
|
|
29
23
|
})([""]);
|
|
30
|
-
StyledSortableFillIconWrapper.defaultProps = {
|
|
31
|
-
theme: DEFAULT_THEME
|
|
32
|
-
};
|
|
33
24
|
const colorStyles = _ref => {
|
|
34
25
|
let {
|
|
35
26
|
theme,
|
|
@@ -91,14 +82,11 @@ const colorStyles = _ref => {
|
|
|
91
82
|
};
|
|
92
83
|
const StyledSortableButton = styled.button.attrs({
|
|
93
84
|
'data-garden-id': COMPONENT_ID,
|
|
94
|
-
'data-garden-version': '9.0.0-next.
|
|
85
|
+
'data-garden-version': '9.0.0-next.25',
|
|
95
86
|
type: 'button'
|
|
96
87
|
}).withConfig({
|
|
97
88
|
displayName: "StyledSortableButton",
|
|
98
89
|
componentId: "sc-2s1dli-3"
|
|
99
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, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
100
|
-
StyledSortableButton.defaultProps = {
|
|
101
|
-
theme: DEFAULT_THEME
|
|
102
|
-
};
|
|
103
91
|
|
|
104
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, retrieveComponentStyles
|
|
8
|
+
import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'tables.table';
|
|
11
11
|
const getLineHeight = props => {
|
|
@@ -13,7 +13,7 @@ const getLineHeight = props => {
|
|
|
13
13
|
};
|
|
14
14
|
const StyledTable = styled.table.attrs({
|
|
15
15
|
'data-garden-id': COMPONENT_ID,
|
|
16
|
-
'data-garden-version': '9.0.0-next.
|
|
16
|
+
'data-garden-version': '9.0.0-next.25'
|
|
17
17
|
}).withConfig({
|
|
18
18
|
displayName: "StyledTable",
|
|
19
19
|
componentId: "sc-gje7na-0"
|
|
@@ -21,8 +21,5 @@ const StyledTable = styled.table.attrs({
|
|
|
21
21
|
variable: 'foreground.default',
|
|
22
22
|
theme: props.theme
|
|
23
23
|
}), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
24
|
-
StyledTable.defaultProps = {
|
|
25
|
-
theme: DEFAULT_THEME
|
|
26
|
-
};
|
|
27
24
|
|
|
28
25
|
export { StyledTable, getLineHeight };
|
package/dist/index.cjs.js
CHANGED
|
@@ -41,26 +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.0.0-next.
|
|
44
|
+
'data-garden-version': '9.0.0-next.25'
|
|
45
45
|
}).withConfig({
|
|
46
46
|
displayName: "StyledBody",
|
|
47
47
|
componentId: "sc-14ud6y-0"
|
|
48
48
|
})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
|
|
49
|
-
StyledBody.defaultProps = {
|
|
50
|
-
theme: reactTheming.DEFAULT_THEME
|
|
51
|
-
};
|
|
52
49
|
|
|
53
50
|
const COMPONENT_ID$a = 'tables.caption';
|
|
54
51
|
const StyledCaption = styled__default.default.caption.attrs({
|
|
55
52
|
'data-garden-id': COMPONENT_ID$a,
|
|
56
|
-
'data-garden-version': '9.0.0-next.
|
|
53
|
+
'data-garden-version': '9.0.0-next.25'
|
|
57
54
|
}).withConfig({
|
|
58
55
|
displayName: "StyledCaption",
|
|
59
56
|
componentId: "sc-113y327-0"
|
|
60
57
|
})(["display:table-caption;text-align:", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
|
|
61
|
-
StyledCaption.defaultProps = {
|
|
62
|
-
theme: reactTheming.DEFAULT_THEME
|
|
63
|
-
};
|
|
64
58
|
|
|
65
59
|
const sizeStyles$4 = _ref => {
|
|
66
60
|
let {
|
|
@@ -94,9 +88,6 @@ const StyledBaseRow = styled__default.default.tr.withConfig({
|
|
|
94
88
|
displayName: "StyledBaseRow",
|
|
95
89
|
componentId: "sc-1t4zqg4-0"
|
|
96
90
|
})(["display:table-row;transition:background-color 0.1s ease-in-out;", " ", ""], sizeStyles$4, colorStyles$5);
|
|
97
|
-
StyledBaseRow.defaultProps = {
|
|
98
|
-
theme: reactTheming.DEFAULT_THEME
|
|
99
|
-
};
|
|
100
91
|
|
|
101
92
|
const getRowHeight = props => {
|
|
102
93
|
if (props.$size === 'large') {
|
|
@@ -111,14 +102,11 @@ const COMPONENT_ID$9 = 'tables.overflow_button';
|
|
|
111
102
|
const OVERFLOW_BUTTON_SIZE = '2em';
|
|
112
103
|
const StyledOverflowButton = styled__default.default(reactButtons.IconButton).attrs({
|
|
113
104
|
'data-garden-id': COMPONENT_ID$9,
|
|
114
|
-
'data-garden-version': '9.0.0-next.
|
|
105
|
+
'data-garden-version': '9.0.0-next.25'
|
|
115
106
|
}).withConfig({
|
|
116
107
|
displayName: "StyledOverflowButton",
|
|
117
108
|
componentId: "sc-1eba2ml-0"
|
|
118
109
|
})(["margin-top:calc(", " - 1em);width:100%;min-width:unset;height:", ";font-size:inherit;", ";"], props => polished.math(`${getRowHeight(props)} / 2`), OVERFLOW_BUTTON_SIZE, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
|
|
119
|
-
StyledOverflowButton.defaultProps = {
|
|
120
|
-
theme: reactTheming.DEFAULT_THEME
|
|
121
|
-
};
|
|
122
110
|
|
|
123
111
|
const COMPONENT_ID$8 = 'tables.header_row';
|
|
124
112
|
const getHeaderRowHeight = props => {
|
|
@@ -144,14 +132,11 @@ const sizeStyles$3 = props => {
|
|
|
144
132
|
};
|
|
145
133
|
const StyledHeaderRow = styled__default.default(StyledBaseRow).attrs({
|
|
146
134
|
'data-garden-id': COMPONENT_ID$8,
|
|
147
|
-
'data-garden-version': '9.0.0-next.
|
|
135
|
+
'data-garden-version': '9.0.0-next.25'
|
|
148
136
|
}).withConfig({
|
|
149
137
|
displayName: "StyledHeaderRow",
|
|
150
138
|
componentId: "sc-16ogvdx-0"
|
|
151
139
|
})(["font-weight:", ";", " ", " ", "{opacity:1;}", ";"], props => props.theme.fontWeights.semibold, sizeStyles$3, colorStyles$4, StyledOverflowButton, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
|
|
152
|
-
StyledHeaderRow.defaultProps = {
|
|
153
|
-
theme: reactTheming.DEFAULT_THEME
|
|
154
|
-
};
|
|
155
140
|
|
|
156
141
|
const COMPONENT_ID$7 = 'tables.head';
|
|
157
142
|
const colorStyles$3 = _ref => {
|
|
@@ -173,14 +158,11 @@ const stickyStyles = () => {
|
|
|
173
158
|
};
|
|
174
159
|
const StyledHead = styled__default.default.thead.attrs({
|
|
175
160
|
'data-garden-id': COMPONENT_ID$7,
|
|
176
|
-
'data-garden-version': '9.0.0-next.
|
|
161
|
+
'data-garden-version': '9.0.0-next.25'
|
|
177
162
|
}).withConfig({
|
|
178
163
|
displayName: "StyledHead",
|
|
179
164
|
componentId: "sc-spf23a-0"
|
|
180
165
|
})(["", " ", " ", ";"], props => props.$isSticky && stickyStyles(), colorStyles$3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
|
|
181
|
-
StyledHead.defaultProps = {
|
|
182
|
-
theme: reactTheming.DEFAULT_THEME
|
|
183
|
-
};
|
|
184
166
|
|
|
185
167
|
const COMPONENT_ID$6 = 'tables.table';
|
|
186
168
|
const getLineHeight = props => {
|
|
@@ -188,7 +170,7 @@ const getLineHeight = props => {
|
|
|
188
170
|
};
|
|
189
171
|
const StyledTable = styled__default.default.table.attrs({
|
|
190
172
|
'data-garden-id': COMPONENT_ID$6,
|
|
191
|
-
'data-garden-version': '9.0.0-next.
|
|
173
|
+
'data-garden-version': '9.0.0-next.25'
|
|
192
174
|
}).withConfig({
|
|
193
175
|
displayName: "StyledTable",
|
|
194
176
|
componentId: "sc-gje7na-0"
|
|
@@ -196,9 +178,6 @@ const StyledTable = styled__default.default.table.attrs({
|
|
|
196
178
|
variable: 'foreground.default',
|
|
197
179
|
theme: props.theme
|
|
198
180
|
}), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
|
|
199
|
-
StyledTable.defaultProps = {
|
|
200
|
-
theme: reactTheming.DEFAULT_THEME
|
|
201
|
-
};
|
|
202
181
|
|
|
203
182
|
const COMPONENT_ID$5 = 'tables.cell';
|
|
204
183
|
const truncatedStyling$1 = styled.css(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
|
|
@@ -225,14 +204,11 @@ const sizeStyling = props => {
|
|
|
225
204
|
};
|
|
226
205
|
const StyledCell = styled__default.default.td.attrs({
|
|
227
206
|
'data-garden-id': COMPONENT_ID$5,
|
|
228
|
-
'data-garden-version': '9.0.0-next.
|
|
207
|
+
'data-garden-version': '9.0.0-next.25'
|
|
229
208
|
}).withConfig({
|
|
230
209
|
displayName: "StyledCell",
|
|
231
210
|
componentId: "sc-8hpncx-0"
|
|
232
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, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
|
|
233
|
-
StyledCell.defaultProps = {
|
|
234
|
-
theme: reactTheming.DEFAULT_THEME
|
|
235
|
-
};
|
|
236
212
|
|
|
237
213
|
const COMPONENT_ID$4 = 'tables.group_row';
|
|
238
214
|
const colorStyles$2 = _ref => {
|
|
@@ -258,37 +234,25 @@ const sizeStyles$2 = props => {
|
|
|
258
234
|
};
|
|
259
235
|
const StyledGroupRow = styled__default.default(StyledBaseRow).attrs({
|
|
260
236
|
'data-garden-id': COMPONENT_ID$4,
|
|
261
|
-
'data-garden-version': '9.0.0-next.
|
|
237
|
+
'data-garden-version': '9.0.0-next.25'
|
|
262
238
|
}).withConfig({
|
|
263
239
|
displayName: "StyledGroupRow",
|
|
264
240
|
componentId: "sc-mpd0r8-0"
|
|
265
241
|
})(["", " ", " ", ";"], sizeStyles$2, colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
|
|
266
|
-
StyledGroupRow.defaultProps = {
|
|
267
|
-
theme: reactTheming.DEFAULT_THEME
|
|
268
|
-
};
|
|
269
242
|
|
|
270
243
|
const COMPONENT_ID$3 = 'tables.sortable';
|
|
271
244
|
const StyledBaseIconWrapper = styled__default.default.div.withConfig({
|
|
272
245
|
displayName: "StyledSortableButton__StyledBaseIconWrapper",
|
|
273
246
|
componentId: "sc-2s1dli-0"
|
|
274
247
|
})(["display:flex;position:absolute;top:0;", ":0;align-items:center;justify-content:center;opacity:0;width:", ";height:100%;color:inherit;fill:inherit;"], props => props.theme.rtl ? 'left' : 'right', props => props.theme.iconSizes.sm);
|
|
275
|
-
StyledBaseIconWrapper.defaultProps = {
|
|
276
|
-
theme: reactTheming.DEFAULT_THEME
|
|
277
|
-
};
|
|
278
248
|
const StyledSortableStrokeIconWrapper = styled__default.default(StyledBaseIconWrapper).withConfig({
|
|
279
249
|
displayName: "StyledSortableButton__StyledSortableStrokeIconWrapper",
|
|
280
250
|
componentId: "sc-2s1dli-1"
|
|
281
251
|
})([""]);
|
|
282
|
-
StyledSortableStrokeIconWrapper.defaultProps = {
|
|
283
|
-
theme: reactTheming.DEFAULT_THEME
|
|
284
|
-
};
|
|
285
252
|
const StyledSortableFillIconWrapper = styled__default.default(StyledBaseIconWrapper).withConfig({
|
|
286
253
|
displayName: "StyledSortableButton__StyledSortableFillIconWrapper",
|
|
287
254
|
componentId: "sc-2s1dli-2"
|
|
288
255
|
})([""]);
|
|
289
|
-
StyledSortableFillIconWrapper.defaultProps = {
|
|
290
|
-
theme: reactTheming.DEFAULT_THEME
|
|
291
|
-
};
|
|
292
256
|
const colorStyles$1 = _ref => {
|
|
293
257
|
let {
|
|
294
258
|
theme,
|
|
@@ -350,15 +314,12 @@ const colorStyles$1 = _ref => {
|
|
|
350
314
|
};
|
|
351
315
|
const StyledSortableButton = styled__default.default.button.attrs({
|
|
352
316
|
'data-garden-id': COMPONENT_ID$3,
|
|
353
|
-
'data-garden-version': '9.0.0-next.
|
|
317
|
+
'data-garden-version': '9.0.0-next.25',
|
|
354
318
|
type: 'button'
|
|
355
319
|
}).withConfig({
|
|
356
320
|
displayName: "StyledSortableButton",
|
|
357
321
|
componentId: "sc-2s1dli-3"
|
|
358
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, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
|
|
359
|
-
StyledSortableButton.defaultProps = {
|
|
360
|
-
theme: reactTheming.DEFAULT_THEME
|
|
361
|
-
};
|
|
362
323
|
|
|
363
324
|
const COMPONENT_ID$2 = 'tables.header_cell';
|
|
364
325
|
const truncatedStyling = styled.css(["", "{max-width:100%;overflow:hidden;text-overflow:ellipsis;}"], StyledSortableButton);
|
|
@@ -372,7 +333,7 @@ const sizeStyles$1 = props => {
|
|
|
372
333
|
const StyledHeaderCell = styled__default.default(StyledCell).attrs({
|
|
373
334
|
as: 'th',
|
|
374
335
|
'data-garden-id': COMPONENT_ID$2,
|
|
375
|
-
'data-garden-version': '9.0.0-next.
|
|
336
|
+
'data-garden-version': '9.0.0-next.25'
|
|
376
337
|
}).withConfig({
|
|
377
338
|
displayName: "StyledHeaderCell",
|
|
378
339
|
componentId: "sc-fzagoe-0"
|
|
@@ -385,21 +346,15 @@ const StyledHeaderCell = styled__default.default(StyledCell).attrs({
|
|
|
385
346
|
}
|
|
386
347
|
return undefined;
|
|
387
348
|
}, props => sizeStyles$1(props), props => props.$isTruncated && truncatedStyling, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
|
|
388
|
-
StyledHeaderCell.defaultProps = {
|
|
389
|
-
theme: reactTheming.DEFAULT_THEME
|
|
390
|
-
};
|
|
391
349
|
|
|
392
350
|
const COMPONENT_ID$1 = 'tables.hidden_cell';
|
|
393
351
|
const StyledHiddenCell = styled__default.default.div.attrs({
|
|
394
352
|
'data-garden-id': COMPONENT_ID$1,
|
|
395
|
-
'data-garden-version': '9.0.0-next.
|
|
353
|
+
'data-garden-version': '9.0.0-next.25'
|
|
396
354
|
}).withConfig({
|
|
397
355
|
displayName: "StyledHiddenCell",
|
|
398
356
|
componentId: "sc-1x454xw-0"
|
|
399
357
|
})(["", " ", ";"], polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
|
|
400
|
-
StyledHiddenCell.defaultProps = {
|
|
401
|
-
theme: reactTheming.DEFAULT_THEME
|
|
402
|
-
};
|
|
403
358
|
|
|
404
359
|
const COMPONENT_ID = 'tables.row';
|
|
405
360
|
const colorStyles = _ref => {
|
|
@@ -484,14 +439,11 @@ const sizeStyles = props => {
|
|
|
484
439
|
};
|
|
485
440
|
const StyledRow = styled__default.default(StyledBaseRow).attrs({
|
|
486
441
|
'data-garden-id': COMPONENT_ID,
|
|
487
|
-
'data-garden-version': '9.0.0-next.
|
|
442
|
+
'data-garden-version': '9.0.0-next.25'
|
|
488
443
|
}).withConfig({
|
|
489
444
|
displayName: "StyledRow",
|
|
490
445
|
componentId: "sc-ek66ow-0"
|
|
491
446
|
})(["", " ", " ", ";"], sizeStyles, colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
|
|
492
|
-
StyledRow.defaultProps = {
|
|
493
|
-
theme: reactTheming.DEFAULT_THEME
|
|
494
|
-
};
|
|
495
447
|
|
|
496
448
|
const Body = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledBody, Object.assign({
|
|
497
449
|
ref: ref
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-tables",
|
|
3
|
-
"version": "9.0.0-next.
|
|
3
|
+
"version": "9.0.0-next.25",
|
|
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.0.0-next.
|
|
25
|
+
"@zendeskgarden/react-buttons": "^9.0.0-next.25",
|
|
26
26
|
"dom-helpers": "^5.1.0",
|
|
27
27
|
"polished": "^4.3.1",
|
|
28
28
|
"prop-types": "^15.5.7"
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@types/react-beautiful-dnd": "13.1.8",
|
|
38
38
|
"@types/react-window": "1.8.8",
|
|
39
|
-
"@zendeskgarden/react-theming": "^9.0.0-next.
|
|
39
|
+
"@zendeskgarden/react-theming": "^9.0.0-next.25",
|
|
40
40
|
"@zendeskgarden/svg-icons": "7.2.0",
|
|
41
41
|
"react-beautiful-dnd": "13.1.1",
|
|
42
42
|
"react-window": "1.8.10"
|
|
@@ -51,5 +51,5 @@
|
|
|
51
51
|
"access": "public"
|
|
52
52
|
},
|
|
53
53
|
"zendeskgarden:src": "src/index.ts",
|
|
54
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "460751d630ab1c46e11810d60e4d7701b9d30b8f"
|
|
55
55
|
}
|