@zendeskgarden/react-tables 8.47.0 → 8.48.1

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 CHANGED
@@ -27,14 +27,12 @@ function _interopNamespace(e) {
27
27
  var d = Object.getOwnPropertyDescriptor(e, k);
28
28
  Object.defineProperty(n, k, d.get ? d : {
29
29
  enumerable: true,
30
- get: function () {
31
- return e[k];
32
- }
30
+ get: function () { return e[k]; }
33
31
  });
34
32
  }
35
33
  });
36
34
  }
37
- n['default'] = e;
35
+ n["default"] = e;
38
36
  return Object.freeze(n);
39
37
  }
40
38
 
@@ -157,9 +155,9 @@ function _nonIterableRest() {
157
155
  }
158
156
 
159
157
  var COMPONENT_ID$a = 'tables.body';
160
- var StyledBody = styled__default['default'].tbody.attrs({
158
+ var StyledBody = styled__default["default"].tbody.attrs({
161
159
  'data-garden-id': COMPONENT_ID$a,
162
- 'data-garden-version': '8.47.0'
160
+ 'data-garden-version': '8.48.1'
163
161
  }).withConfig({
164
162
  displayName: "StyledBody",
165
163
  componentId: "sc-14ud6y-0"
@@ -171,9 +169,9 @@ StyledBody.defaultProps = {
171
169
  };
172
170
 
173
171
  var COMPONENT_ID$9 = 'tables.caption';
174
- var StyledCaption = styled__default['default'].caption.attrs({
172
+ var StyledCaption = styled__default["default"].caption.attrs({
175
173
  'data-garden-id': COMPONENT_ID$9,
176
- 'data-garden-version': '8.47.0'
174
+ 'data-garden-version': '8.48.1'
177
175
  }).withConfig({
178
176
  displayName: "StyledCaption",
179
177
  componentId: "sc-113y327-0"
@@ -190,9 +188,9 @@ var COMPONENT_ID$8 = 'tables.table';
190
188
  var getLineHeight = function getLineHeight(props) {
191
189
  return "".concat(props.theme.space.base * 5, "px");
192
190
  };
193
- var StyledTable = styled__default['default'].table.attrs({
191
+ var StyledTable = styled__default["default"].table.attrs({
194
192
  'data-garden-id': COMPONENT_ID$8,
195
- 'data-garden-version': '8.47.0'
193
+ 'data-garden-version': '8.48.1'
196
194
  }).withConfig({
197
195
  displayName: "StyledTable",
198
196
  componentId: "sc-gje7na-0"
@@ -243,9 +241,9 @@ var sizeStyling = function sizeStyling(props) {
243
241
  }
244
242
  return styled.css(["box-sizing:", ";padding:", ";width:", ";height:", ";"], boxSizing, padding, width, height);
245
243
  };
246
- var StyledCell = styled__default['default'].td.attrs({
244
+ var StyledCell = styled__default["default"].td.attrs({
247
245
  'data-garden-id': COMPONENT_ID$7,
248
- 'data-garden-version': '8.47.0'
246
+ 'data-garden-version': '8.48.1'
249
247
  }).withConfig({
250
248
  displayName: "StyledCell",
251
249
  componentId: "sc-8hpncx-0"
@@ -278,9 +276,9 @@ var colorStyles$1 = function colorStyles(props) {
278
276
  }
279
277
  return styled.css(["color:", ";&:hover{background-color:", ";color:", ";}&:active{background-color:", ";color:", ";}&:focus{outline:none;}&[data-garden-focus-visible]{box-shadow:inset ", ";}"], foregroundColor, hoverBackgroundColor, hoverForegroundColor, activeBackgroundColor, activeForegroundColor, boxShadow);
280
278
  };
281
- var StyledOverflowButton = styled__default['default'].button.attrs({
279
+ var StyledOverflowButton = styled__default["default"].button.attrs({
282
280
  'data-garden-id': COMPONENT_ID$6,
283
- 'data-garden-version': '8.47.0',
281
+ 'data-garden-version': '8.48.1',
284
282
  type: 'button'
285
283
  }).withConfig({
286
284
  displayName: "StyledOverflowButton",
@@ -299,7 +297,7 @@ var StyledOverflowButton = styled__default['default'].button.attrs({
299
297
  StyledOverflowButton.defaultProps = {
300
298
  theme: reactTheming.DEFAULT_THEME
301
299
  };
302
- var StyledOverflowButtonIconWrapper = styled__default['default'].div.withConfig({
300
+ var StyledOverflowButtonIconWrapper = styled__default["default"].div.withConfig({
303
301
  displayName: "StyledOverflowButton__StyledOverflowButtonIconWrapper",
304
302
  componentId: "sc-1eba2ml-1"
305
303
  })(["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);
@@ -308,7 +306,7 @@ StyledOverflowButtonIconWrapper.defaultProps = {
308
306
  };
309
307
 
310
308
  var COMPONENT_ID$5 = 'tables.row';
311
- var StyledBaseRow = styled__default['default'].tr.withConfig({
309
+ var StyledBaseRow = styled__default["default"].tr.withConfig({
312
310
  displayName: "StyledRow__StyledBaseRow",
313
311
  componentId: "sc-ek66ow-0"
314
312
  })(["display:table-row;transition:background-color 0.1s ease-in-out;border-bottom:", ";background-color:", ";vertical-align:top;box-sizing:border-box;"], function (props) {
@@ -348,10 +346,10 @@ var colorStyles = function colorStyles(props) {
348
346
  }
349
347
  return styled.css(["border-bottom-color:", ";background-color:", ";&:hover{border-bottom-color:", ";background-color:", ";", "{opacity:1;}}&:focus{outline:none;}", ":first-of-type{box-shadow:", ";&:focus{box-shadow:", ";}}"], borderColor, backgroundColor, hoverBorderBottomColor, hoverBackgroundColor, StyledOverflowButton, StyledCell, props.isFocused && boxShadow, boxShadow);
350
348
  };
351
- var StyledRow = styled__default['default'](StyledBaseRow).attrs(function (props) {
349
+ var StyledRow = styled__default["default"](StyledBaseRow).attrs(function (props) {
352
350
  return {
353
351
  'data-garden-id': COMPONENT_ID$5,
354
- 'data-garden-version': '8.47.0',
352
+ 'data-garden-version': '8.48.1',
355
353
  tabIndex: props.isReadOnly ? undefined : -1
356
354
  };
357
355
  }).withConfig({
@@ -375,9 +373,9 @@ var getHeaderRowHeight = function getHeaderRowHeight(props) {
375
373
  }
376
374
  return "".concat(props.theme.space.base * 12, "px");
377
375
  };
378
- var StyledHeaderRow = styled__default['default'](StyledBaseRow).attrs({
376
+ var StyledHeaderRow = styled__default["default"](StyledBaseRow).attrs({
379
377
  'data-garden-id': COMPONENT_ID$4,
380
- 'data-garden-version': '8.47.0'
378
+ 'data-garden-version': '8.48.1'
381
379
  }).withConfig({
382
380
  displayName: "StyledHeaderRow",
383
381
  componentId: "sc-16ogvdx-0"
@@ -395,9 +393,9 @@ StyledHeaderRow.defaultProps = {
395
393
  };
396
394
 
397
395
  var COMPONENT_ID$3 = 'tables.head';
398
- var StyledHead = styled__default['default'].thead.attrs({
396
+ var StyledHead = styled__default["default"].thead.attrs({
399
397
  'data-garden-id': COMPONENT_ID$3,
400
- 'data-garden-version': '8.47.0'
398
+ 'data-garden-version': '8.48.1'
401
399
  }).withConfig({
402
400
  displayName: "StyledHead",
403
401
  componentId: "sc-spf23a-0"
@@ -414,9 +412,9 @@ var sizeStyles$1 = function sizeStyles(props) {
414
412
  var lineHeight = getLineHeight(props);
415
413
  return styled.css(["height:", ";line-height:", ";font-size:", ";", "{padding:", " ", "px;}"], height, lineHeight, props.theme.fontSizes.sm, StyledCell, polished.math("(".concat(height, " - ").concat(lineHeight, ") / 2")), props.theme.space.base * 3);
416
414
  };
417
- var StyledGroupRow = styled__default['default'](StyledBaseRow).attrs({
415
+ var StyledGroupRow = styled__default["default"](StyledBaseRow).attrs({
418
416
  'data-garden-id': COMPONENT_ID$2,
419
- 'data-garden-version': '8.47.0'
417
+ 'data-garden-version': '8.48.1'
420
418
  }).withConfig({
421
419
  displayName: "StyledGroupRow",
422
420
  componentId: "sc-mpd0r8-0"
@@ -432,7 +430,7 @@ StyledGroupRow.defaultProps = {
432
430
  };
433
431
 
434
432
  var COMPONENT_ID$1 = 'tables.sortable';
435
- var StyledBaseIconWrapper = styled__default['default'].div.withConfig({
433
+ var StyledBaseIconWrapper = styled__default["default"].div.withConfig({
436
434
  displayName: "StyledSortableButton__StyledBaseIconWrapper",
437
435
  componentId: "sc-2s1dli-0"
438
436
  })(["display:flex;position:absolute;top:0;", ":0;align-items:center;justify-content:center;opacity:0;width:", ";height:100%;color:inherit;fill:inherit;"], function (props) {
@@ -443,23 +441,23 @@ var StyledBaseIconWrapper = styled__default['default'].div.withConfig({
443
441
  StyledBaseIconWrapper.defaultProps = {
444
442
  theme: reactTheming.DEFAULT_THEME
445
443
  };
446
- var StyledSortableStrokeIconWrapper = styled__default['default'](StyledBaseIconWrapper).withConfig({
444
+ var StyledSortableStrokeIconWrapper = styled__default["default"](StyledBaseIconWrapper).withConfig({
447
445
  displayName: "StyledSortableButton__StyledSortableStrokeIconWrapper",
448
446
  componentId: "sc-2s1dli-1"
449
447
  })([""]);
450
448
  StyledSortableStrokeIconWrapper.defaultProps = {
451
449
  theme: reactTheming.DEFAULT_THEME
452
450
  };
453
- var StyledSortableFillIconWrapper = styled__default['default'](StyledBaseIconWrapper).withConfig({
451
+ var StyledSortableFillIconWrapper = styled__default["default"](StyledBaseIconWrapper).withConfig({
454
452
  displayName: "StyledSortableButton__StyledSortableFillIconWrapper",
455
453
  componentId: "sc-2s1dli-2"
456
454
  })([""]);
457
455
  StyledSortableFillIconWrapper.defaultProps = {
458
456
  theme: reactTheming.DEFAULT_THEME
459
457
  };
460
- var StyledSortableButton = styled__default['default'].button.attrs({
458
+ var StyledSortableButton = styled__default["default"].button.attrs({
461
459
  'data-garden-id': COMPONENT_ID$1,
462
- 'data-garden-version': '8.47.0',
460
+ 'data-garden-version': '8.48.1',
463
461
  type: 'button'
464
462
  }).withConfig({
465
463
  displayName: "StyledSortableButton",
@@ -514,10 +512,10 @@ var sizeStyles = function sizeStyles(props) {
514
512
  }
515
513
  return styled.css(["padding-top:", ";padding-bottom:", ";"], paddingVertical, paddingVertical);
516
514
  };
517
- var StyledHeaderCell = styled__default['default'](StyledCell).attrs({
515
+ var StyledHeaderCell = styled__default["default"](StyledCell).attrs({
518
516
  as: 'th',
519
517
  'data-garden-id': COMPONENT_ID,
520
- 'data-garden-version': '8.47.0'
518
+ 'data-garden-version': '8.48.1'
521
519
  }).withConfig({
522
520
  displayName: "StyledHeaderCell",
523
521
  componentId: "sc-fzagoe-0"
@@ -540,21 +538,21 @@ StyledHeaderCell.defaultProps = {
540
538
  theme: reactTheming.DEFAULT_THEME
541
539
  };
542
540
 
543
- var Body = React__default['default'].forwardRef(function (props, ref) {
544
- return React__default['default'].createElement(StyledBody, _extends$3({
541
+ var Body = React.forwardRef(function (props, ref) {
542
+ return React__default["default"].createElement(StyledBody, _extends$3({
545
543
  ref: ref
546
544
  }, props));
547
545
  });
548
546
  Body.displayName = 'Body';
549
547
 
550
- var Caption = React__default['default'].forwardRef(function (props, ref) {
551
- return React__default['default'].createElement(StyledCaption, _extends$3({
548
+ var Caption = React.forwardRef(function (props, ref) {
549
+ return React__default["default"].createElement(StyledCaption, _extends$3({
552
550
  ref: ref
553
551
  }, props));
554
552
  });
555
553
  Caption.displayName = 'Caption';
556
554
 
557
- var TableContext = React__default['default'].createContext({
555
+ var TableContext = React__default["default"].createContext({
558
556
  size: 'medium',
559
557
  isReadOnly: false
560
558
  });
@@ -562,96 +560,96 @@ var useTableContext = function useTableContext() {
562
560
  return React.useContext(TableContext);
563
561
  };
564
562
 
565
- var Cell = React__default['default'].forwardRef(function (props, ref) {
563
+ var Cell = React__default["default"].forwardRef(function (props, ref) {
566
564
  var _useTableContext = useTableContext(),
567
565
  size = _useTableContext.size;
568
- return React__default['default'].createElement(StyledCell, _extends$3({
566
+ return React__default["default"].createElement(StyledCell, _extends$3({
569
567
  ref: ref,
570
568
  size: size
571
569
  }, props));
572
570
  });
573
571
  Cell.displayName = 'Cell';
574
572
  Cell.propTypes = {
575
- isMinimum: PropTypes__default['default'].bool,
576
- isTruncated: PropTypes__default['default'].bool,
577
- hasOverflow: PropTypes__default['default'].bool,
578
- width: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].number])
573
+ isMinimum: PropTypes__default["default"].bool,
574
+ isTruncated: PropTypes__default["default"].bool,
575
+ hasOverflow: PropTypes__default["default"].bool,
576
+ width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
579
577
  };
580
578
 
581
- var GroupRow = React__default['default'].forwardRef(function (props, ref) {
579
+ var GroupRow = React.forwardRef(function (props, ref) {
582
580
  var _useTableContext = useTableContext(),
583
581
  size = _useTableContext.size;
584
- return React__default['default'].createElement(StyledGroupRow, _extends$3({
582
+ return React__default["default"].createElement(StyledGroupRow, _extends$3({
585
583
  ref: ref,
586
584
  size: size
587
585
  }, props));
588
586
  });
589
587
  GroupRow.displayName = 'GroupRow';
590
588
 
591
- var Head = React__default['default'].forwardRef(function (props, ref) {
592
- return React__default['default'].createElement(StyledHead, _extends$3({
589
+ var Head = React.forwardRef(function (props, ref) {
590
+ return React__default["default"].createElement(StyledHead, _extends$3({
593
591
  ref: ref
594
592
  }, props));
595
593
  });
596
594
  Head.displayName = 'Head';
597
595
 
598
- var HeaderCell = React__default['default'].forwardRef(function (props, ref) {
596
+ var HeaderCell = React.forwardRef(function (props, ref) {
599
597
  var _useTableContext = useTableContext(),
600
598
  size = _useTableContext.size;
601
- return React__default['default'].createElement(StyledHeaderCell, _extends$3({
599
+ return React__default["default"].createElement(StyledHeaderCell, _extends$3({
602
600
  ref: ref,
603
601
  size: size
604
602
  }, props));
605
603
  });
606
604
  HeaderCell.displayName = 'HeaderCell';
607
605
  HeaderCell.propTypes = {
608
- isMinimum: PropTypes__default['default'].bool,
609
- isTruncated: PropTypes__default['default'].bool,
610
- hasOverflow: PropTypes__default['default'].bool,
611
- width: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].number])
606
+ isMinimum: PropTypes__default["default"].bool,
607
+ isTruncated: PropTypes__default["default"].bool,
608
+ hasOverflow: PropTypes__default["default"].bool,
609
+ width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
612
610
  };
613
611
 
614
- var HeaderRow = React__default['default'].forwardRef(function (props, ref) {
612
+ var HeaderRow = React__default["default"].forwardRef(function (props, ref) {
615
613
  var _useTableContext = useTableContext(),
616
614
  size = _useTableContext.size;
617
- return React__default['default'].createElement(StyledHeaderRow, _extends$3({
615
+ return React__default["default"].createElement(StyledHeaderRow, _extends$3({
618
616
  ref: ref,
619
617
  size: size
620
618
  }, props));
621
619
  });
622
620
  HeaderRow.displayName = 'HeaderRow';
623
621
 
622
+ var _g;
623
+
624
624
  function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
625
625
 
626
- var _ref$2 = /*#__PURE__*/React__namespace.createElement("g", {
627
- fill: "currentColor"
628
- }, /*#__PURE__*/React__namespace.createElement("circle", {
629
- cx: 2.5,
630
- cy: 8,
631
- r: 1.5
632
- }), /*#__PURE__*/React__namespace.createElement("circle", {
633
- cx: 8,
634
- cy: 8,
635
- r: 1.5
636
- }), /*#__PURE__*/React__namespace.createElement("circle", {
637
- cx: 13.5,
638
- cy: 8,
639
- r: 1.5
640
- }));
641
-
642
- function SvgOverflowStroke(props) {
626
+ var SvgOverflowStroke = function SvgOverflowStroke(props) {
643
627
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
644
628
  xmlns: "http://www.w3.org/2000/svg",
645
629
  width: 16,
646
630
  height: 16,
647
- viewBox: "0 0 16 16",
648
631
  focusable: "false",
649
- role: "presentation"
650
- }, props), _ref$2);
651
- }
632
+ viewBox: "0 0 16 16",
633
+ "aria-hidden": "true"
634
+ }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
635
+ fill: "currentColor"
636
+ }, /*#__PURE__*/React__namespace.createElement("circle", {
637
+ cx: 2.5,
638
+ cy: 8,
639
+ r: 1.5
640
+ }), /*#__PURE__*/React__namespace.createElement("circle", {
641
+ cx: 8,
642
+ cy: 8,
643
+ r: 1.5
644
+ }), /*#__PURE__*/React__namespace.createElement("circle", {
645
+ cx: 13.5,
646
+ cy: 8,
647
+ r: 1.5
648
+ }))));
649
+ };
652
650
 
653
651
  var _excluded$2 = ["onFocus", "onBlur", "isFocused"];
654
- var OverflowButton = React__default['default'].forwardRef(function (_ref, ref) {
652
+ var OverflowButton = React.forwardRef(function (_ref, ref) {
655
653
  var onFocus = _ref.onFocus,
656
654
  onBlur = _ref.onBlur,
657
655
  focused = _ref.isFocused,
@@ -662,7 +660,7 @@ var OverflowButton = React__default['default'].forwardRef(function (_ref, ref) {
662
660
  setIsFocused = _useState2[1];
663
661
  var _useTableContext = useTableContext(),
664
662
  size = _useTableContext.size;
665
- return React__default['default'].createElement(StyledOverflowButton, _extends$3({
663
+ return React__default["default"].createElement(StyledOverflowButton, _extends$3({
666
664
  onFocus: containerUtilities.composeEventHandlers(onFocus, function () {
667
665
  setIsFocused(true);
668
666
  }),
@@ -672,17 +670,17 @@ var OverflowButton = React__default['default'].forwardRef(function (_ref, ref) {
672
670
  size: size,
673
671
  isFocused: typeof focused === 'undefined' ? isFocused : focused,
674
672
  ref: ref
675
- }, other), React__default['default'].createElement(StyledOverflowButtonIconWrapper, null, React__default['default'].createElement(SvgOverflowStroke, null)));
673
+ }, other), React__default["default"].createElement(StyledOverflowButtonIconWrapper, null, React__default["default"].createElement(SvgOverflowStroke, null)));
676
674
  });
677
675
  OverflowButton.displayName = 'OverflowButton';
678
676
  OverflowButton.propTypes = {
679
- isHovered: PropTypes__default['default'].bool,
680
- isActive: PropTypes__default['default'].bool,
681
- isFocused: PropTypes__default['default'].bool
677
+ isHovered: PropTypes__default["default"].bool,
678
+ isActive: PropTypes__default["default"].bool,
679
+ isFocused: PropTypes__default["default"].bool
682
680
  };
683
681
 
684
682
  var _excluded$1 = ["onFocus", "onBlur", "isFocused"];
685
- var Row = React__default['default'].forwardRef(function (_ref, ref) {
683
+ var Row = React.forwardRef(function (_ref, ref) {
686
684
  var onFocus = _ref.onFocus,
687
685
  onBlur = _ref.onBlur,
688
686
  focused = _ref.isFocused,
@@ -703,7 +701,7 @@ var Row = React__default['default'].forwardRef(function (_ref, ref) {
703
701
  }
704
702
  return isFocused;
705
703
  }, [focused, isFocused, isReadOnly]);
706
- return React__default['default'].createElement(StyledRow, _extends$3({
704
+ return React__default["default"].createElement(StyledRow, _extends$3({
707
705
  onFocus: containerUtilities.composeEventHandlers(onFocus, function () {
708
706
  setIsFocused(true);
709
707
  }),
@@ -718,56 +716,54 @@ var Row = React__default['default'].forwardRef(function (_ref, ref) {
718
716
  });
719
717
  Row.displayName = 'Row';
720
718
  Row.propTypes = {
721
- isStriped: PropTypes__default['default'].bool,
722
- isFocused: PropTypes__default['default'].bool,
723
- isHovered: PropTypes__default['default'].bool,
724
- isSelected: PropTypes__default['default'].bool
719
+ isStriped: PropTypes__default["default"].bool,
720
+ isFocused: PropTypes__default["default"].bool,
721
+ isHovered: PropTypes__default["default"].bool,
722
+ isSelected: PropTypes__default["default"].bool
725
723
  };
726
724
 
727
- function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
725
+ var _path$1;
728
726
 
729
- var _ref$1 = /*#__PURE__*/React__namespace.createElement("path", {
730
- fill: "none",
731
- stroke: "currentColor",
732
- strokeLinecap: "round",
733
- d: "M2.5 4L5.6.9c.2-.2.5-.2.7 0L9.5 4m-7 4l3.1 3.1c.2.2.5.2.7 0L9.5 8"
734
- });
727
+ function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
735
728
 
736
- function SvgSortStroke(props) {
729
+ var SvgSortStroke = function SvgSortStroke(props) {
737
730
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
738
731
  xmlns: "http://www.w3.org/2000/svg",
739
732
  width: 12,
740
733
  height: 12,
741
- viewBox: "0 0 12 12",
742
734
  focusable: "false",
743
- role: "presentation"
744
- }, props), _ref$1);
745
- }
746
-
747
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
735
+ viewBox: "0 0 12 12",
736
+ "aria-hidden": "true"
737
+ }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
738
+ fill: "none",
739
+ stroke: "currentColor",
740
+ strokeLinecap: "round",
741
+ d: "M2.5 4L5.6.9c.2-.2.5-.2.7 0L9.5 4m-7 4l3.1 3.1c.2.2.5.2.7 0L9.5 8"
742
+ })));
743
+ };
748
744
 
749
- var _ref = /*#__PURE__*/React__namespace.createElement("path", {
750
- fill: "currentColor",
751
- d: "M10 5H2a.5.5 0 01-.46-.31.47.47 0 01.11-.54L5.29.5A1 1 0 016.7.5l3.65 3.65a.49.49 0 01.11.54A.51.51 0 0110 5z"
752
- });
745
+ var _path, _path2;
753
746
 
754
- var _ref2 = /*#__PURE__*/React__namespace.createElement("path", {
755
- d: "M2 7a.5.5 0 00-.46.31.47.47 0 00.11.54L5.3 11.5a1 1 0 001.41 0l3.65-3.65a.49.49 0 00.11-.54A.53.53 0 0010 7z"
756
- });
747
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
757
748
 
758
- function SvgSortFill(props) {
749
+ var SvgSortFill = function SvgSortFill(props) {
759
750
  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
760
751
  xmlns: "http://www.w3.org/2000/svg",
761
752
  width: 12,
762
753
  height: 12,
763
- viewBox: "0 0 12 12",
764
754
  focusable: "false",
765
- role: "presentation"
766
- }, props), _ref, _ref2);
767
- }
755
+ viewBox: "0 0 12 12",
756
+ "aria-hidden": "true"
757
+ }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
758
+ fill: "currentColor",
759
+ d: "M10 5H2a.5.5 0 01-.46-.31.47.47 0 01.11-.54L5.29.5A1 1 0 016.7.5l3.65 3.65a.49.49 0 01.11.54A.51.51 0 0110 5z"
760
+ })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
761
+ d: "M2 7a.5.5 0 00-.46.31.47.47 0 00.11.54L5.3 11.5a1 1 0 001.41 0l3.65-3.65a.49.49 0 00.11-.54A.53.53 0 0010 7z"
762
+ })));
763
+ };
768
764
 
769
765
  var _excluded = ["sort", "cellProps", "width", "children"];
770
- var SortableCell = React__default['default'].forwardRef(function (_ref, ref) {
766
+ var SortableCell = React.forwardRef(function (_ref, ref) {
771
767
  var sort = _ref.sort,
772
768
  cellProps = _ref.cellProps,
773
769
  width = _ref.width,
@@ -780,31 +776,31 @@ var SortableCell = React__default['default'].forwardRef(function (_ref, ref) {
780
776
  ariaSortValue = 'descending';
781
777
  }
782
778
  var SortIcon = sort === undefined ? SvgSortStroke : SvgSortFill;
783
- return React__default['default'].createElement(StyledHeaderCell, _extends$3({
779
+ return React__default["default"].createElement(StyledHeaderCell, _extends$3({
784
780
  "aria-sort": ariaSortValue,
785
781
  width: width
786
- }, cellProps), React__default['default'].createElement(StyledSortableButton, _extends$3({
782
+ }, cellProps), React__default["default"].createElement(StyledSortableButton, _extends$3({
787
783
  sort: sort,
788
784
  ref: ref
789
- }, otherProps), children, React__default['default'].createElement(StyledSortableStrokeIconWrapper, null, React__default['default'].createElement(SortIcon, null)), React__default['default'].createElement(StyledSortableFillIconWrapper, null, React__default['default'].createElement(SvgSortFill, null))));
785
+ }, otherProps), children, React__default["default"].createElement(StyledSortableStrokeIconWrapper, null, React__default["default"].createElement(SortIcon, null)), React__default["default"].createElement(StyledSortableFillIconWrapper, null, React__default["default"].createElement(SvgSortFill, null))));
790
786
  });
791
787
  SortableCell.displayName = 'SortableCell';
792
788
  SortableCell.propTypes = {
793
- sort: PropTypes__default['default'].oneOf(['asc', 'desc']),
794
- cellProps: PropTypes__default['default'].any,
795
- width: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].number])
789
+ sort: PropTypes__default["default"].oneOf(['asc', 'desc']),
790
+ cellProps: PropTypes__default["default"].any,
791
+ width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
796
792
  };
797
793
 
798
- var Table = React__default['default'].forwardRef(function (props, ref) {
794
+ var Table = React__default["default"].forwardRef(function (props, ref) {
799
795
  var tableContextValue = React.useMemo(function () {
800
796
  return {
801
797
  size: props.size,
802
798
  isReadOnly: props.isReadOnly
803
799
  };
804
800
  }, [props.size, props.isReadOnly]);
805
- return React__default['default'].createElement(TableContext.Provider, {
801
+ return React__default["default"].createElement(TableContext.Provider, {
806
802
  value: tableContextValue
807
- }, React__default['default'].createElement(StyledTable, _extends$3({
803
+ }, React__default["default"].createElement(StyledTable, _extends$3({
808
804
  ref: ref
809
805
  }, props)));
810
806
  });
@@ -813,7 +809,8 @@ Table.defaultProps = {
813
809
  size: 'medium'
814
810
  };
815
811
  Table.propTypes = {
816
- size: PropTypes__default['default'].oneOf(['small', 'medium', 'large'])
812
+ size: PropTypes__default["default"].oneOf(['small', 'medium', 'large']),
813
+ isReadOnly: PropTypes__default["default"].bool
817
814
  };
818
815
 
819
816
  exports.Body = Body;
package/dist/index.esm.js CHANGED
@@ -6,7 +6,7 @@
6
6
  */
7
7
 
8
8
  import * as React from 'react';
9
- import React__default, { useContext, useState, useMemo } from 'react';
9
+ import React__default, { forwardRef, useContext, useState, useMemo } from 'react';
10
10
  import styled, { css } from 'styled-components';
11
11
  import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
12
12
  import { math } from 'polished';
@@ -129,7 +129,7 @@ function _nonIterableRest() {
129
129
  var COMPONENT_ID$a = 'tables.body';
130
130
  var StyledBody = styled.tbody.attrs({
131
131
  'data-garden-id': COMPONENT_ID$a,
132
- 'data-garden-version': '8.47.0'
132
+ 'data-garden-version': '8.48.1'
133
133
  }).withConfig({
134
134
  displayName: "StyledBody",
135
135
  componentId: "sc-14ud6y-0"
@@ -143,7 +143,7 @@ StyledBody.defaultProps = {
143
143
  var COMPONENT_ID$9 = 'tables.caption';
144
144
  var StyledCaption = styled.caption.attrs({
145
145
  'data-garden-id': COMPONENT_ID$9,
146
- 'data-garden-version': '8.47.0'
146
+ 'data-garden-version': '8.48.1'
147
147
  }).withConfig({
148
148
  displayName: "StyledCaption",
149
149
  componentId: "sc-113y327-0"
@@ -162,7 +162,7 @@ var getLineHeight = function getLineHeight(props) {
162
162
  };
163
163
  var StyledTable = styled.table.attrs({
164
164
  'data-garden-id': COMPONENT_ID$8,
165
- 'data-garden-version': '8.47.0'
165
+ 'data-garden-version': '8.48.1'
166
166
  }).withConfig({
167
167
  displayName: "StyledTable",
168
168
  componentId: "sc-gje7na-0"
@@ -215,7 +215,7 @@ var sizeStyling = function sizeStyling(props) {
215
215
  };
216
216
  var StyledCell = styled.td.attrs({
217
217
  'data-garden-id': COMPONENT_ID$7,
218
- 'data-garden-version': '8.47.0'
218
+ 'data-garden-version': '8.48.1'
219
219
  }).withConfig({
220
220
  displayName: "StyledCell",
221
221
  componentId: "sc-8hpncx-0"
@@ -250,7 +250,7 @@ var colorStyles$1 = function colorStyles(props) {
250
250
  };
251
251
  var StyledOverflowButton = styled.button.attrs({
252
252
  'data-garden-id': COMPONENT_ID$6,
253
- 'data-garden-version': '8.47.0',
253
+ 'data-garden-version': '8.48.1',
254
254
  type: 'button'
255
255
  }).withConfig({
256
256
  displayName: "StyledOverflowButton",
@@ -321,7 +321,7 @@ var colorStyles = function colorStyles(props) {
321
321
  var StyledRow = styled(StyledBaseRow).attrs(function (props) {
322
322
  return {
323
323
  'data-garden-id': COMPONENT_ID$5,
324
- 'data-garden-version': '8.47.0',
324
+ 'data-garden-version': '8.48.1',
325
325
  tabIndex: props.isReadOnly ? undefined : -1
326
326
  };
327
327
  }).withConfig({
@@ -347,7 +347,7 @@ var getHeaderRowHeight = function getHeaderRowHeight(props) {
347
347
  };
348
348
  var StyledHeaderRow = styled(StyledBaseRow).attrs({
349
349
  'data-garden-id': COMPONENT_ID$4,
350
- 'data-garden-version': '8.47.0'
350
+ 'data-garden-version': '8.48.1'
351
351
  }).withConfig({
352
352
  displayName: "StyledHeaderRow",
353
353
  componentId: "sc-16ogvdx-0"
@@ -367,7 +367,7 @@ StyledHeaderRow.defaultProps = {
367
367
  var COMPONENT_ID$3 = 'tables.head';
368
368
  var StyledHead = styled.thead.attrs({
369
369
  'data-garden-id': COMPONENT_ID$3,
370
- 'data-garden-version': '8.47.0'
370
+ 'data-garden-version': '8.48.1'
371
371
  }).withConfig({
372
372
  displayName: "StyledHead",
373
373
  componentId: "sc-spf23a-0"
@@ -386,7 +386,7 @@ var sizeStyles$1 = function sizeStyles(props) {
386
386
  };
387
387
  var StyledGroupRow = styled(StyledBaseRow).attrs({
388
388
  'data-garden-id': COMPONENT_ID$2,
389
- 'data-garden-version': '8.47.0'
389
+ 'data-garden-version': '8.48.1'
390
390
  }).withConfig({
391
391
  displayName: "StyledGroupRow",
392
392
  componentId: "sc-mpd0r8-0"
@@ -429,7 +429,7 @@ StyledSortableFillIconWrapper.defaultProps = {
429
429
  };
430
430
  var StyledSortableButton = styled.button.attrs({
431
431
  'data-garden-id': COMPONENT_ID$1,
432
- 'data-garden-version': '8.47.0',
432
+ 'data-garden-version': '8.48.1',
433
433
  type: 'button'
434
434
  }).withConfig({
435
435
  displayName: "StyledSortableButton",
@@ -487,7 +487,7 @@ var sizeStyles = function sizeStyles(props) {
487
487
  var StyledHeaderCell = styled(StyledCell).attrs({
488
488
  as: 'th',
489
489
  'data-garden-id': COMPONENT_ID,
490
- 'data-garden-version': '8.47.0'
490
+ 'data-garden-version': '8.48.1'
491
491
  }).withConfig({
492
492
  displayName: "StyledHeaderCell",
493
493
  componentId: "sc-fzagoe-0"
@@ -510,14 +510,14 @@ StyledHeaderCell.defaultProps = {
510
510
  theme: DEFAULT_THEME
511
511
  };
512
512
 
513
- var Body = React__default.forwardRef(function (props, ref) {
513
+ var Body = forwardRef(function (props, ref) {
514
514
  return React__default.createElement(StyledBody, _extends$3({
515
515
  ref: ref
516
516
  }, props));
517
517
  });
518
518
  Body.displayName = 'Body';
519
519
 
520
- var Caption = React__default.forwardRef(function (props, ref) {
520
+ var Caption = forwardRef(function (props, ref) {
521
521
  return React__default.createElement(StyledCaption, _extends$3({
522
522
  ref: ref
523
523
  }, props));
@@ -548,7 +548,7 @@ Cell.propTypes = {
548
548
  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
549
549
  };
550
550
 
551
- var GroupRow = React__default.forwardRef(function (props, ref) {
551
+ var GroupRow = forwardRef(function (props, ref) {
552
552
  var _useTableContext = useTableContext(),
553
553
  size = _useTableContext.size;
554
554
  return React__default.createElement(StyledGroupRow, _extends$3({
@@ -558,14 +558,14 @@ var GroupRow = React__default.forwardRef(function (props, ref) {
558
558
  });
559
559
  GroupRow.displayName = 'GroupRow';
560
560
 
561
- var Head = React__default.forwardRef(function (props, ref) {
561
+ var Head = forwardRef(function (props, ref) {
562
562
  return React__default.createElement(StyledHead, _extends$3({
563
563
  ref: ref
564
564
  }, props));
565
565
  });
566
566
  Head.displayName = 'Head';
567
567
 
568
- var HeaderCell = React__default.forwardRef(function (props, ref) {
568
+ var HeaderCell = forwardRef(function (props, ref) {
569
569
  var _useTableContext = useTableContext(),
570
570
  size = _useTableContext.size;
571
571
  return React__default.createElement(StyledHeaderCell, _extends$3({
@@ -591,37 +591,37 @@ var HeaderRow = React__default.forwardRef(function (props, ref) {
591
591
  });
592
592
  HeaderRow.displayName = 'HeaderRow';
593
593
 
594
+ var _g;
595
+
594
596
  function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
595
597
 
596
- var _ref$2 = /*#__PURE__*/React.createElement("g", {
597
- fill: "currentColor"
598
- }, /*#__PURE__*/React.createElement("circle", {
599
- cx: 2.5,
600
- cy: 8,
601
- r: 1.5
602
- }), /*#__PURE__*/React.createElement("circle", {
603
- cx: 8,
604
- cy: 8,
605
- r: 1.5
606
- }), /*#__PURE__*/React.createElement("circle", {
607
- cx: 13.5,
608
- cy: 8,
609
- r: 1.5
610
- }));
611
-
612
- function SvgOverflowStroke(props) {
598
+ var SvgOverflowStroke = function SvgOverflowStroke(props) {
613
599
  return /*#__PURE__*/React.createElement("svg", _extends$2({
614
600
  xmlns: "http://www.w3.org/2000/svg",
615
601
  width: 16,
616
602
  height: 16,
617
- viewBox: "0 0 16 16",
618
603
  focusable: "false",
619
- role: "presentation"
620
- }, props), _ref$2);
621
- }
604
+ viewBox: "0 0 16 16",
605
+ "aria-hidden": "true"
606
+ }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
607
+ fill: "currentColor"
608
+ }, /*#__PURE__*/React.createElement("circle", {
609
+ cx: 2.5,
610
+ cy: 8,
611
+ r: 1.5
612
+ }), /*#__PURE__*/React.createElement("circle", {
613
+ cx: 8,
614
+ cy: 8,
615
+ r: 1.5
616
+ }), /*#__PURE__*/React.createElement("circle", {
617
+ cx: 13.5,
618
+ cy: 8,
619
+ r: 1.5
620
+ }))));
621
+ };
622
622
 
623
623
  var _excluded$2 = ["onFocus", "onBlur", "isFocused"];
624
- var OverflowButton = React__default.forwardRef(function (_ref, ref) {
624
+ var OverflowButton = forwardRef(function (_ref, ref) {
625
625
  var onFocus = _ref.onFocus,
626
626
  onBlur = _ref.onBlur,
627
627
  focused = _ref.isFocused,
@@ -652,7 +652,7 @@ OverflowButton.propTypes = {
652
652
  };
653
653
 
654
654
  var _excluded$1 = ["onFocus", "onBlur", "isFocused"];
655
- var Row = React__default.forwardRef(function (_ref, ref) {
655
+ var Row = forwardRef(function (_ref, ref) {
656
656
  var onFocus = _ref.onFocus,
657
657
  onBlur = _ref.onBlur,
658
658
  focused = _ref.isFocused,
@@ -694,50 +694,48 @@ Row.propTypes = {
694
694
  isSelected: PropTypes.bool
695
695
  };
696
696
 
697
- function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
697
+ var _path$1;
698
698
 
699
- var _ref$1 = /*#__PURE__*/React.createElement("path", {
700
- fill: "none",
701
- stroke: "currentColor",
702
- strokeLinecap: "round",
703
- d: "M2.5 4L5.6.9c.2-.2.5-.2.7 0L9.5 4m-7 4l3.1 3.1c.2.2.5.2.7 0L9.5 8"
704
- });
699
+ function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
705
700
 
706
- function SvgSortStroke(props) {
701
+ var SvgSortStroke = function SvgSortStroke(props) {
707
702
  return /*#__PURE__*/React.createElement("svg", _extends$1({
708
703
  xmlns: "http://www.w3.org/2000/svg",
709
704
  width: 12,
710
705
  height: 12,
711
- viewBox: "0 0 12 12",
712
706
  focusable: "false",
713
- role: "presentation"
714
- }, props), _ref$1);
715
- }
716
-
717
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
707
+ viewBox: "0 0 12 12",
708
+ "aria-hidden": "true"
709
+ }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
710
+ fill: "none",
711
+ stroke: "currentColor",
712
+ strokeLinecap: "round",
713
+ d: "M2.5 4L5.6.9c.2-.2.5-.2.7 0L9.5 4m-7 4l3.1 3.1c.2.2.5.2.7 0L9.5 8"
714
+ })));
715
+ };
718
716
 
719
- var _ref = /*#__PURE__*/React.createElement("path", {
720
- fill: "currentColor",
721
- d: "M10 5H2a.5.5 0 01-.46-.31.47.47 0 01.11-.54L5.29.5A1 1 0 016.7.5l3.65 3.65a.49.49 0 01.11.54A.51.51 0 0110 5z"
722
- });
717
+ var _path, _path2;
723
718
 
724
- var _ref2 = /*#__PURE__*/React.createElement("path", {
725
- d: "M2 7a.5.5 0 00-.46.31.47.47 0 00.11.54L5.3 11.5a1 1 0 001.41 0l3.65-3.65a.49.49 0 00.11-.54A.53.53 0 0010 7z"
726
- });
719
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
727
720
 
728
- function SvgSortFill(props) {
721
+ var SvgSortFill = function SvgSortFill(props) {
729
722
  return /*#__PURE__*/React.createElement("svg", _extends({
730
723
  xmlns: "http://www.w3.org/2000/svg",
731
724
  width: 12,
732
725
  height: 12,
733
- viewBox: "0 0 12 12",
734
726
  focusable: "false",
735
- role: "presentation"
736
- }, props), _ref, _ref2);
737
- }
727
+ viewBox: "0 0 12 12",
728
+ "aria-hidden": "true"
729
+ }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
730
+ fill: "currentColor",
731
+ d: "M10 5H2a.5.5 0 01-.46-.31.47.47 0 01.11-.54L5.29.5A1 1 0 016.7.5l3.65 3.65a.49.49 0 01.11.54A.51.51 0 0110 5z"
732
+ })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
733
+ d: "M2 7a.5.5 0 00-.46.31.47.47 0 00.11.54L5.3 11.5a1 1 0 001.41 0l3.65-3.65a.49.49 0 00.11-.54A.53.53 0 0010 7z"
734
+ })));
735
+ };
738
736
 
739
737
  var _excluded = ["sort", "cellProps", "width", "children"];
740
- var SortableCell = React__default.forwardRef(function (_ref, ref) {
738
+ var SortableCell = forwardRef(function (_ref, ref) {
741
739
  var sort = _ref.sort,
742
740
  cellProps = _ref.cellProps,
743
741
  width = _ref.width,
@@ -783,7 +781,8 @@ Table.defaultProps = {
783
781
  size: 'medium'
784
782
  };
785
783
  Table.propTypes = {
786
- size: PropTypes.oneOf(['small', 'medium', 'large'])
784
+ size: PropTypes.oneOf(['small', 'medium', 'large']),
785
+ isReadOnly: PropTypes.bool
787
786
  };
788
787
 
789
788
  export { Body, Caption, Cell, GroupRow, Head, HeaderCell, HeaderRow, OverflowButton, Row, SortableCell, Table };
@@ -4,9 +4,21 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- import React from 'react';
8
- import { IStyledCellProps } from '../styled';
7
+ import React, { TdHTMLAttributes } from 'react';
8
+ export interface ICellProps extends TdHTMLAttributes<HTMLTableCellElement> {
9
+ /**
10
+ * Applies minimum fixed width styling (e.g. for cells that contain
11
+ * checkboxes or icons)
12
+ */
13
+ isMinimum?: boolean;
14
+ /** Truncates long text with an ellipsis */
15
+ isTruncated?: boolean;
16
+ /** Applies styling for a cell that contains an overflow menu */
17
+ hasOverflow?: boolean;
18
+ /** Adjusts the [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width) of the cell */
19
+ width?: string | number;
20
+ }
9
21
  /**
10
22
  * @extends TdHTMLAttributes<HTMLTableCellElement>
11
23
  */
12
- export declare const Cell: React.ForwardRefExoticComponent<Pick<IStyledCellProps, "isMinimum" | "isTruncated" | "hasOverflow" | "width"> & React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
24
+ export declare const Cell: React.ForwardRefExoticComponent<ICellProps & React.RefAttributes<HTMLTableCellElement>>;
@@ -4,9 +4,21 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- import React from 'react';
8
- import { IStyledCellProps } from '../styled';
7
+ import React, { ThHTMLAttributes } from 'react';
8
+ export interface IHeaderCellProps extends ThHTMLAttributes<HTMLTableCellElement> {
9
+ /**
10
+ * Applies minimum fixed width styling (e.g. for cells that contain
11
+ * checkboxes or icons)
12
+ */
13
+ isMinimum?: boolean;
14
+ /** Truncates long text with an ellipsis */
15
+ isTruncated?: boolean;
16
+ /** Applies styling for a cell that contains an overflow menu */
17
+ hasOverflow?: boolean;
18
+ /** Adjusts the [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width) of the cell */
19
+ width?: string | number;
20
+ }
9
21
  /**
10
- * @extends ThHTMLAttributes<HTMLTableHeaderCellElement>
22
+ * @extends ThHTMLAttributes<HTMLTableCellElement>
11
23
  */
12
- export declare const HeaderCell: React.ForwardRefExoticComponent<Pick<IStyledCellProps, "isMinimum" | "isTruncated" | "hasOverflow" | "width"> & React.ThHTMLAttributes<HTMLTableHeaderCellElement> & React.RefAttributes<HTMLTableHeaderCellElement>>;
24
+ export declare const HeaderCell: React.ForwardRefExoticComponent<IHeaderCellProps & React.RefAttributes<HTMLTableCellElement>>;
@@ -4,9 +4,16 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- import React from 'react';
8
- import { IStyledOverflowButtonProps } from '../styled';
7
+ import React, { ButtonHTMLAttributes } from 'react';
8
+ export interface IOverflowButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
9
+ /** @ignore Applies hover styling */
10
+ isHovered?: boolean;
11
+ /** @ignore Applies active styling */
12
+ isActive?: boolean;
13
+ /** @ignore Applies focus styling */
14
+ isFocused?: boolean;
15
+ }
9
16
  /**
10
17
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
11
18
  */
12
- export declare const OverflowButton: React.ForwardRefExoticComponent<Pick<IStyledOverflowButtonProps, "isHovered" | "isActive" | "isFocused"> & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
19
+ export declare const OverflowButton: React.ForwardRefExoticComponent<IOverflowButtonProps & React.RefAttributes<HTMLButtonElement>>;
@@ -4,9 +4,18 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- import React from 'react';
8
- import { IStyledRowProps } from '../styled';
7
+ import React, { HTMLAttributes } from 'react';
8
+ export interface IRowProps extends HTMLAttributes<HTMLTableRowElement> {
9
+ /** Applies striped styling */
10
+ isStriped?: boolean;
11
+ /** @ignore Applies focus styling */
12
+ isFocused?: boolean;
13
+ /** @ignore Applies hover styling */
14
+ isHovered?: boolean;
15
+ /** Applies selected styling */
16
+ isSelected?: boolean;
17
+ }
9
18
  /**
10
19
  * @extends HTMLAttributes<HTMLTableRowElement>
11
20
  */
12
- export declare const Row: React.ForwardRefExoticComponent<Pick<IStyledRowProps, "isStriped" | "isFocused" | "isHovered" | "isSelected" | "isReadOnly"> & React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
21
+ export declare const Row: React.ForwardRefExoticComponent<IRowProps & React.RefAttributes<HTMLTableRowElement>>;
@@ -4,14 +4,17 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- import React from 'react';
8
- import { IStyledSortableButtonProps } from '../styled';
9
- interface ISortableCellProps extends IStyledSortableButtonProps {
7
+ import React, { ButtonHTMLAttributes } from 'react';
8
+ import { SORT } from '../styled';
9
+ export interface ISortableCellProps extends ButtonHTMLAttributes<HTMLButtonElement> {
10
+ /** Sets the sort order */
11
+ sort?: SORT;
12
+ /** Sets the width of the cell */
13
+ width?: string | number;
10
14
  /** Passes props to the cell */
11
15
  cellProps?: any;
12
16
  }
13
17
  /**
14
18
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
15
19
  */
16
- export declare const SortableCell: React.ForwardRefExoticComponent<ISortableCellProps & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
17
- export {};
20
+ export declare const SortableCell: React.ForwardRefExoticComponent<ISortableCellProps & React.RefAttributes<HTMLButtonElement>>;
@@ -5,8 +5,10 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import React, { TableHTMLAttributes } from 'react';
8
- import { IStyledTableProps } from '../styled';
9
- interface ITableProps extends IStyledTableProps, TableHTMLAttributes<HTMLTableElement> {
8
+ import { SIZE } from '../styled';
9
+ export interface ITableProps extends TableHTMLAttributes<HTMLTableElement> {
10
+ /** Sets the table size */
11
+ size?: SIZE;
10
12
  /** Removes interactive styling from table rows */
11
13
  isReadOnly?: boolean;
12
14
  }
@@ -14,4 +16,3 @@ interface ITableProps extends IStyledTableProps, TableHTMLAttributes<HTMLTableEl
14
16
  * @extends TableHTMLAttributes<HTMLTableElement>
15
17
  */
16
18
  export declare const Table: React.ForwardRefExoticComponent<ITableProps & React.RefAttributes<HTMLTableElement>>;
17
- export {};
@@ -7,11 +7,16 @@
7
7
  export { Body } from './elements/Body';
8
8
  export { Caption } from './elements/Caption';
9
9
  export { Cell } from './elements/Cell';
10
+ export type { ICellProps } from './elements/Cell';
10
11
  export { GroupRow } from './elements/GroupRow';
11
12
  export { Head } from './elements/Head';
12
13
  export { HeaderCell } from './elements/HeaderCell';
14
+ export type { IHeaderCellProps } from './elements/HeaderCell';
13
15
  export { HeaderRow } from './elements/HeaderRow';
14
16
  export { OverflowButton } from './elements/OverflowButton';
15
17
  export { Row } from './elements/Row';
18
+ export type { IRowProps } from './elements/Row';
16
19
  export { SortableCell } from './elements/SortableCell';
20
+ export type { ISortableCellProps } from './elements/SortableCell';
17
21
  export { Table } from './elements/Table';
22
+ export type { ITableProps } from './elements/Table';
@@ -7,18 +7,10 @@
7
7
  import { DefaultTheme } from 'styled-components';
8
8
  import { SIZE } from './StyledTable';
9
9
  export interface IStyledCellProps {
10
- /**
11
- * Applies minimum fixed width styling (e.g. for cells that contain
12
- * checkboxes or icons)
13
- */
14
10
  isMinimum?: boolean;
15
- /** Truncates long text with an ellipsis */
16
11
  isTruncated?: boolean;
17
- /** Applies styling for a cell that contains an overflow menu */
18
12
  hasOverflow?: boolean;
19
- /** Adjusts the [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width) of the cell */
20
13
  width?: string | number;
21
- /** Adjusts the vertical padding of the cell */
22
14
  size: SIZE;
23
15
  }
24
16
  export declare const StyledCell: import("styled-components").StyledComponent<"td", DefaultTheme, IStyledCellProps, never>;
@@ -10,4 +10,4 @@ export declare const StyledHeaderCell: import("styled-components").StyledCompone
10
10
  as: string;
11
11
  'data-garden-id': string;
12
12
  'data-garden-version': string;
13
- }, "as" | "data-garden-id" | "data-garden-version">;
13
+ }, "data-garden-id" | "data-garden-version" | "as">;
@@ -6,14 +6,10 @@
6
6
  */
7
7
  import { DefaultTheme } from 'styled-components';
8
8
  import { SIZE } from './StyledTable';
9
- export interface IStyledOverflowButtonProps {
10
- /** Applies hover styling */
9
+ interface IStyledOverflowButtonProps {
11
10
  isHovered?: boolean;
12
- /** Applies active styling */
13
11
  isActive?: boolean;
14
- /** Applies focus styling */
15
12
  isFocused?: boolean;
16
- /** Sets the size */
17
13
  size: SIZE;
18
14
  }
19
15
  /**
@@ -22,3 +18,4 @@ export interface IStyledOverflowButtonProps {
22
18
  */
23
19
  export declare const StyledOverflowButton: import("styled-components").StyledComponent<"button", DefaultTheme, IStyledOverflowButtonProps, never>;
24
20
  export declare const StyledOverflowButtonIconWrapper: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
21
+ export {};
@@ -7,17 +7,11 @@
7
7
  import { DefaultTheme } from 'styled-components';
8
8
  import { SIZE } from './StyledTable';
9
9
  export interface IStyledRowProps {
10
- /** Applies striped styling */
11
10
  isStriped?: boolean;
12
- /** Applies focus styling */
13
11
  isFocused?: boolean;
14
- /** Applies hover styling */
15
12
  isHovered?: boolean;
16
- /** Applies selected styling */
17
13
  isSelected?: boolean;
18
- /** Removes interactive styling */
19
14
  isReadOnly?: boolean;
20
- /** Adjusts vertical padding */
21
15
  size: SIZE;
22
16
  }
23
17
  export declare const StyledBaseRow: import("styled-components").StyledComponent<"tr", DefaultTheme, IStyledRowProps, never>;
@@ -4,13 +4,11 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- declare type SORT = 'asc' | 'desc';
7
+ export declare type SORT = 'asc' | 'desc';
8
8
  export declare const StyledSortableStrokeIconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
9
9
  export declare const StyledSortableFillIconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
10
- export interface IStyledSortableButtonProps {
11
- /** Sets the sort order */
10
+ interface IStyledSortableButtonProps {
12
11
  sort?: SORT;
13
- /** Sets the width of the cell */
14
12
  width?: string | number;
15
13
  }
16
14
  /**
@@ -6,8 +6,7 @@
6
6
  */
7
7
  import { ThemeProps, DefaultTheme } from 'styled-components';
8
8
  export declare type SIZE = 'small' | 'medium' | 'large';
9
- export interface IStyledTableProps {
10
- /** Sets the table size */
9
+ interface IStyledTableProps {
11
10
  size?: SIZE;
12
11
  }
13
12
  export declare const getLineHeight: (props: ThemeProps<DefaultTheme>) => string;
@@ -15,3 +14,4 @@ export declare const getLineHeight: (props: ThemeProps<DefaultTheme>) => string;
15
14
  * 1. <table> reset
16
15
  */
17
16
  export declare const StyledTable: import("styled-components").StyledComponent<"table", DefaultTheme, IStyledTableProps, never>;
17
+ export {};
@@ -9,14 +9,9 @@ export { StyledCaption } from './StyledCaption';
9
9
  export { StyledHeaderRow } from './StyledHeaderRow';
10
10
  export { StyledHead } from './StyledHead';
11
11
  export { StyledCell } from './StyledCell';
12
- export type { IStyledCellProps } from './StyledCell';
13
12
  export { StyledGroupRow } from './StyledGroupRow';
14
- export { StyledTable } from './StyledTable';
15
- export type { IStyledTableProps } from './StyledTable';
13
+ export { StyledTable, SIZE } from './StyledTable';
16
14
  export { StyledHeaderCell } from './StyledHeaderCell';
17
- export { StyledSortableButton, StyledSortableFillIconWrapper, StyledSortableStrokeIconWrapper } from './StyledSortableButton';
18
- export type { IStyledSortableButtonProps } from './StyledSortableButton';
15
+ export { StyledSortableButton, StyledSortableFillIconWrapper, StyledSortableStrokeIconWrapper, SORT } from './StyledSortableButton';
19
16
  export { StyledOverflowButton, StyledOverflowButtonIconWrapper } from './StyledOverflowButton';
20
- export type { IStyledOverflowButtonProps } from './StyledOverflowButton';
21
17
  export { StyledRow } from './StyledRow';
22
- export type { IStyledRowProps } from './StyledRow';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-tables",
3
- "version": "8.47.0",
3
+ "version": "8.48.1",
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.6.0",
24
+ "@zendeskgarden/container-utilities": "^0.7.0",
25
25
  "dom-helpers": "^5.1.0",
26
26
  "polished": "^4.0.0",
27
27
  "prop-types": "^15.5.7"
@@ -35,7 +35,7 @@
35
35
  "devDependencies": {
36
36
  "@types/react-beautiful-dnd": "13.1.2",
37
37
  "@types/react-window": "1.8.5",
38
- "@zendeskgarden/react-theming": "^8.47.0",
38
+ "@zendeskgarden/react-theming": "^8.48.1",
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": "aba4138c9eb030ab3f204ba783b340ca55be6988"
53
+ "gitHead": "82c621bfbc943904baa6647a2f5e89d3271d7edf"
54
54
  }