@zendeskgarden/react-tables 8.67.0 → 8.68.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/index.cjs.js +22 -18
- package/dist/index.esm.js +23 -19
- package/package.json +4 -4
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': '8.
|
|
59
|
+
'data-garden-version': '8.68.0'
|
|
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': '8.
|
|
71
|
+
'data-garden-version': '8.68.0'
|
|
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': '8.
|
|
86
|
+
'data-garden-version': '8.68.0'
|
|
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': '8.
|
|
129
|
+
'data-garden-version': '8.68.0'
|
|
130
130
|
}).withConfig({
|
|
131
131
|
displayName: "StyledCell",
|
|
132
132
|
componentId: "sc-8hpncx-0"
|
|
@@ -138,7 +138,6 @@ 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 boxShadow = props.theme.shadows.md(reactTheming.getColor('primaryHue', 600, props.theme, 0.35));
|
|
142
141
|
const hoverBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.08);
|
|
143
142
|
const hoverForegroundColor = reactTheming.getColor('neutralHue', 700, props.theme);
|
|
144
143
|
const activeBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.2);
|
|
@@ -151,16 +150,19 @@ const colorStyles$1 = props => {
|
|
|
151
150
|
} else {
|
|
152
151
|
foregroundColor = reactTheming.getColor('neutralHue', 600, props.theme);
|
|
153
152
|
}
|
|
154
|
-
return styled.css(["color:", ";&:hover{background-color:", ";color:", ";}&:active{background-color:", ";color:", ";}
|
|
153
|
+
return styled.css(["color:", ";&:hover{background-color:", ";color:", ";}", " &:active{background-color:", ";color:", ";}"], foregroundColor, hoverBackgroundColor, hoverForegroundColor, reactTheming.focusStyles({
|
|
154
|
+
theme: props.theme,
|
|
155
|
+
inset: true
|
|
156
|
+
}), activeBackgroundColor, activeForegroundColor);
|
|
155
157
|
};
|
|
156
158
|
const StyledOverflowButton = styled__default.default.button.attrs({
|
|
157
159
|
'data-garden-id': COMPONENT_ID$7,
|
|
158
|
-
'data-garden-version': '8.
|
|
160
|
+
'data-garden-version': '8.68.0',
|
|
159
161
|
type: 'button'
|
|
160
162
|
}).withConfig({
|
|
161
163
|
displayName: "StyledOverflowButton",
|
|
162
164
|
componentId: "sc-1eba2ml-0"
|
|
163
|
-
})(["display:block;transition:opacity 0.25s ease-in-out,background-color 0.1s ease-in-out;opacity:", ";z-index:", ";margin-top:calc(", " - 1em);border:none;border-radius:50%;background-color:transparent;cursor:pointer;padding:0;width:100%;height:", ";text-decoration:none;font-size:inherit;", " &[aria-expanded='true']{opacity:1;}", ";"], props => props.isHovered || props.isFocused || props.isActive ? '1' : '0', props => props.isActive ? '1' : '0', props => polished.math(`${getRowHeight(props)} / 2`), OVERFLOW_BUTTON_SIZE, props => colorStyles$1(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
|
|
165
|
+
})(["display:block;transition:opacity 0.25s ease-in-out,background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out;opacity:", ";z-index:", ";margin-top:calc(", " - 1em);border:none;border-radius:50%;background-color:transparent;cursor:pointer;padding:0;width:100%;height:", ";text-decoration:none;font-size:inherit;", " &[aria-expanded='true']{opacity:1;}", ";"], props => props.isHovered || props.isFocused || props.isActive ? '1' : '0', props => props.isActive ? '1' : '0', props => polished.math(`${getRowHeight(props)} / 2`), OVERFLOW_BUTTON_SIZE, props => colorStyles$1(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
|
|
164
166
|
StyledOverflowButton.defaultProps = {
|
|
165
167
|
theme: reactTheming.DEFAULT_THEME
|
|
166
168
|
};
|
|
@@ -211,7 +213,7 @@ const colorStyles = props => {
|
|
|
211
213
|
};
|
|
212
214
|
const StyledRow = styled__default.default(StyledBaseRow).attrs(props => ({
|
|
213
215
|
'data-garden-id': COMPONENT_ID$6,
|
|
214
|
-
'data-garden-version': '8.
|
|
216
|
+
'data-garden-version': '8.68.0',
|
|
215
217
|
tabIndex: props.isReadOnly ? undefined : -1
|
|
216
218
|
})).withConfig({
|
|
217
219
|
displayName: "StyledRow",
|
|
@@ -232,7 +234,7 @@ const getHeaderRowHeight = props => {
|
|
|
232
234
|
};
|
|
233
235
|
const StyledHeaderRow = styled__default.default(StyledBaseRow).attrs({
|
|
234
236
|
'data-garden-id': COMPONENT_ID$5,
|
|
235
|
-
'data-garden-version': '8.
|
|
237
|
+
'data-garden-version': '8.68.0'
|
|
236
238
|
}).withConfig({
|
|
237
239
|
displayName: "StyledHeaderRow",
|
|
238
240
|
componentId: "sc-16ogvdx-0"
|
|
@@ -248,7 +250,7 @@ const stickyStyles = props => {
|
|
|
248
250
|
};
|
|
249
251
|
const StyledHead = styled__default.default.thead.attrs({
|
|
250
252
|
'data-garden-id': COMPONENT_ID$4,
|
|
251
|
-
'data-garden-version': '8.
|
|
253
|
+
'data-garden-version': '8.68.0'
|
|
252
254
|
}).withConfig({
|
|
253
255
|
displayName: "StyledHead",
|
|
254
256
|
componentId: "sc-spf23a-0"
|
|
@@ -265,7 +267,7 @@ const sizeStyles$1 = props => {
|
|
|
265
267
|
};
|
|
266
268
|
const StyledGroupRow = styled__default.default(StyledBaseRow).attrs({
|
|
267
269
|
'data-garden-id': COMPONENT_ID$3,
|
|
268
|
-
'data-garden-version': '8.
|
|
270
|
+
'data-garden-version': '8.68.0'
|
|
269
271
|
}).withConfig({
|
|
270
272
|
displayName: "StyledGroupRow",
|
|
271
273
|
componentId: "sc-mpd0r8-0"
|
|
@@ -298,12 +300,12 @@ StyledSortableFillIconWrapper.defaultProps = {
|
|
|
298
300
|
};
|
|
299
301
|
const StyledSortableButton = styled__default.default.button.attrs({
|
|
300
302
|
'data-garden-id': COMPONENT_ID$2,
|
|
301
|
-
'data-garden-version': '8.
|
|
303
|
+
'data-garden-version': '8.68.0',
|
|
302
304
|
type: 'button'
|
|
303
305
|
}).withConfig({
|
|
304
306
|
displayName: "StyledSortableButton",
|
|
305
307
|
componentId: "sc-2s1dli-3"
|
|
306
|
-
})(["position:relative;border:none;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
|
|
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 => {
|
|
307
309
|
if (props.sort === 'asc') {
|
|
308
310
|
return reactTheming.getColor('neutralHue', 600, props.theme);
|
|
309
311
|
} else if (props.sort === 'desc') {
|
|
@@ -317,7 +319,7 @@ const StyledSortableButton = styled__default.default.button.attrs({
|
|
|
317
319
|
return reactTheming.getColor('neutralHue', 600, props.theme);
|
|
318
320
|
}
|
|
319
321
|
return undefined;
|
|
320
|
-
}, props => reactTheming.getColor('primaryHue', 600, props.theme), props => props.sort === undefined && `
|
|
322
|
+
}, reactTheming.SELECTOR_FOCUS_VISIBLE, props => reactTheming.getColor('primaryHue', 600, props.theme), props => props.sort === undefined && `
|
|
321
323
|
${StyledSortableFillIconWrapper} {
|
|
322
324
|
opacity: 1;
|
|
323
325
|
color: ${reactTheming.getColor('primaryHue', 600, props.theme)};
|
|
@@ -337,7 +339,9 @@ const StyledSortableButton = styled__default.default.button.attrs({
|
|
|
337
339
|
color: ${reactTheming.getColor('primaryHue', 600, props.theme, 0.25)};
|
|
338
340
|
fill: ${reactTheming.getColor('primaryHue', 600, props.theme)};
|
|
339
341
|
}
|
|
340
|
-
`, props => reactTheming.
|
|
342
|
+
`, props => reactTheming.focusStyles({
|
|
343
|
+
theme: props.theme
|
|
344
|
+
}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
|
|
341
345
|
StyledSortableButton.defaultProps = {
|
|
342
346
|
theme: reactTheming.DEFAULT_THEME
|
|
343
347
|
};
|
|
@@ -354,7 +358,7 @@ const sizeStyles = props => {
|
|
|
354
358
|
const StyledHeaderCell = styled__default.default(StyledCell).attrs({
|
|
355
359
|
as: 'th',
|
|
356
360
|
'data-garden-id': COMPONENT_ID$1,
|
|
357
|
-
'data-garden-version': '8.
|
|
361
|
+
'data-garden-version': '8.68.0'
|
|
358
362
|
}).withConfig({
|
|
359
363
|
displayName: "StyledHeaderCell",
|
|
360
364
|
componentId: "sc-fzagoe-0"
|
|
@@ -374,7 +378,7 @@ StyledHeaderCell.defaultProps = {
|
|
|
374
378
|
const COMPONENT_ID = 'tables.hidden_cell';
|
|
375
379
|
const StyledHiddenCell = styled__default.default.div.attrs({
|
|
376
380
|
'data-garden-id': COMPONENT_ID,
|
|
377
|
-
'data-garden-version': '8.
|
|
381
|
+
'data-garden-version': '8.68.0'
|
|
378
382
|
}).withConfig({
|
|
379
383
|
displayName: "StyledHiddenCell",
|
|
380
384
|
componentId: "sc-1x454xw-0"
|
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 } from '@zendeskgarden/react-theming';
|
|
11
|
+
import { retrieveComponentStyles, DEFAULT_THEME, getColor, 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': '8.
|
|
34
|
+
'data-garden-version': '8.68.0'
|
|
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': '8.
|
|
46
|
+
'data-garden-version': '8.68.0'
|
|
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': '8.
|
|
61
|
+
'data-garden-version': '8.68.0'
|
|
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': '8.
|
|
104
|
+
'data-garden-version': '8.68.0'
|
|
105
105
|
}).withConfig({
|
|
106
106
|
displayName: "StyledCell",
|
|
107
107
|
componentId: "sc-8hpncx-0"
|
|
@@ -113,7 +113,6 @@ 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 boxShadow = props.theme.shadows.md(getColor('primaryHue', 600, props.theme, 0.35));
|
|
117
116
|
const hoverBackgroundColor = getColor('primaryHue', 600, props.theme, 0.08);
|
|
118
117
|
const hoverForegroundColor = getColor('neutralHue', 700, props.theme);
|
|
119
118
|
const activeBackgroundColor = getColor('primaryHue', 600, props.theme, 0.2);
|
|
@@ -126,16 +125,19 @@ const colorStyles$1 = props => {
|
|
|
126
125
|
} else {
|
|
127
126
|
foregroundColor = getColor('neutralHue', 600, props.theme);
|
|
128
127
|
}
|
|
129
|
-
return css(["color:", ";&:hover{background-color:", ";color:", ";}&:active{background-color:", ";color:", ";}
|
|
128
|
+
return css(["color:", ";&:hover{background-color:", ";color:", ";}", " &:active{background-color:", ";color:", ";}"], foregroundColor, hoverBackgroundColor, hoverForegroundColor, focusStyles({
|
|
129
|
+
theme: props.theme,
|
|
130
|
+
inset: true
|
|
131
|
+
}), activeBackgroundColor, activeForegroundColor);
|
|
130
132
|
};
|
|
131
133
|
const StyledOverflowButton = styled.button.attrs({
|
|
132
134
|
'data-garden-id': COMPONENT_ID$7,
|
|
133
|
-
'data-garden-version': '8.
|
|
135
|
+
'data-garden-version': '8.68.0',
|
|
134
136
|
type: 'button'
|
|
135
137
|
}).withConfig({
|
|
136
138
|
displayName: "StyledOverflowButton",
|
|
137
139
|
componentId: "sc-1eba2ml-0"
|
|
138
|
-
})(["display:block;transition:opacity 0.25s ease-in-out,background-color 0.1s ease-in-out;opacity:", ";z-index:", ";margin-top:calc(", " - 1em);border:none;border-radius:50%;background-color:transparent;cursor:pointer;padding:0;width:100%;height:", ";text-decoration:none;font-size:inherit;", " &[aria-expanded='true']{opacity:1;}", ";"], props => props.isHovered || props.isFocused || props.isActive ? '1' : '0', props => props.isActive ? '1' : '0', props => math(`${getRowHeight(props)} / 2`), OVERFLOW_BUTTON_SIZE, props => colorStyles$1(props), props => retrieveComponentStyles(COMPONENT_ID$7, props));
|
|
140
|
+
})(["display:block;transition:opacity 0.25s ease-in-out,background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out;opacity:", ";z-index:", ";margin-top:calc(", " - 1em);border:none;border-radius:50%;background-color:transparent;cursor:pointer;padding:0;width:100%;height:", ";text-decoration:none;font-size:inherit;", " &[aria-expanded='true']{opacity:1;}", ";"], props => props.isHovered || props.isFocused || props.isActive ? '1' : '0', props => props.isActive ? '1' : '0', props => math(`${getRowHeight(props)} / 2`), OVERFLOW_BUTTON_SIZE, props => colorStyles$1(props), props => retrieveComponentStyles(COMPONENT_ID$7, props));
|
|
139
141
|
StyledOverflowButton.defaultProps = {
|
|
140
142
|
theme: DEFAULT_THEME
|
|
141
143
|
};
|
|
@@ -186,7 +188,7 @@ const colorStyles = props => {
|
|
|
186
188
|
};
|
|
187
189
|
const StyledRow = styled(StyledBaseRow).attrs(props => ({
|
|
188
190
|
'data-garden-id': COMPONENT_ID$6,
|
|
189
|
-
'data-garden-version': '8.
|
|
191
|
+
'data-garden-version': '8.68.0',
|
|
190
192
|
tabIndex: props.isReadOnly ? undefined : -1
|
|
191
193
|
})).withConfig({
|
|
192
194
|
displayName: "StyledRow",
|
|
@@ -207,7 +209,7 @@ const getHeaderRowHeight = props => {
|
|
|
207
209
|
};
|
|
208
210
|
const StyledHeaderRow = styled(StyledBaseRow).attrs({
|
|
209
211
|
'data-garden-id': COMPONENT_ID$5,
|
|
210
|
-
'data-garden-version': '8.
|
|
212
|
+
'data-garden-version': '8.68.0'
|
|
211
213
|
}).withConfig({
|
|
212
214
|
displayName: "StyledHeaderRow",
|
|
213
215
|
componentId: "sc-16ogvdx-0"
|
|
@@ -223,7 +225,7 @@ const stickyStyles = props => {
|
|
|
223
225
|
};
|
|
224
226
|
const StyledHead = styled.thead.attrs({
|
|
225
227
|
'data-garden-id': COMPONENT_ID$4,
|
|
226
|
-
'data-garden-version': '8.
|
|
228
|
+
'data-garden-version': '8.68.0'
|
|
227
229
|
}).withConfig({
|
|
228
230
|
displayName: "StyledHead",
|
|
229
231
|
componentId: "sc-spf23a-0"
|
|
@@ -240,7 +242,7 @@ const sizeStyles$1 = props => {
|
|
|
240
242
|
};
|
|
241
243
|
const StyledGroupRow = styled(StyledBaseRow).attrs({
|
|
242
244
|
'data-garden-id': COMPONENT_ID$3,
|
|
243
|
-
'data-garden-version': '8.
|
|
245
|
+
'data-garden-version': '8.68.0'
|
|
244
246
|
}).withConfig({
|
|
245
247
|
displayName: "StyledGroupRow",
|
|
246
248
|
componentId: "sc-mpd0r8-0"
|
|
@@ -273,12 +275,12 @@ StyledSortableFillIconWrapper.defaultProps = {
|
|
|
273
275
|
};
|
|
274
276
|
const StyledSortableButton = styled.button.attrs({
|
|
275
277
|
'data-garden-id': COMPONENT_ID$2,
|
|
276
|
-
'data-garden-version': '8.
|
|
278
|
+
'data-garden-version': '8.68.0',
|
|
277
279
|
type: 'button'
|
|
278
280
|
}).withConfig({
|
|
279
281
|
displayName: "StyledSortableButton",
|
|
280
282
|
componentId: "sc-2s1dli-3"
|
|
281
|
-
})(["position:relative;border:none;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
|
|
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 => {
|
|
282
284
|
if (props.sort === 'asc') {
|
|
283
285
|
return getColor('neutralHue', 600, props.theme);
|
|
284
286
|
} else if (props.sort === 'desc') {
|
|
@@ -292,7 +294,7 @@ const StyledSortableButton = styled.button.attrs({
|
|
|
292
294
|
return getColor('neutralHue', 600, props.theme);
|
|
293
295
|
}
|
|
294
296
|
return undefined;
|
|
295
|
-
}, props => getColor('primaryHue', 600, props.theme), props => props.sort === undefined && `
|
|
297
|
+
}, SELECTOR_FOCUS_VISIBLE, props => getColor('primaryHue', 600, props.theme), props => props.sort === undefined && `
|
|
296
298
|
${StyledSortableFillIconWrapper} {
|
|
297
299
|
opacity: 1;
|
|
298
300
|
color: ${getColor('primaryHue', 600, props.theme)};
|
|
@@ -312,7 +314,9 @@ const StyledSortableButton = styled.button.attrs({
|
|
|
312
314
|
color: ${getColor('primaryHue', 600, props.theme, 0.25)};
|
|
313
315
|
fill: ${getColor('primaryHue', 600, props.theme)};
|
|
314
316
|
}
|
|
315
|
-
`, props =>
|
|
317
|
+
`, props => focusStyles({
|
|
318
|
+
theme: props.theme
|
|
319
|
+
}), props => retrieveComponentStyles(COMPONENT_ID$2, props));
|
|
316
320
|
StyledSortableButton.defaultProps = {
|
|
317
321
|
theme: DEFAULT_THEME
|
|
318
322
|
};
|
|
@@ -329,7 +333,7 @@ const sizeStyles = props => {
|
|
|
329
333
|
const StyledHeaderCell = styled(StyledCell).attrs({
|
|
330
334
|
as: 'th',
|
|
331
335
|
'data-garden-id': COMPONENT_ID$1,
|
|
332
|
-
'data-garden-version': '8.
|
|
336
|
+
'data-garden-version': '8.68.0'
|
|
333
337
|
}).withConfig({
|
|
334
338
|
displayName: "StyledHeaderCell",
|
|
335
339
|
componentId: "sc-fzagoe-0"
|
|
@@ -349,7 +353,7 @@ StyledHeaderCell.defaultProps = {
|
|
|
349
353
|
const COMPONENT_ID = 'tables.hidden_cell';
|
|
350
354
|
const StyledHiddenCell = styled.div.attrs({
|
|
351
355
|
'data-garden-id': COMPONENT_ID,
|
|
352
|
-
'data-garden-version': '8.
|
|
356
|
+
'data-garden-version': '8.68.0'
|
|
353
357
|
}).withConfig({
|
|
354
358
|
displayName: "StyledHiddenCell",
|
|
355
359
|
componentId: "sc-1x454xw-0"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-tables",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.68.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>",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"prop-types": "^15.5.7"
|
|
28
28
|
},
|
|
29
29
|
"peerDependencies": {
|
|
30
|
-
"@zendeskgarden/react-theming": "^8.
|
|
30
|
+
"@zendeskgarden/react-theming": "^8.67.0",
|
|
31
31
|
"react": ">=16.8.0",
|
|
32
32
|
"react-dom": ">=16.8.0",
|
|
33
33
|
"styled-components": "^4.2.0 || ^5.0.0"
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@types/react-beautiful-dnd": "13.1.3",
|
|
37
37
|
"@types/react-window": "1.8.5",
|
|
38
|
-
"@zendeskgarden/react-theming": "^8.
|
|
38
|
+
"@zendeskgarden/react-theming": "^8.68.0",
|
|
39
39
|
"@zendeskgarden/svg-icons": "6.33.0",
|
|
40
40
|
"react-beautiful-dnd": "13.1.1",
|
|
41
41
|
"react-window": "1.8.8"
|
|
@@ -50,5 +50,5 @@
|
|
|
50
50
|
"access": "public"
|
|
51
51
|
},
|
|
52
52
|
"zendeskgarden:src": "src/index.ts",
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "e05a28d586f47d95e0570fe2d529915aa4285845"
|
|
54
54
|
}
|