@zendeskgarden/react-tables 8.39.0 → 8.41.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.
Files changed (3) hide show
  1. package/dist/index.cjs.js +81 -53
  2. package/dist/index.esm.js +81 -53
  3. package/package.json +6 -6
package/dist/index.cjs.js CHANGED
@@ -97,18 +97,6 @@ function _objectWithoutProperties(source, excluded) {
97
97
  return target;
98
98
  }
99
99
 
100
- function _taggedTemplateLiteral(strings, raw) {
101
- if (!raw) {
102
- raw = strings.slice(0);
103
- }
104
-
105
- return Object.freeze(Object.defineProperties(strings, {
106
- raw: {
107
- value: Object.freeze(raw)
108
- }
109
- }));
110
- }
111
-
112
100
  function _slicedToArray(arr, i) {
113
101
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
114
102
  }
@@ -118,14 +106,17 @@ function _arrayWithHoles(arr) {
118
106
  }
119
107
 
120
108
  function _iterableToArrayLimit(arr, i) {
121
- if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
109
+ var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
110
+
111
+ if (_i == null) return;
122
112
  var _arr = [];
123
113
  var _n = true;
124
114
  var _d = false;
125
- var _e = undefined;
115
+
116
+ var _s, _e;
126
117
 
127
118
  try {
128
- for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
119
+ for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
129
120
  _arr.push(_s.value);
130
121
 
131
122
  if (i && _arr.length === i) break;
@@ -165,24 +156,28 @@ function _nonIterableRest() {
165
156
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
166
157
  }
167
158
 
168
- var _templateObject$a;
169
159
  var COMPONENT_ID$a = 'tables.body';
170
160
  var StyledBody = styled__default['default'].tbody.attrs({
171
161
  'data-garden-id': COMPONENT_ID$a,
172
- 'data-garden-version': '8.39.0'
173
- })(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n ", ";\n"])), function (props) {
162
+ 'data-garden-version': '8.41.0'
163
+ }).withConfig({
164
+ displayName: "StyledBody",
165
+ componentId: "sc-14ud6y-0"
166
+ })(["", ";"], function (props) {
174
167
  return reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props);
175
168
  });
176
169
  StyledBody.defaultProps = {
177
170
  theme: reactTheming.DEFAULT_THEME
178
171
  };
179
172
 
180
- var _templateObject$9;
181
173
  var COMPONENT_ID$9 = 'tables.caption';
182
174
  var StyledCaption = styled__default['default'].caption.attrs({
183
175
  'data-garden-id': COMPONENT_ID$9,
184
- 'data-garden-version': '8.39.0'
185
- })(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n display: table-caption;\n text-align: ", ";\n\n ", ";\n"])), function (props) {
176
+ 'data-garden-version': '8.41.0'
177
+ }).withConfig({
178
+ displayName: "StyledCaption",
179
+ componentId: "sc-113y327-0"
180
+ })(["display:table-caption;text-align:", ";", ";"], function (props) {
186
181
  return props.theme.rtl ? 'right' : 'left';
187
182
  }, function (props) {
188
183
  return reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props);
@@ -191,15 +186,17 @@ StyledCaption.defaultProps = {
191
186
  theme: reactTheming.DEFAULT_THEME
192
187
  };
193
188
 
194
- var _templateObject$8;
195
189
  var COMPONENT_ID$8 = 'tables.table';
196
190
  var getLineHeight = function getLineHeight(props) {
197
191
  return "".concat(props.theme.space.base * 5, "px");
198
192
  };
199
193
  var StyledTable = styled__default['default'].table.attrs({
200
194
  'data-garden-id': COMPONENT_ID$8,
201
- 'data-garden-version': '8.39.0'
202
- })(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n display: table;\n border: none; /* [1] */\n width: 100%; /* [1] */\n table-layout: fixed; /* [1] */\n border-collapse: collapse; /* [1] */\n border-spacing: 0; /* [1] */\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n direction: ", ";\n\n ", ";\n"])), function (props) {
195
+ 'data-garden-version': '8.41.0'
196
+ }).withConfig({
197
+ displayName: "StyledTable",
198
+ componentId: "sc-gje7na-0"
199
+ })(["display:table;border:none;width:100%;table-layout:fixed;border-collapse:collapse;border-spacing:0;line-height:", ";color:", ";font-size:", ";direction:", ";", ";"], function (props) {
203
200
  return getLineHeight(props);
204
201
  }, function (props) {
205
202
  return props.theme.colors.foreground;
@@ -223,7 +220,6 @@ var getRowHeight = function getRowHeight(props) {
223
220
  return "".concat(props.theme.space.base * 10, "px");
224
221
  };
225
222
 
226
- var _templateObject$7;
227
223
  var COMPONENT_ID$7 = 'tables.cell';
228
224
  var truncatedStyling$1 = styled.css(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
229
225
  var sizeStyling = function sizeStyling(props) {
@@ -249,8 +245,11 @@ var sizeStyling = function sizeStyling(props) {
249
245
  };
250
246
  var StyledCell = styled__default['default'].td.attrs({
251
247
  'data-garden-id': COMPONENT_ID$7,
252
- 'data-garden-version': '8.39.0'
253
- })(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n display: table-cell;\n transition: border-color 0.25s ease-in-out, box-shadow 0.1s ease-in-out;\n\n ", ";\n ", ";\n\n ", ";\n"])), function (props) {
248
+ 'data-garden-version': '8.41.0'
249
+ }).withConfig({
250
+ displayName: "StyledCell",
251
+ componentId: "sc-8hpncx-0"
252
+ })(["display:table-cell;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out;", ";", ";", ";"], function (props) {
254
253
  return sizeStyling(props);
255
254
  }, function (props) {
256
255
  return props.isTruncated && truncatedStyling$1;
@@ -261,7 +260,6 @@ StyledCell.defaultProps = {
261
260
  theme: reactTheming.DEFAULT_THEME
262
261
  };
263
262
 
264
- var _templateObject$6, _templateObject2$2;
265
263
  var COMPONENT_ID$6 = 'tables.overflow_button';
266
264
  var OVERFLOW_BUTTON_SIZE = '2em';
267
265
  var colorStyles$1 = function colorStyles(props) {
@@ -282,9 +280,12 @@ var colorStyles$1 = function colorStyles(props) {
282
280
  };
283
281
  var StyledOverflowButton = styled__default['default'].button.attrs({
284
282
  'data-garden-id': COMPONENT_ID$6,
285
- 'data-garden-version': '8.39.0',
283
+ 'data-garden-version': '8.41.0',
286
284
  type: 'button'
287
- })(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n display: block;\n transition: opacity 0.25s ease-in-out, background-color 0.1s ease-in-out;\n opacity: ", ";\n z-index: ", ";\n margin-top: calc(", " - 1em);\n border: none; /* [1] */\n border-radius: 50%;\n background-color: transparent; /* [1] */\n cursor: pointer;\n padding: 0; /* [1] */\n width: 100%;\n height: ", ";\n text-decoration: none; /* [2] */\n font-size: inherit; /* [1] */\n\n ", "\n\n &[aria-expanded='true'] {\n opacity: 1;\n }\n\n ", ";\n"])), function (props) {
285
+ }).withConfig({
286
+ displayName: "StyledOverflowButton",
287
+ componentId: "sc-1eba2ml-0"
288
+ })(["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;}", ";"], function (props) {
288
289
  return props.isHovered || props.isFocused || props.isActive ? '1' : '0';
289
290
  }, function (props) {
290
291
  return props.isActive ? '1' : '0';
@@ -298,14 +299,19 @@ var StyledOverflowButton = styled__default['default'].button.attrs({
298
299
  StyledOverflowButton.defaultProps = {
299
300
  theme: reactTheming.DEFAULT_THEME
300
301
  };
301
- var StyledOverflowButtonIconWrapper = styled__default['default'].div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: center;\n transform: rotate(90deg);\n transition: opacity 0.25s ease-in-out, background-color 0.1s ease-in-out;\n\n width: ", ";\n height: ", ";\n\n &:hover {\n opacity: 1;\n }\n"])), OVERFLOW_BUTTON_SIZE, OVERFLOW_BUTTON_SIZE);
302
+ var StyledOverflowButtonIconWrapper = styled__default['default'].div.withConfig({
303
+ displayName: "StyledOverflowButton__StyledOverflowButtonIconWrapper",
304
+ componentId: "sc-1eba2ml-1"
305
+ })(["display:flex;align-items:center;justify-content:center;transform:rotate(90deg);transition:opacity 0.25s ease-in-out,background-color 0.1s ease-in-out;width:", ";height:", ";&:hover{opacity:1;}"], OVERFLOW_BUTTON_SIZE, OVERFLOW_BUTTON_SIZE);
302
306
  StyledOverflowButtonIconWrapper.defaultProps = {
303
307
  theme: reactTheming.DEFAULT_THEME
304
308
  };
305
309
 
306
- var _templateObject$5, _templateObject2$1;
307
310
  var COMPONENT_ID$5 = 'tables.row';
308
- var StyledBaseRow = styled__default['default'].tr(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n display: table-row;\n transition: background-color 0.1s ease-in-out;\n border-bottom: ", ";\n background-color: ", ";\n vertical-align: top;\n box-sizing: border-box;\n"])), function (props) {
311
+ var StyledBaseRow = styled__default['default'].tr.withConfig({
312
+ displayName: "StyledRow__StyledBaseRow",
313
+ componentId: "sc-ek66ow-0"
314
+ })(["display:table-row;transition:background-color 0.1s ease-in-out;border-bottom:", ";background-color:", ";vertical-align:top;box-sizing:border-box;"], function (props) {
309
315
  return "".concat(props.theme.borders.sm, " ").concat(reactTheming.getColor('neutralHue', 200, props.theme));
310
316
  }, function (props) {
311
317
  return props.isStriped && reactTheming.getColor('neutralHue', 100, props.theme);
@@ -345,10 +351,13 @@ var colorStyles = function colorStyles(props) {
345
351
  var StyledRow = styled__default['default'](StyledBaseRow).attrs(function (props) {
346
352
  return {
347
353
  'data-garden-id': COMPONENT_ID$5,
348
- 'data-garden-version': '8.39.0',
354
+ 'data-garden-version': '8.41.0',
349
355
  tabIndex: props.isReadOnly ? undefined : -1
350
356
  };
351
- })(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n height: ", ";\n\n ", "\n\n ", ";\n"])), getRowHeight, function (props) {
357
+ }).withConfig({
358
+ displayName: "StyledRow",
359
+ componentId: "sc-ek66ow-1"
360
+ })(["height:", ";", " ", ";"], getRowHeight, function (props) {
352
361
  return colorStyles(props);
353
362
  }, function (props) {
354
363
  return reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props);
@@ -357,7 +366,6 @@ StyledRow.defaultProps = {
357
366
  theme: reactTheming.DEFAULT_THEME
358
367
  };
359
368
 
360
- var _templateObject$4;
361
369
  var COMPONENT_ID$4 = 'tables.header_row';
362
370
  var getHeaderRowHeight = function getHeaderRowHeight(props) {
363
371
  if (props.size === 'large') {
@@ -369,8 +377,11 @@ var getHeaderRowHeight = function getHeaderRowHeight(props) {
369
377
  };
370
378
  var StyledHeaderRow = styled__default['default'](StyledBaseRow).attrs({
371
379
  'data-garden-id': COMPONENT_ID$4,
372
- 'data-garden-version': '8.39.0'
373
- })(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n border-bottom-color: ", ";\n height: ", ";\n vertical-align: bottom;\n font-weight: ", ";\n\n ", " {\n opacity: 1;\n margin-top: 0;\n margin-bottom: calc(", " - 1em);\n }\n\n ", ";\n"])), function (props) {
380
+ 'data-garden-version': '8.41.0'
381
+ }).withConfig({
382
+ displayName: "StyledHeaderRow",
383
+ componentId: "sc-16ogvdx-0"
384
+ })(["border-bottom-color:", ";height:", ";vertical-align:bottom;font-weight:", ";", "{opacity:1;margin-top:0;margin-bottom:calc(", " - 1em);}", ";"], function (props) {
374
385
  return reactTheming.getColor('neutralHue', 300, props.theme);
375
386
  }, getHeaderRowHeight, function (props) {
376
387
  return props.theme.fontWeights.semibold;
@@ -383,19 +394,20 @@ StyledHeaderRow.defaultProps = {
383
394
  theme: reactTheming.DEFAULT_THEME
384
395
  };
385
396
 
386
- var _templateObject$3;
387
397
  var COMPONENT_ID$3 = 'tables.head';
388
398
  var StyledHead = styled__default['default'].thead.attrs({
389
399
  'data-garden-id': COMPONENT_ID$3,
390
- 'data-garden-version': '8.39.0'
391
- })(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n ", ";\n"])), function (props) {
400
+ 'data-garden-version': '8.41.0'
401
+ }).withConfig({
402
+ displayName: "StyledHead",
403
+ componentId: "sc-spf23a-0"
404
+ })(["", ";"], function (props) {
392
405
  return reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props);
393
406
  });
394
407
  StyledHead.defaultProps = {
395
408
  theme: reactTheming.DEFAULT_THEME
396
409
  };
397
410
 
398
- var _templateObject$2;
399
411
  var COMPONENT_ID$2 = 'tables.group_row';
400
412
  var sizeStyles$1 = function sizeStyles(props) {
401
413
  var height = "".concat(props.theme.space.base * 8, "px");
@@ -404,8 +416,11 @@ var sizeStyles$1 = function sizeStyles(props) {
404
416
  };
405
417
  var StyledGroupRow = styled__default['default'](StyledBaseRow).attrs({
406
418
  'data-garden-id': COMPONENT_ID$2,
407
- 'data-garden-version': '8.39.0'
408
- })(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n background-color: ", ";\n ", "\n\n ", ";\n"])), function (props) {
419
+ 'data-garden-version': '8.41.0'
420
+ }).withConfig({
421
+ displayName: "StyledGroupRow",
422
+ componentId: "sc-mpd0r8-0"
423
+ })(["background-color:", ";", " ", ";"], function (props) {
409
424
  return reactTheming.getColor('neutralHue', 100, props.theme);
410
425
  }, function (props) {
411
426
  return sizeStyles$1(props);
@@ -416,9 +431,11 @@ StyledGroupRow.defaultProps = {
416
431
  theme: reactTheming.DEFAULT_THEME
417
432
  };
418
433
 
419
- var _templateObject$1, _templateObject2, _templateObject3, _templateObject4;
420
434
  var COMPONENT_ID$1 = 'tables.sortable';
421
- var StyledBaseIconWrapper = styled__default['default'].div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n display: flex;\n position: absolute;\n top: 0;\n ", ": 0;\n align-items: center;\n justify-content: center;\n opacity: 0;\n width: ", ";\n height: 100%;\n color: inherit;\n fill: inherit;\n"])), function (props) {
435
+ var StyledBaseIconWrapper = styled__default['default'].div.withConfig({
436
+ displayName: "StyledSortableButton__StyledBaseIconWrapper",
437
+ componentId: "sc-2s1dli-0"
438
+ })(["display:flex;position:absolute;top:0;", ":0;align-items:center;justify-content:center;opacity:0;width:", ";height:100%;color:inherit;fill:inherit;"], function (props) {
422
439
  return props.theme.rtl ? 'left' : 'right';
423
440
  }, function (props) {
424
441
  return props.theme.iconSizes.sm;
@@ -426,19 +443,28 @@ var StyledBaseIconWrapper = styled__default['default'].div(_templateObject$1 ||
426
443
  StyledBaseIconWrapper.defaultProps = {
427
444
  theme: reactTheming.DEFAULT_THEME
428
445
  };
429
- var StyledSortableStrokeIconWrapper = styled__default['default'](StyledBaseIconWrapper)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
446
+ var StyledSortableStrokeIconWrapper = styled__default['default'](StyledBaseIconWrapper).withConfig({
447
+ displayName: "StyledSortableButton__StyledSortableStrokeIconWrapper",
448
+ componentId: "sc-2s1dli-1"
449
+ })([""]);
430
450
  StyledSortableStrokeIconWrapper.defaultProps = {
431
451
  theme: reactTheming.DEFAULT_THEME
432
452
  };
433
- var StyledSortableFillIconWrapper = styled__default['default'](StyledBaseIconWrapper)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
453
+ var StyledSortableFillIconWrapper = styled__default['default'](StyledBaseIconWrapper).withConfig({
454
+ displayName: "StyledSortableButton__StyledSortableFillIconWrapper",
455
+ componentId: "sc-2s1dli-2"
456
+ })([""]);
434
457
  StyledSortableFillIconWrapper.defaultProps = {
435
458
  theme: reactTheming.DEFAULT_THEME
436
459
  };
437
460
  var StyledSortableButton = styled__default['default'].button.attrs({
438
461
  'data-garden-id': COMPONENT_ID$1,
439
- 'data-garden-version': '8.39.0',
462
+ 'data-garden-version': '8.41.0',
440
463
  type: 'button'
441
- })(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: relative;\n border: none; /* [1] */\n background-color: transparent; /* [1] */\n cursor: pointer;\n padding: 0; /* [1] */\n /* stylelint-disable-next-line property-no-unknown */\n padding-", ": ", ";\n width: ", ";\n text-decoration: none; /* [2] */\n color: inherit;\n font-family: inherit; /* [1] */\n font-size: inherit; /* [1] */\n font-weight: ", ";\n\n ", " {\n opacity: ", ";\n }\n\n ", " {\n opacity: ", ";\n color: ", ";\n fill: ", ";\n }\n\n &:hover,\n &[data-garden-focus-visible] {\n text-decoration: none;\n color: ", ";\n\n ", ";\n\n ", "\n\n ", "\n }\n\n &:focus {\n outline: none;\n }\n\n ", ";\n"])), function (props) {
464
+ }).withConfig({
465
+ displayName: "StyledSortableButton",
466
+ componentId: "sc-2s1dli-3"
467
+ })(["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,&[data-garden-focus-visible]{text-decoration:none;color:", ";", ";", " ", "}&:focus{outline:none;}", ";"], function (props) {
442
468
  return props.theme.rtl ? 'left' : 'right';
443
469
  }, function (props) {
444
470
  return polished.math("".concat(props.theme.space.base, " + ").concat(props.theme.iconSizes.sm));
@@ -479,7 +505,6 @@ StyledSortableButton.defaultProps = {
479
505
  theme: reactTheming.DEFAULT_THEME
480
506
  };
481
507
 
482
- var _templateObject;
483
508
  var COMPONENT_ID = 'tables.header_cell';
484
509
  var truncatedStyling = styled.css(["", "{max-width:100%;overflow:hidden;text-overflow:ellipsis;}"], StyledSortableButton);
485
510
  var sizeStyles = function sizeStyles(props) {
@@ -492,8 +517,11 @@ var sizeStyles = function sizeStyles(props) {
492
517
  var StyledHeaderCell = styled__default['default'](StyledCell).attrs({
493
518
  as: 'th',
494
519
  'data-garden-id': COMPONENT_ID,
495
- 'data-garden-version': '8.39.0'
496
- })(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n text-align: ", ";\n font-weight: inherit;\n\n ", "\n ", "\n\n ", ";\n"])), function (props) {
520
+ 'data-garden-version': '8.41.0'
521
+ }).withConfig({
522
+ displayName: "StyledHeaderCell",
523
+ componentId: "sc-fzagoe-0"
524
+ })(["text-align:", ";font-weight:inherit;", " ", " ", ";"], function (props) {
497
525
  if (!props.hasOverflow) {
498
526
  if (props.theme.rtl) {
499
527
  return 'right';
package/dist/index.esm.js CHANGED
@@ -67,18 +67,6 @@ function _objectWithoutProperties(source, excluded) {
67
67
  return target;
68
68
  }
69
69
 
70
- function _taggedTemplateLiteral(strings, raw) {
71
- if (!raw) {
72
- raw = strings.slice(0);
73
- }
74
-
75
- return Object.freeze(Object.defineProperties(strings, {
76
- raw: {
77
- value: Object.freeze(raw)
78
- }
79
- }));
80
- }
81
-
82
70
  function _slicedToArray(arr, i) {
83
71
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
84
72
  }
@@ -88,14 +76,17 @@ function _arrayWithHoles(arr) {
88
76
  }
89
77
 
90
78
  function _iterableToArrayLimit(arr, i) {
91
- if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
79
+ var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
80
+
81
+ if (_i == null) return;
92
82
  var _arr = [];
93
83
  var _n = true;
94
84
  var _d = false;
95
- var _e = undefined;
85
+
86
+ var _s, _e;
96
87
 
97
88
  try {
98
- for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
89
+ for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
99
90
  _arr.push(_s.value);
100
91
 
101
92
  if (i && _arr.length === i) break;
@@ -135,24 +126,28 @@ function _nonIterableRest() {
135
126
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
136
127
  }
137
128
 
138
- var _templateObject$a;
139
129
  var COMPONENT_ID$a = 'tables.body';
140
130
  var StyledBody = styled.tbody.attrs({
141
131
  'data-garden-id': COMPONENT_ID$a,
142
- 'data-garden-version': '8.39.0'
143
- })(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n ", ";\n"])), function (props) {
132
+ 'data-garden-version': '8.41.0'
133
+ }).withConfig({
134
+ displayName: "StyledBody",
135
+ componentId: "sc-14ud6y-0"
136
+ })(["", ";"], function (props) {
144
137
  return retrieveComponentStyles(COMPONENT_ID$a, props);
145
138
  });
146
139
  StyledBody.defaultProps = {
147
140
  theme: DEFAULT_THEME
148
141
  };
149
142
 
150
- var _templateObject$9;
151
143
  var COMPONENT_ID$9 = 'tables.caption';
152
144
  var StyledCaption = styled.caption.attrs({
153
145
  'data-garden-id': COMPONENT_ID$9,
154
- 'data-garden-version': '8.39.0'
155
- })(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n display: table-caption;\n text-align: ", ";\n\n ", ";\n"])), function (props) {
146
+ 'data-garden-version': '8.41.0'
147
+ }).withConfig({
148
+ displayName: "StyledCaption",
149
+ componentId: "sc-113y327-0"
150
+ })(["display:table-caption;text-align:", ";", ";"], function (props) {
156
151
  return props.theme.rtl ? 'right' : 'left';
157
152
  }, function (props) {
158
153
  return retrieveComponentStyles(COMPONENT_ID$9, props);
@@ -161,15 +156,17 @@ StyledCaption.defaultProps = {
161
156
  theme: DEFAULT_THEME
162
157
  };
163
158
 
164
- var _templateObject$8;
165
159
  var COMPONENT_ID$8 = 'tables.table';
166
160
  var getLineHeight = function getLineHeight(props) {
167
161
  return "".concat(props.theme.space.base * 5, "px");
168
162
  };
169
163
  var StyledTable = styled.table.attrs({
170
164
  'data-garden-id': COMPONENT_ID$8,
171
- 'data-garden-version': '8.39.0'
172
- })(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n display: table;\n border: none; /* [1] */\n width: 100%; /* [1] */\n table-layout: fixed; /* [1] */\n border-collapse: collapse; /* [1] */\n border-spacing: 0; /* [1] */\n line-height: ", ";\n color: ", ";\n font-size: ", ";\n direction: ", ";\n\n ", ";\n"])), function (props) {
165
+ 'data-garden-version': '8.41.0'
166
+ }).withConfig({
167
+ displayName: "StyledTable",
168
+ componentId: "sc-gje7na-0"
169
+ })(["display:table;border:none;width:100%;table-layout:fixed;border-collapse:collapse;border-spacing:0;line-height:", ";color:", ";font-size:", ";direction:", ";", ";"], function (props) {
173
170
  return getLineHeight(props);
174
171
  }, function (props) {
175
172
  return props.theme.colors.foreground;
@@ -193,7 +190,6 @@ var getRowHeight = function getRowHeight(props) {
193
190
  return "".concat(props.theme.space.base * 10, "px");
194
191
  };
195
192
 
196
- var _templateObject$7;
197
193
  var COMPONENT_ID$7 = 'tables.cell';
198
194
  var truncatedStyling$1 = css(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
199
195
  var sizeStyling = function sizeStyling(props) {
@@ -219,8 +215,11 @@ var sizeStyling = function sizeStyling(props) {
219
215
  };
220
216
  var StyledCell = styled.td.attrs({
221
217
  'data-garden-id': COMPONENT_ID$7,
222
- 'data-garden-version': '8.39.0'
223
- })(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n display: table-cell;\n transition: border-color 0.25s ease-in-out, box-shadow 0.1s ease-in-out;\n\n ", ";\n ", ";\n\n ", ";\n"])), function (props) {
218
+ 'data-garden-version': '8.41.0'
219
+ }).withConfig({
220
+ displayName: "StyledCell",
221
+ componentId: "sc-8hpncx-0"
222
+ })(["display:table-cell;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out;", ";", ";", ";"], function (props) {
224
223
  return sizeStyling(props);
225
224
  }, function (props) {
226
225
  return props.isTruncated && truncatedStyling$1;
@@ -231,7 +230,6 @@ StyledCell.defaultProps = {
231
230
  theme: DEFAULT_THEME
232
231
  };
233
232
 
234
- var _templateObject$6, _templateObject2$2;
235
233
  var COMPONENT_ID$6 = 'tables.overflow_button';
236
234
  var OVERFLOW_BUTTON_SIZE = '2em';
237
235
  var colorStyles$1 = function colorStyles(props) {
@@ -252,9 +250,12 @@ var colorStyles$1 = function colorStyles(props) {
252
250
  };
253
251
  var StyledOverflowButton = styled.button.attrs({
254
252
  'data-garden-id': COMPONENT_ID$6,
255
- 'data-garden-version': '8.39.0',
253
+ 'data-garden-version': '8.41.0',
256
254
  type: 'button'
257
- })(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n display: block;\n transition: opacity 0.25s ease-in-out, background-color 0.1s ease-in-out;\n opacity: ", ";\n z-index: ", ";\n margin-top: calc(", " - 1em);\n border: none; /* [1] */\n border-radius: 50%;\n background-color: transparent; /* [1] */\n cursor: pointer;\n padding: 0; /* [1] */\n width: 100%;\n height: ", ";\n text-decoration: none; /* [2] */\n font-size: inherit; /* [1] */\n\n ", "\n\n &[aria-expanded='true'] {\n opacity: 1;\n }\n\n ", ";\n"])), function (props) {
255
+ }).withConfig({
256
+ displayName: "StyledOverflowButton",
257
+ componentId: "sc-1eba2ml-0"
258
+ })(["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;}", ";"], function (props) {
258
259
  return props.isHovered || props.isFocused || props.isActive ? '1' : '0';
259
260
  }, function (props) {
260
261
  return props.isActive ? '1' : '0';
@@ -268,14 +269,19 @@ var StyledOverflowButton = styled.button.attrs({
268
269
  StyledOverflowButton.defaultProps = {
269
270
  theme: DEFAULT_THEME
270
271
  };
271
- var StyledOverflowButtonIconWrapper = styled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: center;\n transform: rotate(90deg);\n transition: opacity 0.25s ease-in-out, background-color 0.1s ease-in-out;\n\n width: ", ";\n height: ", ";\n\n &:hover {\n opacity: 1;\n }\n"])), OVERFLOW_BUTTON_SIZE, OVERFLOW_BUTTON_SIZE);
272
+ var StyledOverflowButtonIconWrapper = styled.div.withConfig({
273
+ displayName: "StyledOverflowButton__StyledOverflowButtonIconWrapper",
274
+ componentId: "sc-1eba2ml-1"
275
+ })(["display:flex;align-items:center;justify-content:center;transform:rotate(90deg);transition:opacity 0.25s ease-in-out,background-color 0.1s ease-in-out;width:", ";height:", ";&:hover{opacity:1;}"], OVERFLOW_BUTTON_SIZE, OVERFLOW_BUTTON_SIZE);
272
276
  StyledOverflowButtonIconWrapper.defaultProps = {
273
277
  theme: DEFAULT_THEME
274
278
  };
275
279
 
276
- var _templateObject$5, _templateObject2$1;
277
280
  var COMPONENT_ID$5 = 'tables.row';
278
- var StyledBaseRow = styled.tr(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n display: table-row;\n transition: background-color 0.1s ease-in-out;\n border-bottom: ", ";\n background-color: ", ";\n vertical-align: top;\n box-sizing: border-box;\n"])), function (props) {
281
+ var StyledBaseRow = styled.tr.withConfig({
282
+ displayName: "StyledRow__StyledBaseRow",
283
+ componentId: "sc-ek66ow-0"
284
+ })(["display:table-row;transition:background-color 0.1s ease-in-out;border-bottom:", ";background-color:", ";vertical-align:top;box-sizing:border-box;"], function (props) {
279
285
  return "".concat(props.theme.borders.sm, " ").concat(getColor('neutralHue', 200, props.theme));
280
286
  }, function (props) {
281
287
  return props.isStriped && getColor('neutralHue', 100, props.theme);
@@ -315,10 +321,13 @@ var colorStyles = function colorStyles(props) {
315
321
  var StyledRow = styled(StyledBaseRow).attrs(function (props) {
316
322
  return {
317
323
  'data-garden-id': COMPONENT_ID$5,
318
- 'data-garden-version': '8.39.0',
324
+ 'data-garden-version': '8.41.0',
319
325
  tabIndex: props.isReadOnly ? undefined : -1
320
326
  };
321
- })(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n height: ", ";\n\n ", "\n\n ", ";\n"])), getRowHeight, function (props) {
327
+ }).withConfig({
328
+ displayName: "StyledRow",
329
+ componentId: "sc-ek66ow-1"
330
+ })(["height:", ";", " ", ";"], getRowHeight, function (props) {
322
331
  return colorStyles(props);
323
332
  }, function (props) {
324
333
  return retrieveComponentStyles(COMPONENT_ID$5, props);
@@ -327,7 +336,6 @@ StyledRow.defaultProps = {
327
336
  theme: DEFAULT_THEME
328
337
  };
329
338
 
330
- var _templateObject$4;
331
339
  var COMPONENT_ID$4 = 'tables.header_row';
332
340
  var getHeaderRowHeight = function getHeaderRowHeight(props) {
333
341
  if (props.size === 'large') {
@@ -339,8 +347,11 @@ var getHeaderRowHeight = function getHeaderRowHeight(props) {
339
347
  };
340
348
  var StyledHeaderRow = styled(StyledBaseRow).attrs({
341
349
  'data-garden-id': COMPONENT_ID$4,
342
- 'data-garden-version': '8.39.0'
343
- })(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n border-bottom-color: ", ";\n height: ", ";\n vertical-align: bottom;\n font-weight: ", ";\n\n ", " {\n opacity: 1;\n margin-top: 0;\n margin-bottom: calc(", " - 1em);\n }\n\n ", ";\n"])), function (props) {
350
+ 'data-garden-version': '8.41.0'
351
+ }).withConfig({
352
+ displayName: "StyledHeaderRow",
353
+ componentId: "sc-16ogvdx-0"
354
+ })(["border-bottom-color:", ";height:", ";vertical-align:bottom;font-weight:", ";", "{opacity:1;margin-top:0;margin-bottom:calc(", " - 1em);}", ";"], function (props) {
344
355
  return getColor('neutralHue', 300, props.theme);
345
356
  }, getHeaderRowHeight, function (props) {
346
357
  return props.theme.fontWeights.semibold;
@@ -353,19 +364,20 @@ StyledHeaderRow.defaultProps = {
353
364
  theme: DEFAULT_THEME
354
365
  };
355
366
 
356
- var _templateObject$3;
357
367
  var COMPONENT_ID$3 = 'tables.head';
358
368
  var StyledHead = styled.thead.attrs({
359
369
  'data-garden-id': COMPONENT_ID$3,
360
- 'data-garden-version': '8.39.0'
361
- })(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n ", ";\n"])), function (props) {
370
+ 'data-garden-version': '8.41.0'
371
+ }).withConfig({
372
+ displayName: "StyledHead",
373
+ componentId: "sc-spf23a-0"
374
+ })(["", ";"], function (props) {
362
375
  return retrieveComponentStyles(COMPONENT_ID$3, props);
363
376
  });
364
377
  StyledHead.defaultProps = {
365
378
  theme: DEFAULT_THEME
366
379
  };
367
380
 
368
- var _templateObject$2;
369
381
  var COMPONENT_ID$2 = 'tables.group_row';
370
382
  var sizeStyles$1 = function sizeStyles(props) {
371
383
  var height = "".concat(props.theme.space.base * 8, "px");
@@ -374,8 +386,11 @@ var sizeStyles$1 = function sizeStyles(props) {
374
386
  };
375
387
  var StyledGroupRow = styled(StyledBaseRow).attrs({
376
388
  'data-garden-id': COMPONENT_ID$2,
377
- 'data-garden-version': '8.39.0'
378
- })(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n background-color: ", ";\n ", "\n\n ", ";\n"])), function (props) {
389
+ 'data-garden-version': '8.41.0'
390
+ }).withConfig({
391
+ displayName: "StyledGroupRow",
392
+ componentId: "sc-mpd0r8-0"
393
+ })(["background-color:", ";", " ", ";"], function (props) {
379
394
  return getColor('neutralHue', 100, props.theme);
380
395
  }, function (props) {
381
396
  return sizeStyles$1(props);
@@ -386,9 +401,11 @@ StyledGroupRow.defaultProps = {
386
401
  theme: DEFAULT_THEME
387
402
  };
388
403
 
389
- var _templateObject$1, _templateObject2, _templateObject3, _templateObject4;
390
404
  var COMPONENT_ID$1 = 'tables.sortable';
391
- var StyledBaseIconWrapper = styled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n display: flex;\n position: absolute;\n top: 0;\n ", ": 0;\n align-items: center;\n justify-content: center;\n opacity: 0;\n width: ", ";\n height: 100%;\n color: inherit;\n fill: inherit;\n"])), function (props) {
405
+ var StyledBaseIconWrapper = styled.div.withConfig({
406
+ displayName: "StyledSortableButton__StyledBaseIconWrapper",
407
+ componentId: "sc-2s1dli-0"
408
+ })(["display:flex;position:absolute;top:0;", ":0;align-items:center;justify-content:center;opacity:0;width:", ";height:100%;color:inherit;fill:inherit;"], function (props) {
392
409
  return props.theme.rtl ? 'left' : 'right';
393
410
  }, function (props) {
394
411
  return props.theme.iconSizes.sm;
@@ -396,19 +413,28 @@ var StyledBaseIconWrapper = styled.div(_templateObject$1 || (_templateObject$1 =
396
413
  StyledBaseIconWrapper.defaultProps = {
397
414
  theme: DEFAULT_THEME
398
415
  };
399
- var StyledSortableStrokeIconWrapper = styled(StyledBaseIconWrapper)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
416
+ var StyledSortableStrokeIconWrapper = styled(StyledBaseIconWrapper).withConfig({
417
+ displayName: "StyledSortableButton__StyledSortableStrokeIconWrapper",
418
+ componentId: "sc-2s1dli-1"
419
+ })([""]);
400
420
  StyledSortableStrokeIconWrapper.defaultProps = {
401
421
  theme: DEFAULT_THEME
402
422
  };
403
- var StyledSortableFillIconWrapper = styled(StyledBaseIconWrapper)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
423
+ var StyledSortableFillIconWrapper = styled(StyledBaseIconWrapper).withConfig({
424
+ displayName: "StyledSortableButton__StyledSortableFillIconWrapper",
425
+ componentId: "sc-2s1dli-2"
426
+ })([""]);
404
427
  StyledSortableFillIconWrapper.defaultProps = {
405
428
  theme: DEFAULT_THEME
406
429
  };
407
430
  var StyledSortableButton = styled.button.attrs({
408
431
  'data-garden-id': COMPONENT_ID$1,
409
- 'data-garden-version': '8.39.0',
432
+ 'data-garden-version': '8.41.0',
410
433
  type: 'button'
411
- })(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: relative;\n border: none; /* [1] */\n background-color: transparent; /* [1] */\n cursor: pointer;\n padding: 0; /* [1] */\n /* stylelint-disable-next-line property-no-unknown */\n padding-", ": ", ";\n width: ", ";\n text-decoration: none; /* [2] */\n color: inherit;\n font-family: inherit; /* [1] */\n font-size: inherit; /* [1] */\n font-weight: ", ";\n\n ", " {\n opacity: ", ";\n }\n\n ", " {\n opacity: ", ";\n color: ", ";\n fill: ", ";\n }\n\n &:hover,\n &[data-garden-focus-visible] {\n text-decoration: none;\n color: ", ";\n\n ", ";\n\n ", "\n\n ", "\n }\n\n &:focus {\n outline: none;\n }\n\n ", ";\n"])), function (props) {
434
+ }).withConfig({
435
+ displayName: "StyledSortableButton",
436
+ componentId: "sc-2s1dli-3"
437
+ })(["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,&[data-garden-focus-visible]{text-decoration:none;color:", ";", ";", " ", "}&:focus{outline:none;}", ";"], function (props) {
412
438
  return props.theme.rtl ? 'left' : 'right';
413
439
  }, function (props) {
414
440
  return math("".concat(props.theme.space.base, " + ").concat(props.theme.iconSizes.sm));
@@ -449,7 +475,6 @@ StyledSortableButton.defaultProps = {
449
475
  theme: DEFAULT_THEME
450
476
  };
451
477
 
452
- var _templateObject;
453
478
  var COMPONENT_ID = 'tables.header_cell';
454
479
  var truncatedStyling = css(["", "{max-width:100%;overflow:hidden;text-overflow:ellipsis;}"], StyledSortableButton);
455
480
  var sizeStyles = function sizeStyles(props) {
@@ -462,8 +487,11 @@ var sizeStyles = function sizeStyles(props) {
462
487
  var StyledHeaderCell = styled(StyledCell).attrs({
463
488
  as: 'th',
464
489
  'data-garden-id': COMPONENT_ID,
465
- 'data-garden-version': '8.39.0'
466
- })(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n text-align: ", ";\n font-weight: inherit;\n\n ", "\n ", "\n\n ", ";\n"])), function (props) {
490
+ 'data-garden-version': '8.41.0'
491
+ }).withConfig({
492
+ displayName: "StyledHeaderCell",
493
+ componentId: "sc-fzagoe-0"
494
+ })(["text-align:", ";font-weight:inherit;", " ", " ", ";"], function (props) {
467
495
  if (!props.hasOverflow) {
468
496
  if (props.theme.rtl) {
469
497
  return 'right';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-tables",
3
- "version": "8.39.0",
3
+ "version": "8.41.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>",
@@ -21,7 +21,7 @@
21
21
  "sideEffects": false,
22
22
  "types": "dist/typings/index.d.ts",
23
23
  "dependencies": {
24
- "@zendeskgarden/container-utilities": "^0.5.5",
24
+ "@zendeskgarden/container-utilities": "^0.6.0",
25
25
  "dom-helpers": "^5.1.0",
26
26
  "polished": "^4.0.0",
27
27
  "prop-types": "^15.5.7"
@@ -33,9 +33,9 @@
33
33
  "styled-components": "^4.2.0 || ^5.0.0"
34
34
  },
35
35
  "devDependencies": {
36
- "@types/react-beautiful-dnd": "13.0.0",
37
- "@types/react-window": "1.8.3",
38
- "@zendeskgarden/react-theming": "^8.39.0",
36
+ "@types/react-beautiful-dnd": "13.1.2",
37
+ "@types/react-window": "1.8.5",
38
+ "@zendeskgarden/react-theming": "^8.41.0",
39
39
  "@zendeskgarden/svg-icons": "6.30.2",
40
40
  "react-beautiful-dnd": "13.1.0",
41
41
  "react-window": "1.8.6"
@@ -50,5 +50,5 @@
50
50
  "access": "public"
51
51
  },
52
52
  "zendeskgarden:src": "src/index.ts",
53
- "gitHead": "a061ca3a673a21bc6f53d52cceb26ba71eab7008"
53
+ "gitHead": "723c0bf1f98b1fcc0de3f7c005fbbfa5005a2fa9"
54
54
  }