npm - @zendeskgarden/react-tables - Versions diffs - 8.39.0 → 8.41.0 - Mend

@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

package/dist/index.cjs.js CHANGED Viewed

@@ -97,18 +97,6 @@ function _objectWithoutProperties(source, excluded) {
   return target;
 }
-function _taggedTemplateLiteral(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
-  }
-  return Object.freeze(Object.defineProperties(strings, {
-    raw: {
-      value: Object.freeze(raw)
-    }
-  }));
-}
 function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -118,14 +106,17 @@ function _arrayWithHoles(arr) {
 }
 function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+  if (_i == null) return;
   var _arr = [];
   var _n = true;
   var _d = false;
-  var _e = undefined;
+  var _s, _e;
   try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
       _arr.push(_s.value);
       if (i && _arr.length === i) break;
@@ -165,24 +156,28 @@ function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-var _templateObject$a;
 var COMPONENT_ID$a = 'tables.body';
 var StyledBody = styled__default['default'].tbody.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.39.0'
-})(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledBody",
+  componentId: "sc-14ud6y-0"
+})(["", ";"], function (props) {
   return reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props);
 });
 StyledBody.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-var _templateObject$9;
 var COMPONENT_ID$9 = 'tables.caption';
 var StyledCaption = styled__default['default'].caption.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.39.0'
-})(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n  display: table-caption;\n  text-align: ", ";\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledCaption",
+  componentId: "sc-113y327-0"
+})(["display:table-caption;text-align:", ";", ";"], function (props) {
   return props.theme.rtl ? 'right' : 'left';
 }, function (props) {
   return reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props);
@@ -191,15 +186,17 @@ StyledCaption.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-var _templateObject$8;
 var COMPONENT_ID$8 = 'tables.table';
 var getLineHeight = function getLineHeight(props) {
   return "".concat(props.theme.space.base * 5, "px");
 };
 var StyledTable = styled__default['default'].table.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.39.0'
-})(_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) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledTable",
+  componentId: "sc-gje7na-0"
+})(["display:table;border:none;width:100%;table-layout:fixed;border-collapse:collapse;border-spacing:0;line-height:", ";color:", ";font-size:", ";direction:", ";", ";"], function (props) {
   return getLineHeight(props);
 }, function (props) {
   return props.theme.colors.foreground;
@@ -223,7 +220,6 @@ var getRowHeight = function getRowHeight(props) {
   return "".concat(props.theme.space.base * 10, "px");
 };
-var _templateObject$7;
 var COMPONENT_ID$7 = 'tables.cell';
 var truncatedStyling$1 = styled.css(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
 var sizeStyling = function sizeStyling(props) {
@@ -249,8 +245,11 @@ var sizeStyling = function sizeStyling(props) {
 };
 var StyledCell = styled__default['default'].td.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.39.0'
-})(_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) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledCell",
+  componentId: "sc-8hpncx-0"
+})(["display:table-cell;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out;", ";", ";", ";"], function (props) {
   return sizeStyling(props);
 }, function (props) {
   return props.isTruncated && truncatedStyling$1;
@@ -261,7 +260,6 @@ StyledCell.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-var _templateObject$6, _templateObject2$2;
 var COMPONENT_ID$6 = 'tables.overflow_button';
 var OVERFLOW_BUTTON_SIZE = '2em';
 var colorStyles$1 = function colorStyles(props) {
@@ -282,9 +280,12 @@ var colorStyles$1 = function colorStyles(props) {
 };
 var StyledOverflowButton = styled__default['default'].button.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.39.0',
+  'data-garden-version': '8.41.0',
   type: 'button'
-})(_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) {
+}).withConfig({
+  displayName: "StyledOverflowButton",
+  componentId: "sc-1eba2ml-0"
+})(["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) {
   return props.isHovered || props.isFocused || props.isActive ? '1' : '0';
 }, function (props) {
   return props.isActive ? '1' : '0';
@@ -298,14 +299,19 @@ var StyledOverflowButton = styled__default['default'].button.attrs({
 StyledOverflowButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-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);
+var StyledOverflowButtonIconWrapper = styled__default['default'].div.withConfig({
+  displayName: "StyledOverflowButton__StyledOverflowButtonIconWrapper",
+  componentId: "sc-1eba2ml-1"
+})(["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);
 StyledOverflowButtonIconWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-var _templateObject$5, _templateObject2$1;
 var COMPONENT_ID$5 = 'tables.row';
-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) {
+var StyledBaseRow = styled__default['default'].tr.withConfig({
+  displayName: "StyledRow__StyledBaseRow",
+  componentId: "sc-ek66ow-0"
+})(["display:table-row;transition:background-color 0.1s ease-in-out;border-bottom:", ";background-color:", ";vertical-align:top;box-sizing:border-box;"], function (props) {
   return "".concat(props.theme.borders.sm, " ").concat(reactTheming.getColor('neutralHue', 200, props.theme));
 }, function (props) {
   return props.isStriped && reactTheming.getColor('neutralHue', 100, props.theme);
@@ -345,10 +351,13 @@ var colorStyles = function colorStyles(props) {
 var StyledRow = styled__default['default'](StyledBaseRow).attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$5,
-    'data-garden-version': '8.39.0',
+    'data-garden-version': '8.41.0',
     tabIndex: props.isReadOnly ? undefined : -1
   };
-})(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  height: ", ";\n\n  ", "\n\n  ", ";\n"])), getRowHeight, function (props) {
+}).withConfig({
+  displayName: "StyledRow",
+  componentId: "sc-ek66ow-1"
+})(["height:", ";", " ", ";"], getRowHeight, function (props) {
   return colorStyles(props);
 }, function (props) {
   return reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props);
@@ -357,7 +366,6 @@ StyledRow.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-var _templateObject$4;
 var COMPONENT_ID$4 = 'tables.header_row';
 var getHeaderRowHeight = function getHeaderRowHeight(props) {
   if (props.size === 'large') {
@@ -369,8 +377,11 @@ var getHeaderRowHeight = function getHeaderRowHeight(props) {
 };
 var StyledHeaderRow = styled__default['default'](StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.39.0'
-})(_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) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledHeaderRow",
+  componentId: "sc-16ogvdx-0"
+})(["border-bottom-color:", ";height:", ";vertical-align:bottom;font-weight:", ";", "{opacity:1;margin-top:0;margin-bottom:calc(", " - 1em);}", ";"], function (props) {
   return reactTheming.getColor('neutralHue', 300, props.theme);
 }, getHeaderRowHeight, function (props) {
   return props.theme.fontWeights.semibold;
@@ -383,19 +394,20 @@ StyledHeaderRow.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-var _templateObject$3;
 var COMPONENT_ID$3 = 'tables.head';
 var StyledHead = styled__default['default'].thead.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.39.0'
-})(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledHead",
+  componentId: "sc-spf23a-0"
+})(["", ";"], function (props) {
   return reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props);
 });
 StyledHead.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-var _templateObject$2;
 var COMPONENT_ID$2 = 'tables.group_row';
 var sizeStyles$1 = function sizeStyles(props) {
   var height = "".concat(props.theme.space.base * 8, "px");
@@ -404,8 +416,11 @@ var sizeStyles$1 = function sizeStyles(props) {
 };
 var StyledGroupRow = styled__default['default'](StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.39.0'
-})(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  ", "\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledGroupRow",
+  componentId: "sc-mpd0r8-0"
+})(["background-color:", ";", " ", ";"], function (props) {
   return reactTheming.getColor('neutralHue', 100, props.theme);
 }, function (props) {
   return sizeStyles$1(props);
@@ -416,9 +431,11 @@ StyledGroupRow.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-var _templateObject$1, _templateObject2, _templateObject3, _templateObject4;
 var COMPONENT_ID$1 = 'tables.sortable';
-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) {
+var StyledBaseIconWrapper = styled__default['default'].div.withConfig({
+  displayName: "StyledSortableButton__StyledBaseIconWrapper",
+  componentId: "sc-2s1dli-0"
+})(["display:flex;position:absolute;top:0;", ":0;align-items:center;justify-content:center;opacity:0;width:", ";height:100%;color:inherit;fill:inherit;"], function (props) {
   return props.theme.rtl ? 'left' : 'right';
 }, function (props) {
   return props.theme.iconSizes.sm;
@@ -426,19 +443,28 @@ var StyledBaseIconWrapper = styled__default['default'].div(_templateObject$1 ||
 StyledBaseIconWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-var StyledSortableStrokeIconWrapper = styled__default['default'](StyledBaseIconWrapper)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
+var StyledSortableStrokeIconWrapper = styled__default['default'](StyledBaseIconWrapper).withConfig({
+  displayName: "StyledSortableButton__StyledSortableStrokeIconWrapper",
+  componentId: "sc-2s1dli-1"
+})([""]);
 StyledSortableStrokeIconWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-var StyledSortableFillIconWrapper = styled__default['default'](StyledBaseIconWrapper)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
+var StyledSortableFillIconWrapper = styled__default['default'](StyledBaseIconWrapper).withConfig({
+  displayName: "StyledSortableButton__StyledSortableFillIconWrapper",
+  componentId: "sc-2s1dli-2"
+})([""]);
 StyledSortableFillIconWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 var StyledSortableButton = styled__default['default'].button.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.39.0',
+  'data-garden-version': '8.41.0',
   type: 'button'
-})(_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) {
+}).withConfig({
+  displayName: "StyledSortableButton",
+  componentId: "sc-2s1dli-3"
+})(["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) {
   return props.theme.rtl ? 'left' : 'right';
 }, function (props) {
   return polished.math("".concat(props.theme.space.base, " + ").concat(props.theme.iconSizes.sm));
@@ -479,7 +505,6 @@ StyledSortableButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-var _templateObject;
 var COMPONENT_ID = 'tables.header_cell';
 var truncatedStyling = styled.css(["", "{max-width:100%;overflow:hidden;text-overflow:ellipsis;}"], StyledSortableButton);
 var sizeStyles = function sizeStyles(props) {
@@ -492,8 +517,11 @@ var sizeStyles = function sizeStyles(props) {
 var StyledHeaderCell = styled__default['default'](StyledCell).attrs({
   as: 'th',
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.39.0'
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-align: ", ";\n  font-weight: inherit;\n\n  ", "\n  ", "\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledHeaderCell",
+  componentId: "sc-fzagoe-0"
+})(["text-align:", ";font-weight:inherit;", " ", " ", ";"], function (props) {
   if (!props.hasOverflow) {
     if (props.theme.rtl) {
       return 'right';

package/dist/index.esm.js CHANGED Viewed

@@ -67,18 +67,6 @@ function _objectWithoutProperties(source, excluded) {
   return target;
 }
-function _taggedTemplateLiteral(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
-  }
-  return Object.freeze(Object.defineProperties(strings, {
-    raw: {
-      value: Object.freeze(raw)
-    }
-  }));
-}
 function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -88,14 +76,17 @@ function _arrayWithHoles(arr) {
 }
 function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+  if (_i == null) return;
   var _arr = [];
   var _n = true;
   var _d = false;
-  var _e = undefined;
+  var _s, _e;
   try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
       _arr.push(_s.value);
       if (i && _arr.length === i) break;
@@ -135,24 +126,28 @@ function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-var _templateObject$a;
 var COMPONENT_ID$a = 'tables.body';
 var StyledBody = styled.tbody.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.39.0'
-})(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledBody",
+  componentId: "sc-14ud6y-0"
+})(["", ";"], function (props) {
   return retrieveComponentStyles(COMPONENT_ID$a, props);
 });
 StyledBody.defaultProps = {
   theme: DEFAULT_THEME
 };
-var _templateObject$9;
 var COMPONENT_ID$9 = 'tables.caption';
 var StyledCaption = styled.caption.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.39.0'
-})(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n  display: table-caption;\n  text-align: ", ";\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledCaption",
+  componentId: "sc-113y327-0"
+})(["display:table-caption;text-align:", ";", ";"], function (props) {
   return props.theme.rtl ? 'right' : 'left';
 }, function (props) {
   return retrieveComponentStyles(COMPONENT_ID$9, props);
@@ -161,15 +156,17 @@ StyledCaption.defaultProps = {
   theme: DEFAULT_THEME
 };
-var _templateObject$8;
 var COMPONENT_ID$8 = 'tables.table';
 var getLineHeight = function getLineHeight(props) {
   return "".concat(props.theme.space.base * 5, "px");
 };
 var StyledTable = styled.table.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.39.0'
-})(_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) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledTable",
+  componentId: "sc-gje7na-0"
+})(["display:table;border:none;width:100%;table-layout:fixed;border-collapse:collapse;border-spacing:0;line-height:", ";color:", ";font-size:", ";direction:", ";", ";"], function (props) {
   return getLineHeight(props);
 }, function (props) {
   return props.theme.colors.foreground;
@@ -193,7 +190,6 @@ var getRowHeight = function getRowHeight(props) {
   return "".concat(props.theme.space.base * 10, "px");
 };
-var _templateObject$7;
 var COMPONENT_ID$7 = 'tables.cell';
 var truncatedStyling$1 = css(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
 var sizeStyling = function sizeStyling(props) {
@@ -219,8 +215,11 @@ var sizeStyling = function sizeStyling(props) {
 };
 var StyledCell = styled.td.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.39.0'
-})(_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) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledCell",
+  componentId: "sc-8hpncx-0"
+})(["display:table-cell;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out;", ";", ";", ";"], function (props) {
   return sizeStyling(props);
 }, function (props) {
   return props.isTruncated && truncatedStyling$1;
@@ -231,7 +230,6 @@ StyledCell.defaultProps = {
   theme: DEFAULT_THEME
 };
-var _templateObject$6, _templateObject2$2;
 var COMPONENT_ID$6 = 'tables.overflow_button';
 var OVERFLOW_BUTTON_SIZE = '2em';
 var colorStyles$1 = function colorStyles(props) {
@@ -252,9 +250,12 @@ var colorStyles$1 = function colorStyles(props) {
 };
 var StyledOverflowButton = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.39.0',
+  'data-garden-version': '8.41.0',
   type: 'button'
-})(_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) {
+}).withConfig({
+  displayName: "StyledOverflowButton",
+  componentId: "sc-1eba2ml-0"
+})(["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) {
   return props.isHovered || props.isFocused || props.isActive ? '1' : '0';
 }, function (props) {
   return props.isActive ? '1' : '0';
@@ -268,14 +269,19 @@ var StyledOverflowButton = styled.button.attrs({
 StyledOverflowButton.defaultProps = {
   theme: DEFAULT_THEME
 };
-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);
+var StyledOverflowButtonIconWrapper = styled.div.withConfig({
+  displayName: "StyledOverflowButton__StyledOverflowButtonIconWrapper",
+  componentId: "sc-1eba2ml-1"
+})(["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);
 StyledOverflowButtonIconWrapper.defaultProps = {
   theme: DEFAULT_THEME
 };
-var _templateObject$5, _templateObject2$1;
 var COMPONENT_ID$5 = 'tables.row';
-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) {
+var StyledBaseRow = styled.tr.withConfig({
+  displayName: "StyledRow__StyledBaseRow",
+  componentId: "sc-ek66ow-0"
+})(["display:table-row;transition:background-color 0.1s ease-in-out;border-bottom:", ";background-color:", ";vertical-align:top;box-sizing:border-box;"], function (props) {
   return "".concat(props.theme.borders.sm, " ").concat(getColor('neutralHue', 200, props.theme));
 }, function (props) {
   return props.isStriped && getColor('neutralHue', 100, props.theme);
@@ -315,10 +321,13 @@ var colorStyles = function colorStyles(props) {
 var StyledRow = styled(StyledBaseRow).attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$5,
-    'data-garden-version': '8.39.0',
+    'data-garden-version': '8.41.0',
     tabIndex: props.isReadOnly ? undefined : -1
   };
-})(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  height: ", ";\n\n  ", "\n\n  ", ";\n"])), getRowHeight, function (props) {
+}).withConfig({
+  displayName: "StyledRow",
+  componentId: "sc-ek66ow-1"
+})(["height:", ";", " ", ";"], getRowHeight, function (props) {
   return colorStyles(props);
 }, function (props) {
   return retrieveComponentStyles(COMPONENT_ID$5, props);
@@ -327,7 +336,6 @@ StyledRow.defaultProps = {
   theme: DEFAULT_THEME
 };
-var _templateObject$4;
 var COMPONENT_ID$4 = 'tables.header_row';
 var getHeaderRowHeight = function getHeaderRowHeight(props) {
   if (props.size === 'large') {
@@ -339,8 +347,11 @@ var getHeaderRowHeight = function getHeaderRowHeight(props) {
 };
 var StyledHeaderRow = styled(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.39.0'
-})(_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) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledHeaderRow",
+  componentId: "sc-16ogvdx-0"
+})(["border-bottom-color:", ";height:", ";vertical-align:bottom;font-weight:", ";", "{opacity:1;margin-top:0;margin-bottom:calc(", " - 1em);}", ";"], function (props) {
   return getColor('neutralHue', 300, props.theme);
 }, getHeaderRowHeight, function (props) {
   return props.theme.fontWeights.semibold;
@@ -353,19 +364,20 @@ StyledHeaderRow.defaultProps = {
   theme: DEFAULT_THEME
 };
-var _templateObject$3;
 var COMPONENT_ID$3 = 'tables.head';
 var StyledHead = styled.thead.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.39.0'
-})(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledHead",
+  componentId: "sc-spf23a-0"
+})(["", ";"], function (props) {
   return retrieveComponentStyles(COMPONENT_ID$3, props);
 });
 StyledHead.defaultProps = {
   theme: DEFAULT_THEME
 };
-var _templateObject$2;
 var COMPONENT_ID$2 = 'tables.group_row';
 var sizeStyles$1 = function sizeStyles(props) {
   var height = "".concat(props.theme.space.base * 8, "px");
@@ -374,8 +386,11 @@ var sizeStyles$1 = function sizeStyles(props) {
 };
 var StyledGroupRow = styled(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.39.0'
-})(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  ", "\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledGroupRow",
+  componentId: "sc-mpd0r8-0"
+})(["background-color:", ";", " ", ";"], function (props) {
   return getColor('neutralHue', 100, props.theme);
 }, function (props) {
   return sizeStyles$1(props);
@@ -386,9 +401,11 @@ StyledGroupRow.defaultProps = {
   theme: DEFAULT_THEME
 };
-var _templateObject$1, _templateObject2, _templateObject3, _templateObject4;
 var COMPONENT_ID$1 = 'tables.sortable';
-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) {
+var StyledBaseIconWrapper = styled.div.withConfig({
+  displayName: "StyledSortableButton__StyledBaseIconWrapper",
+  componentId: "sc-2s1dli-0"
+})(["display:flex;position:absolute;top:0;", ":0;align-items:center;justify-content:center;opacity:0;width:", ";height:100%;color:inherit;fill:inherit;"], function (props) {
   return props.theme.rtl ? 'left' : 'right';
 }, function (props) {
   return props.theme.iconSizes.sm;
@@ -396,19 +413,28 @@ var StyledBaseIconWrapper = styled.div(_templateObject$1 || (_templateObject$1 =
 StyledBaseIconWrapper.defaultProps = {
   theme: DEFAULT_THEME
 };
-var StyledSortableStrokeIconWrapper = styled(StyledBaseIconWrapper)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
+var StyledSortableStrokeIconWrapper = styled(StyledBaseIconWrapper).withConfig({
+  displayName: "StyledSortableButton__StyledSortableStrokeIconWrapper",
+  componentId: "sc-2s1dli-1"
+})([""]);
 StyledSortableStrokeIconWrapper.defaultProps = {
   theme: DEFAULT_THEME
 };
-var StyledSortableFillIconWrapper = styled(StyledBaseIconWrapper)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
+var StyledSortableFillIconWrapper = styled(StyledBaseIconWrapper).withConfig({
+  displayName: "StyledSortableButton__StyledSortableFillIconWrapper",
+  componentId: "sc-2s1dli-2"
+})([""]);
 StyledSortableFillIconWrapper.defaultProps = {
   theme: DEFAULT_THEME
 };
 var StyledSortableButton = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.39.0',
+  'data-garden-version': '8.41.0',
   type: 'button'
-})(_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) {
+}).withConfig({
+  displayName: "StyledSortableButton",
+  componentId: "sc-2s1dli-3"
+})(["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) {
   return props.theme.rtl ? 'left' : 'right';
 }, function (props) {
   return math("".concat(props.theme.space.base, " + ").concat(props.theme.iconSizes.sm));
@@ -449,7 +475,6 @@ StyledSortableButton.defaultProps = {
   theme: DEFAULT_THEME
 };
-var _templateObject;
 var COMPONENT_ID = 'tables.header_cell';
 var truncatedStyling = css(["", "{max-width:100%;overflow:hidden;text-overflow:ellipsis;}"], StyledSortableButton);
 var sizeStyles = function sizeStyles(props) {
@@ -462,8 +487,11 @@ var sizeStyles = function sizeStyles(props) {
 var StyledHeaderCell = styled(StyledCell).attrs({
   as: 'th',
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.39.0'
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-align: ", ";\n  font-weight: inherit;\n\n  ", "\n  ", "\n\n  ", ";\n"])), function (props) {
+  'data-garden-version': '8.41.0'
+}).withConfig({
+  displayName: "StyledHeaderCell",
+  componentId: "sc-fzagoe-0"
+})(["text-align:", ";font-weight:inherit;", " ", " ", ";"], function (props) {
   if (!props.hasOverflow) {
     if (props.theme.rtl) {
       return 'right';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-tables",
-  "version": "8.39.0",
+  "version": "8.41.0",
   "description": "Components relating to tables in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -21,7 +21,7 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "@zendeskgarden/container-utilities": "^0.5.5",
+    "@zendeskgarden/container-utilities": "^0.6.0",
     "dom-helpers": "^5.1.0",
     "polished": "^4.0.0",
     "prop-types": "^15.5.7"
@@ -33,9 +33,9 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@types/react-beautiful-dnd": "13.0.0",
-    "@types/react-window": "1.8.3",
-    "@zendeskgarden/react-theming": "^8.39.0",
+    "@types/react-beautiful-dnd": "13.1.2",
+    "@types/react-window": "1.8.5",
+    "@zendeskgarden/react-theming": "^8.41.0",
     "@zendeskgarden/svg-icons": "6.30.2",
     "react-beautiful-dnd": "13.1.0",
     "react-window": "1.8.6"
@@ -50,5 +50,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "a061ca3a673a21bc6f53d52cceb26ba71eab7008"
+  "gitHead": "723c0bf1f98b1fcc0de3f7c005fbbfa5005a2fa9"
 }