@zendeskgarden/react-tables 9.8.0 → 9.10.0

package/dist/esm/styled/StyledBody.js

@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'tables.body';
 const StyledBody = styled.tbody.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.8.0'
+  'data-garden-version': '9.10.0'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14ud6y-0"

package/dist/esm/styled/StyledCaption.js

@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'tables.caption';
 const StyledCaption = styled.caption.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.8.0'
+  'data-garden-version': '9.10.0'
 }).withConfig({
   displayName: "StyledCaption",
   componentId: "sc-113y327-0"

package/dist/esm/styled/StyledCell.js

@@ -35,7 +35,7 @@ const sizeStyling = props => {
 };
 const StyledCell = styled.td.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.8.0'
+  'data-garden-version': '9.10.0'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-8hpncx-0"

package/dist/esm/styled/StyledGroupRow.js

@@ -35,7 +35,7 @@ const sizeStyles = props => {
 };
 const StyledGroupRow = styled(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.8.0'
+  'data-garden-version': '9.10.0'
 }).withConfig({
   displayName: "StyledGroupRow",
   componentId: "sc-mpd0r8-0"

package/dist/esm/styled/StyledHead.js

@@ -7,6 +7,7 @@
 import styled, { css } from 'styled-components';
 import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { StyledHeaderRow } from './StyledHeaderRow.js';
+import { StyledHeaderCell } from './StyledHeaderCell.js';
 
 const COMPONENT_ID = 'tables.head';
 const colorStyles = _ref => {
@@ -21,14 +22,14 @@ const colorStyles = _ref => {
     variable: 'background.default',
     theme
   });
-  return css(["box-shadow:inset 0 -", " 0 ", ";background-color:", ";& > ", ":last-child{border-bottom-color:transparent;}"], theme.borderWidths.sm, borderColor, backgroundColor, StyledHeaderRow);
+  return css(["background-color:", ";& > ", ":last-child{border-bottom-color:transparent;& > ", "{box-shadow:inset 0 -", " 0 ", ";}}"], backgroundColor, StyledHeaderRow, StyledHeaderCell, theme.borderWidths.sm, borderColor);
 };
 const stickyStyles = () => {
   return css(["position:sticky;top:0;z-index:1;"]);
 };
 const StyledHead = styled.thead.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.8.0'
+  'data-garden-version': '9.10.0'
 }).withConfig({
   displayName: "StyledHead",
   componentId: "sc-spf23a-0"

package/dist/esm/styled/StyledHeaderCell.js

@@ -24,7 +24,7 @@ const sizeStyles = props => {
 const StyledHeaderCell = styled(StyledCell).attrs({
   as: 'th',
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.8.0'
+  'data-garden-version': '9.10.0'
 }).withConfig({
   displayName: "StyledHeaderCell",
   componentId: "sc-fzagoe-0"

package/dist/esm/styled/StyledHeaderRow.js

@@ -34,7 +34,7 @@ const sizeStyles = props => {
 };
 const StyledHeaderRow = styled(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.8.0'
+  'data-garden-version': '9.10.0'
 }).withConfig({
   displayName: "StyledHeaderRow",
   componentId: "sc-16ogvdx-0"

package/dist/esm/styled/StyledHiddenCell.js

@@ -11,7 +11,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'tables.hidden_cell';
 const StyledHiddenCell = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.8.0'
+  'data-garden-version': '9.10.0'
 }).withConfig({
   displayName: "StyledHiddenCell",
   componentId: "sc-1x454xw-0"

package/dist/esm/styled/StyledOverflowButton.js

@@ -14,7 +14,7 @@ const COMPONENT_ID = 'tables.overflow_button';
 const OVERFLOW_BUTTON_SIZE = '2em';
 const StyledOverflowButton = styled(IconButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.8.0'
+  'data-garden-version': '9.10.0'
 }).withConfig({
   displayName: "StyledOverflowButton",
   componentId: "sc-1eba2ml-0"

package/dist/esm/styled/StyledRow.js

@@ -94,7 +94,7 @@ const sizeStyles = props => {
 };
 const StyledRow = styled(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.8.0'
+  'data-garden-version': '9.10.0'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-ek66ow-0"

package/dist/esm/styled/StyledSortableButton.js

@@ -82,7 +82,7 @@ const colorStyles = _ref => {
 };
 const StyledSortableButton = styled.button.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.8.0',
+  'data-garden-version': '9.10.0',
   type: 'button'
 }).withConfig({
   displayName: "StyledSortableButton",

package/dist/esm/styled/StyledTable.js

@@ -13,7 +13,7 @@ const getLineHeight = props => {
 };
 const StyledTable = styled.table.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.8.0'
+  'data-garden-version': '9.10.0'
 }).withConfig({
   displayName: "StyledTable",
   componentId: "sc-gje7na-0"

package/dist/index.cjs.js

@@ -41,7 +41,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 const COMPONENT_ID$b = 'tables.body';
 const StyledBody = styled__default.default.tbody.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.8.0'
+  'data-garden-version': '9.10.0'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14ud6y-0"
@@ -50,7 +50,7 @@ const StyledBody = styled__default.default.tbody.attrs({
 const COMPONENT_ID$a = 'tables.caption';
 const StyledCaption = styled__default.default.caption.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.8.0'
+  'data-garden-version': '9.10.0'
 }).withConfig({
   displayName: "StyledCaption",
   componentId: "sc-113y327-0"
@@ -102,7 +102,7 @@ const COMPONENT_ID$9 = 'tables.overflow_button';
 const OVERFLOW_BUTTON_SIZE = '2em';
 const StyledOverflowButton = styled__default.default(reactButtons.IconButton).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.8.0'
+  'data-garden-version': '9.10.0'
 }).withConfig({
   displayName: "StyledOverflowButton",
   componentId: "sc-1eba2ml-0"
@@ -132,45 +132,19 @@ const sizeStyles$3 = props => {
 };
 const StyledHeaderRow = styled__default.default(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.8.0'
+  'data-garden-version': '9.10.0'
 }).withConfig({
   displayName: "StyledHeaderRow",
   componentId: "sc-16ogvdx-0"
 })(["font-weight:", ";", " ", " ", "{opacity:1;}", ";"], props => props.theme.fontWeights.semibold, sizeStyles$3, colorStyles$4, StyledOverflowButton, reactTheming.componentStyles);
 
-const COMPONENT_ID$7 = 'tables.head';
-const colorStyles$3 = _ref => {
-  let {
-    theme
-  } = _ref;
-  const borderColor = reactTheming.getColor({
-    variable: 'border.default',
-    theme
-  });
-  const backgroundColor = reactTheming.getColor({
-    variable: 'background.default',
-    theme
-  });
-  return styled.css(["box-shadow:inset 0 -", " 0 ", ";background-color:", ";& > ", ":last-child{border-bottom-color:transparent;}"], theme.borderWidths.sm, borderColor, backgroundColor, StyledHeaderRow);
-};
-const stickyStyles = () => {
-  return styled.css(["position:sticky;top:0;z-index:1;"]);
-};
-const StyledHead = styled__default.default.thead.attrs({
-  'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.8.0'
-}).withConfig({
-  displayName: "StyledHead",
-  componentId: "sc-spf23a-0"
-})(["", " ", " ", ";"], props => props.$isSticky && stickyStyles(), colorStyles$3, reactTheming.componentStyles);
-
-const COMPONENT_ID$6 = 'tables.table';
+const COMPONENT_ID$7 = 'tables.table';
 const getLineHeight = props => {
   return `${props.theme.space.base * 5}px`;
 };
 const StyledTable = styled__default.default.table.attrs({
-  'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.8.0'
+  'data-garden-id': COMPONENT_ID$7,
+  'data-garden-version': '9.10.0'
 }).withConfig({
   displayName: "StyledTable",
   componentId: "sc-gje7na-0"
@@ -179,7 +153,7 @@ const StyledTable = styled__default.default.table.attrs({
   theme: props.theme
 }), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', reactTheming.componentStyles);
 
-const COMPONENT_ID$5 = 'tables.cell';
+const COMPONENT_ID$6 = 'tables.cell';
 const truncatedStyling$1 = styled.css(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
 const sizeStyling = props => {
   let boxSizing = 'border-box';
@@ -203,44 +177,14 @@ const sizeStyling = props => {
   return styled.css(["box-sizing:", ";padding:", ";width:", ";height:", ";"], boxSizing, padding, width, height);
 };
 const StyledCell = styled__default.default.td.attrs({
-  'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.8.0'
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '9.10.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;", ";", ";", ";"], props => sizeStyling(props), props => props.$isTruncated && truncatedStyling$1, reactTheming.componentStyles);
 
-const COMPONENT_ID$4 = 'tables.group_row';
-const colorStyles$2 = _ref => {
-  let {
-    theme
-  } = _ref;
-  return styled.css(["background-color:", ";"], reactTheming.getColor({
-    variable: 'background.subtle',
-    transparency: theme.opacity[100],
-    light: {
-      offset: 300
-    },
-    dark: {
-      offset: -600
-    },
-    theme
-  }));
-};
-const sizeStyles$2 = props => {
-  const height = `${props.theme.space.base * 8}px`;
-  const lineHeight = getLineHeight(props);
-  return styled.css(["height:", ";line-height:", ";font-size:", ";", "{padding:", " ", "px;}"], height, lineHeight, props.theme.fontSizes.sm, StyledCell, polished.math(`(${height} - ${lineHeight}) / 2`), props.theme.space.base * 3);
-};
-const StyledGroupRow = styled__default.default(StyledBaseRow).attrs({
-  'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.8.0'
-}).withConfig({
-  displayName: "StyledGroupRow",
-  componentId: "sc-mpd0r8-0"
-})(["", " ", " ", ";"], sizeStyles$2, colorStyles$2, reactTheming.componentStyles);
-
-const COMPONENT_ID$3 = 'tables.sortable';
+const COMPONENT_ID$5 = 'tables.sortable';
 const StyledBaseIconWrapper = styled__default.default.div.withConfig({
   displayName: "StyledSortableButton__StyledBaseIconWrapper",
   componentId: "sc-2s1dli-0"
@@ -253,7 +197,7 @@ const StyledSortableFillIconWrapper = styled__default.default(StyledBaseIconWrap
   displayName: "StyledSortableButton__StyledSortableFillIconWrapper",
   componentId: "sc-2s1dli-2"
 })([""]);
-const colorStyles$1 = _ref => {
+const colorStyles$3 = _ref => {
   let {
     theme,
     $sort
@@ -313,17 +257,17 @@ const colorStyles$1 = _ref => {
   }));
 };
 const StyledSortableButton = styled__default.default.button.attrs({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.8.0',
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '9.10.0',
   type: 'button'
 }).withConfig({
   displayName: "StyledSortableButton",
   componentId: "sc-2s1dli-3"
-})(["position:relative;transition:box-shadow 0.1s ease-in-out;border:none;border-radius:", ";background-color:transparent;cursor:pointer;padding:0;padding-", ":", ";width:", ";text-decoration:none;color:inherit;font-family:inherit;font-size:inherit;font-weight:", ";", "{opacity:", ";}", "{opacity:", ";}&:hover,", "{text-decoration:none;}", " ", ";"], props => props.theme.borderRadii.sm, props => props.theme.rtl ? 'left' : 'right', props => polished.math(`${props.theme.space.base} + ${props.theme.iconSizes.sm}`), props => props.width, props => props.theme.fontWeights.semibold, StyledSortableStrokeIconWrapper, props => props.$sort === undefined && 1, StyledSortableFillIconWrapper, props => props.$sort !== undefined && 1, reactTheming.SELECTOR_FOCUS_VISIBLE, colorStyles$1, reactTheming.componentStyles);
+})(["position:relative;transition:box-shadow 0.1s ease-in-out;border:none;border-radius:", ";background-color:transparent;cursor:pointer;padding:0;padding-", ":", ";width:", ";text-decoration:none;color:inherit;font-family:inherit;font-size:inherit;font-weight:", ";", "{opacity:", ";}", "{opacity:", ";}&:hover,", "{text-decoration:none;}", " ", ";"], props => props.theme.borderRadii.sm, props => props.theme.rtl ? 'left' : 'right', props => polished.math(`${props.theme.space.base} + ${props.theme.iconSizes.sm}`), props => props.width, props => props.theme.fontWeights.semibold, StyledSortableStrokeIconWrapper, props => props.$sort === undefined && 1, StyledSortableFillIconWrapper, props => props.$sort !== undefined && 1, reactTheming.SELECTOR_FOCUS_VISIBLE, colorStyles$3, reactTheming.componentStyles);
 
-const COMPONENT_ID$2 = 'tables.header_cell';
+const COMPONENT_ID$4 = 'tables.header_cell';
 const truncatedStyling = styled.css(["", "{max-width:100%;overflow:hidden;text-overflow:ellipsis;}"], StyledSortableButton);
-const sizeStyles$1 = props => {
+const sizeStyles$2 = props => {
   let paddingVertical = undefined;
   if (!props.$hasOverflow) {
     paddingVertical = polished.math(`(${getRowHeight(props)} - ${getLineHeight(props)}) / 2`);
@@ -332,8 +276,8 @@ const sizeStyles$1 = props => {
 };
 const StyledHeaderCell = styled__default.default(StyledCell).attrs({
   as: 'th',
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.8.0'
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '9.10.0'
 }).withConfig({
   displayName: "StyledHeaderCell",
   componentId: "sc-fzagoe-0"
@@ -345,12 +289,68 @@ const StyledHeaderCell = styled__default.default(StyledCell).attrs({
     return 'left';
   }
   return undefined;
-}, props => sizeStyles$1(props), props => props.$isTruncated && truncatedStyling, reactTheming.componentStyles);
+}, props => sizeStyles$2(props), props => props.$isTruncated && truncatedStyling, reactTheming.componentStyles);
+
+const COMPONENT_ID$3 = 'tables.head';
+const colorStyles$2 = _ref => {
+  let {
+    theme
+  } = _ref;
+  const borderColor = reactTheming.getColor({
+    variable: 'border.default',
+    theme
+  });
+  const backgroundColor = reactTheming.getColor({
+    variable: 'background.default',
+    theme
+  });
+  return styled.css(["background-color:", ";& > ", ":last-child{border-bottom-color:transparent;& > ", "{box-shadow:inset 0 -", " 0 ", ";}}"], backgroundColor, StyledHeaderRow, StyledHeaderCell, theme.borderWidths.sm, borderColor);
+};
+const stickyStyles = () => {
+  return styled.css(["position:sticky;top:0;z-index:1;"]);
+};
+const StyledHead = styled__default.default.thead.attrs({
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '9.10.0'
+}).withConfig({
+  displayName: "StyledHead",
+  componentId: "sc-spf23a-0"
+})(["", " ", " ", ";"], props => props.$isSticky && stickyStyles(), colorStyles$2, reactTheming.componentStyles);
+
+const COMPONENT_ID$2 = 'tables.group_row';
+const colorStyles$1 = _ref => {
+  let {
+    theme
+  } = _ref;
+  return styled.css(["background-color:", ";"], reactTheming.getColor({
+    variable: 'background.subtle',
+    transparency: theme.opacity[100],
+    light: {
+      offset: 300
+    },
+    dark: {
+      offset: -600
+    },
+    theme
+  }));
+};
+const sizeStyles$1 = props => {
+  const height = `${props.theme.space.base * 8}px`;
+  const lineHeight = getLineHeight(props);
+  return styled.css(["height:", ";line-height:", ";font-size:", ";", "{padding:", " ", "px;}"], height, lineHeight, props.theme.fontSizes.sm, StyledCell, polished.math(`(${height} - ${lineHeight}) / 2`), props.theme.space.base * 3);
+};
+const StyledGroupRow = styled__default.default(StyledBaseRow).attrs({
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '9.10.0'
+}).withConfig({
+  displayName: "StyledGroupRow",
+  componentId: "sc-mpd0r8-0"
+})(["", " ", " ", ";"], sizeStyles$1, colorStyles$1, reactTheming.componentStyles);
 
 const COMPONENT_ID$1 = 'tables.hidden_cell';
 const StyledHiddenCell = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.8.0'
+  'data-garden-version': '9.10.0'
 }).withConfig({
   displayName: "StyledHiddenCell",
   componentId: "sc-1x454xw-0"
@@ -439,7 +439,7 @@ const sizeStyles = props => {
 };
 const StyledRow = styled__default.default(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.8.0'
+  'data-garden-version': '9.10.0'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-ek66ow-0"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-tables",
-  "version": "9.8.0",
+  "version": "9.10.0",
   "description": "Components relating to tables in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -22,7 +22,7 @@
   "types": "dist/typings/index.d.ts",
   "dependencies": {
     "@zendeskgarden/container-utilities": "^2.0.0",
-    "@zendeskgarden/react-buttons": "^9.8.0",
+    "@zendeskgarden/react-buttons": "^9.10.0",
     "dom-helpers": "^5.1.0",
     "polished": "^4.3.1",
     "prop-types": "^15.5.7"
@@ -34,7 +34,7 @@
     "styled-components": "^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.8.0",
+    "@zendeskgarden/react-theming": "^9.10.0",
     "@zendeskgarden/svg-icons": "7.5.0"
   },
   "keywords": [
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "3f857a99f2e7c6c6d5db454a2fdfa1b0e129b7ab"
+  "gitHead": "a5e2f6e345d95e97030849fe15550fd2c6872cdf"
 }