@zendeskgarden/react-tables 8.62.2 → 8.63.1

package/dist/index.cjs.js

@@ -53,41 +53,41 @@ function _extends$3() {
   return _extends$3.apply(this, arguments);
 }
 
-const COMPONENT_ID$a = 'tables.body';
+const COMPONENT_ID$b = 'tables.body';
 const StyledBody = styled__default.default.tbody.attrs({
-  'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.62.2'
+  'data-garden-id': COMPONENT_ID$b,
+  'data-garden-version': '8.63.1'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14ud6y-0"
-})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
+})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
 StyledBody.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$9 = 'tables.caption';
+const COMPONENT_ID$a = 'tables.caption';
 const StyledCaption = styled__default.default.caption.attrs({
-  'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.62.2'
+  'data-garden-id': COMPONENT_ID$a,
+  'data-garden-version': '8.63.1'
 }).withConfig({
   displayName: "StyledCaption",
   componentId: "sc-113y327-0"
-})(["display:table-caption;text-align:", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
+})(["display:table-caption;text-align:", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
 StyledCaption.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$8 = 'tables.table';
+const COMPONENT_ID$9 = 'tables.table';
 const getLineHeight = props => {
   return `${props.theme.space.base * 5}px`;
 };
 const StyledTable = styled__default.default.table.attrs({
-  'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.62.2'
+  'data-garden-id': COMPONENT_ID$9,
+  'data-garden-version': '8.63.1'
 }).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:", ";", ";"], props => getLineHeight(props), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
+})(["display:table;border:none;width:100%;table-layout:fixed;border-collapse:collapse;border-spacing:0;line-height:", ";color:", ";font-size:", ";direction:", ";", ";"], props => getLineHeight(props), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledTable.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -101,7 +101,7 @@ const getRowHeight = props => {
   return `${props.theme.space.base * 10}px`;
 };
 
-const COMPONENT_ID$7 = 'tables.cell';
+const COMPONENT_ID$8 = 'tables.cell';
 const truncatedStyling$1 = styled.css(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
 const sizeStyling = props => {
   let boxSizing = 'border-box';
@@ -125,17 +125,17 @@ 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$7,
-  'data-garden-version': '8.62.2'
+  'data-garden-id': COMPONENT_ID$8,
+  'data-garden-version': '8.63.1'
 }).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, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
+})(["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, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
 StyledCell.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$6 = 'tables.overflow_button';
+const COMPONENT_ID$7 = 'tables.overflow_button';
 const OVERFLOW_BUTTON_SIZE = '2em';
 const colorStyles$1 = props => {
   const boxShadow = props.theme.shadows.md(reactTheming.getColor('primaryHue', 600, props.theme, 0.35));
@@ -154,13 +154,13 @@ const colorStyles$1 = props => {
   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);
 };
 const StyledOverflowButton = styled__default.default.button.attrs({
-  'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.62.2',
+  'data-garden-id': COMPONENT_ID$7,
+  'data-garden-version': '8.63.1',
   type: 'button'
 }).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;}", ";"], props => props.isHovered || props.isFocused || props.isActive ? '1' : '0', props => props.isActive ? '1' : '0', props => polished.math(`${getRowHeight(props)} / 2`), OVERFLOW_BUTTON_SIZE, props => colorStyles$1(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
+})(["display:block;transition:opacity 0.25s ease-in-out,background-color 0.1s ease-in-out;opacity:", ";z-index:", ";margin-top:calc(", " - 1em);border:none;border-radius:50%;background-color:transparent;cursor:pointer;padding:0;width:100%;height:", ";text-decoration:none;font-size:inherit;", " &[aria-expanded='true']{opacity:1;}", ";"], props => props.isHovered || props.isFocused || props.isActive ? '1' : '0', props => props.isActive ? '1' : '0', props => polished.math(`${getRowHeight(props)} / 2`), OVERFLOW_BUTTON_SIZE, props => colorStyles$1(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledOverflowButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -172,7 +172,7 @@ StyledOverflowButtonIconWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$5 = 'tables.row';
+const COMPONENT_ID$6 = 'tables.row';
 const StyledBaseRow = styled__default.default.tr.withConfig({
   displayName: "StyledRow__StyledBaseRow",
   componentId: "sc-ek66ow-0"
@@ -210,18 +210,18 @@ const colorStyles = props => {
   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);
 };
 const StyledRow = styled__default.default(StyledBaseRow).attrs(props => ({
-  'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.62.2',
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '8.63.1',
   tabIndex: props.isReadOnly ? undefined : -1
 })).withConfig({
   displayName: "StyledRow",
   componentId: "sc-ek66ow-1"
-})(["height:", ";", " ", ";"], getRowHeight, props => colorStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
+})(["height:", ";", " ", ";"], getRowHeight, props => colorStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledRow.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$4 = 'tables.header_row';
+const COMPONENT_ID$5 = 'tables.header_row';
 const getHeaderRowHeight = props => {
   if (props.size === 'large') {
     return `${props.theme.space.base * 18}px`;
@@ -231,50 +231,50 @@ const getHeaderRowHeight = props => {
   return `${props.theme.space.base * 12}px`;
 };
 const StyledHeaderRow = styled__default.default(StyledBaseRow).attrs({
-  'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.62.2'
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '8.63.1'
 }).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);}", ";"], props => reactTheming.getColor('neutralHue', 300, props.theme), getHeaderRowHeight, props => props.theme.fontWeights.semibold, StyledOverflowButton, props => polished.math(`${getHeaderRowHeight(props)} / 2`), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
+})(["border-bottom-color:", ";height:", ";vertical-align:bottom;font-weight:", ";", "{opacity:1;margin-top:0;margin-bottom:calc(", " - 1em);}", ";"], props => reactTheming.getColor('neutralHue', 300, props.theme), getHeaderRowHeight, props => props.theme.fontWeights.semibold, StyledOverflowButton, props => polished.math(`${getHeaderRowHeight(props)} / 2`), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledHeaderRow.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$3 = 'tables.head';
+const COMPONENT_ID$4 = 'tables.head';
 const stickyStyles = props => {
   const borderColor = reactTheming.getColor('neutralHue', 300, props.theme);
   return styled.css(["position:sticky;top:0;z-index:1;box-shadow:inset 0 -", " 0 ", ";background-color:", ";& > ", ":last-child{border-bottom-color:transparent;}"], props.theme.borderWidths.sm, borderColor, props.theme.colors.background, StyledHeaderRow);
 };
 const StyledHead = styled__default.default.thead.attrs({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.62.2'
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '8.63.1'
 }).withConfig({
   displayName: "StyledHead",
   componentId: "sc-spf23a-0"
-})(["", " ", ";"], props => props.isSticky && stickyStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["", " ", ";"], props => props.isSticky && stickyStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledHead.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$2 = 'tables.group_row';
+const COMPONENT_ID$3 = 'tables.group_row';
 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': '8.62.2'
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '8.63.1'
 }).withConfig({
   displayName: "StyledGroupRow",
   componentId: "sc-mpd0r8-0"
-})(["background-color:", ";", " ", ";"], props => reactTheming.getColor('neutralHue', 100, props.theme), props => sizeStyles$1(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
+})(["background-color:", ";", " ", ";"], props => reactTheming.getColor('neutralHue', 100, props.theme), props => sizeStyles$1(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledGroupRow.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$1 = 'tables.sortable';
+const COMPONENT_ID$2 = 'tables.sortable';
 const StyledBaseIconWrapper = styled__default.default.div.withConfig({
   displayName: "StyledSortableButton__StyledBaseIconWrapper",
   componentId: "sc-2s1dli-0"
@@ -297,8 +297,8 @@ StyledSortableFillIconWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 const StyledSortableButton = styled__default.default.button.attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.62.2',
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '8.63.1',
   type: 'button'
 }).withConfig({
   displayName: "StyledSortableButton",
@@ -337,12 +337,12 @@ const StyledSortableButton = styled__default.default.button.attrs({
         color: ${reactTheming.getColor('primaryHue', 600, props.theme, 0.25)};
         fill: ${reactTheming.getColor('primaryHue', 600, props.theme)};
       }
-    `, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
+    `, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledSortableButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID = 'tables.header_cell';
+const COMPONENT_ID$1 = 'tables.header_cell';
 const truncatedStyling = styled.css(["", "{max-width:100%;overflow:hidden;text-overflow:ellipsis;}"], StyledSortableButton);
 const sizeStyles = props => {
   let paddingVertical = undefined;
@@ -353,8 +353,8 @@ const sizeStyles = props => {
 };
 const StyledHeaderCell = styled__default.default(StyledCell).attrs({
   as: 'th',
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.62.2'
+  'data-garden-id': COMPONENT_ID$1,
+  'data-garden-version': '8.63.1'
 }).withConfig({
   displayName: "StyledHeaderCell",
   componentId: "sc-fzagoe-0"
@@ -366,11 +366,23 @@ const StyledHeaderCell = styled__default.default(StyledCell).attrs({
     return 'left';
   }
   return undefined;
-}, props => sizeStyles(props), props => props.isTruncated && truncatedStyling, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
+}, props => sizeStyles(props), props => props.isTruncated && truncatedStyling, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledHeaderCell.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
+const COMPONENT_ID = 'tables.hidden_cell';
+const StyledHiddenCell = styled__default.default.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.63.1'
+}).withConfig({
+  displayName: "StyledHiddenCell",
+  componentId: "sc-1x454xw-0"
+})(["", " ", ";"], polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
+StyledHiddenCell.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
+};
+
 const Body = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledBody, _extends$3({
   ref: ref
 }, props)));
@@ -389,14 +401,18 @@ const useTableContext = () => {
   return React.useContext(TableContext);
 };
 
-const Cell = React__namespace.default.forwardRef((props, ref) => {
+const Cell = React__namespace.default.forwardRef((_ref, ref) => {
+  let {
+    hidden,
+    ...props
+  } = _ref;
   const {
     size
   } = useTableContext();
   return React__namespace.default.createElement(StyledCell, _extends$3({
     ref: ref,
     size: size
-  }, props));
+  }, props), hidden && props.children ? React__namespace.default.createElement(StyledHiddenCell, null, props.children) : props.children);
 });
 Cell.displayName = 'Cell';
 Cell.propTypes = {
@@ -422,14 +438,18 @@ const Head = React.forwardRef((props, ref) => React__namespace.default.createEle
 }, props)));
 Head.displayName = 'Head';
 
-const HeaderCell = React.forwardRef((props, ref) => {
+const HeaderCell = React.forwardRef((_ref, ref) => {
+  let {
+    hidden,
+    ...props
+  } = _ref;
   const {
     size
   } = useTableContext();
   return React__namespace.default.createElement(StyledHeaderCell, _extends$3({
     ref: ref,
     size: size
-  }, props));
+  }, props), hidden && props.children ? React__namespace.default.createElement(StyledHiddenCell, null, props.children) : props.children);
 });
 HeaderCell.displayName = 'HeaderCell';
 HeaderCell.propTypes = Cell.propTypes;
@@ -446,9 +466,7 @@ const HeaderRow = React__namespace.default.forwardRef((props, ref) => {
 HeaderRow.displayName = 'HeaderRow';
 
 var _g;
-
 function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : 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); }
-
 var SvgOverflowStroke = function SvgOverflowStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
@@ -456,8 +474,7 @@ var SvgOverflowStroke = function SvgOverflowStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "currentColor"
   }, /*#__PURE__*/React__namespace.createElement("circle", {
@@ -550,9 +567,7 @@ Row.propTypes = {
 };
 
 var _path$1;
-
 function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : 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); }
-
 var SvgSortStroke = function SvgSortStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
@@ -560,8 +575,7 @@ var SvgSortStroke = function SvgSortStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -571,9 +585,7 @@ var SvgSortStroke = function SvgSortStroke(props) {
 };
 
 var _path, _path2;
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-
 var SvgSortFill = function SvgSortFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -581,8 +593,7 @@ var SvgSortFill = function SvgSortFill(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     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"

package/dist/index.esm.js

@@ -9,7 +9,7 @@ import * as React from 'react';
 import React__default, { forwardRef, useContext, useState, useMemo } from 'react';
 import styled, { css } from 'styled-components';
 import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
-import { math } from 'polished';
+import { math, hideVisually } from 'polished';
 import PropTypes from 'prop-types';
 import { composeEventHandlers } from '@zendeskgarden/container-utilities';
 
@@ -28,41 +28,41 @@ function _extends$3() {
   return _extends$3.apply(this, arguments);
 }
 
-const COMPONENT_ID$a = 'tables.body';
+const COMPONENT_ID$b = 'tables.body';
 const StyledBody = styled.tbody.attrs({
-  'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.62.2'
+  'data-garden-id': COMPONENT_ID$b,
+  'data-garden-version': '8.63.1'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14ud6y-0"
-})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$a, props));
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$b, props));
 StyledBody.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$9 = 'tables.caption';
+const COMPONENT_ID$a = 'tables.caption';
 const StyledCaption = styled.caption.attrs({
-  'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.62.2'
+  'data-garden-id': COMPONENT_ID$a,
+  'data-garden-version': '8.63.1'
 }).withConfig({
   displayName: "StyledCaption",
   componentId: "sc-113y327-0"
-})(["display:table-caption;text-align:", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => retrieveComponentStyles(COMPONENT_ID$9, props));
+})(["display:table-caption;text-align:", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => retrieveComponentStyles(COMPONENT_ID$a, props));
 StyledCaption.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$8 = 'tables.table';
+const COMPONENT_ID$9 = 'tables.table';
 const getLineHeight = props => {
   return `${props.theme.space.base * 5}px`;
 };
 const StyledTable = styled.table.attrs({
-  'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.62.2'
+  'data-garden-id': COMPONENT_ID$9,
+  'data-garden-version': '8.63.1'
 }).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:", ";", ";"], props => getLineHeight(props), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID$8, props));
+})(["display:table;border:none;width:100%;table-layout:fixed;border-collapse:collapse;border-spacing:0;line-height:", ";color:", ";font-size:", ";direction:", ";", ";"], props => getLineHeight(props), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledTable.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -76,7 +76,7 @@ const getRowHeight = props => {
   return `${props.theme.space.base * 10}px`;
 };
 
-const COMPONENT_ID$7 = 'tables.cell';
+const COMPONENT_ID$8 = 'tables.cell';
 const truncatedStyling$1 = css(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
 const sizeStyling = props => {
   let boxSizing = 'border-box';
@@ -100,17 +100,17 @@ const sizeStyling = props => {
   return css(["box-sizing:", ";padding:", ";width:", ";height:", ";"], boxSizing, padding, width, height);
 };
 const StyledCell = styled.td.attrs({
-  'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.62.2'
+  'data-garden-id': COMPONENT_ID$8,
+  'data-garden-version': '8.63.1'
 }).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, props => retrieveComponentStyles(COMPONENT_ID$7, props));
+})(["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, props => retrieveComponentStyles(COMPONENT_ID$8, props));
 StyledCell.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$6 = 'tables.overflow_button';
+const COMPONENT_ID$7 = 'tables.overflow_button';
 const OVERFLOW_BUTTON_SIZE = '2em';
 const colorStyles$1 = props => {
   const boxShadow = props.theme.shadows.md(getColor('primaryHue', 600, props.theme, 0.35));
@@ -129,13 +129,13 @@ const colorStyles$1 = props => {
   return 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);
 };
 const StyledOverflowButton = styled.button.attrs({
-  'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.62.2',
+  'data-garden-id': COMPONENT_ID$7,
+  'data-garden-version': '8.63.1',
   type: 'button'
 }).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;}", ";"], props => props.isHovered || props.isFocused || props.isActive ? '1' : '0', props => props.isActive ? '1' : '0', props => math(`${getRowHeight(props)} / 2`), OVERFLOW_BUTTON_SIZE, props => colorStyles$1(props), props => retrieveComponentStyles(COMPONENT_ID$6, props));
+})(["display:block;transition:opacity 0.25s ease-in-out,background-color 0.1s ease-in-out;opacity:", ";z-index:", ";margin-top:calc(", " - 1em);border:none;border-radius:50%;background-color:transparent;cursor:pointer;padding:0;width:100%;height:", ";text-decoration:none;font-size:inherit;", " &[aria-expanded='true']{opacity:1;}", ";"], props => props.isHovered || props.isFocused || props.isActive ? '1' : '0', props => props.isActive ? '1' : '0', props => math(`${getRowHeight(props)} / 2`), OVERFLOW_BUTTON_SIZE, props => colorStyles$1(props), props => retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledOverflowButton.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -147,7 +147,7 @@ StyledOverflowButtonIconWrapper.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$5 = 'tables.row';
+const COMPONENT_ID$6 = 'tables.row';
 const StyledBaseRow = styled.tr.withConfig({
   displayName: "StyledRow__StyledBaseRow",
   componentId: "sc-ek66ow-0"
@@ -185,18 +185,18 @@ const colorStyles = props => {
   return 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);
 };
 const StyledRow = styled(StyledBaseRow).attrs(props => ({
-  'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.62.2',
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '8.63.1',
   tabIndex: props.isReadOnly ? undefined : -1
 })).withConfig({
   displayName: "StyledRow",
   componentId: "sc-ek66ow-1"
-})(["height:", ";", " ", ";"], getRowHeight, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID$5, props));
+})(["height:", ";", " ", ";"], getRowHeight, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledRow.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$4 = 'tables.header_row';
+const COMPONENT_ID$5 = 'tables.header_row';
 const getHeaderRowHeight = props => {
   if (props.size === 'large') {
     return `${props.theme.space.base * 18}px`;
@@ -206,50 +206,50 @@ const getHeaderRowHeight = props => {
   return `${props.theme.space.base * 12}px`;
 };
 const StyledHeaderRow = styled(StyledBaseRow).attrs({
-  'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.62.2'
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '8.63.1'
 }).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);}", ";"], props => getColor('neutralHue', 300, props.theme), getHeaderRowHeight, props => props.theme.fontWeights.semibold, StyledOverflowButton, props => math(`${getHeaderRowHeight(props)} / 2`), props => retrieveComponentStyles(COMPONENT_ID$4, props));
+})(["border-bottom-color:", ";height:", ";vertical-align:bottom;font-weight:", ";", "{opacity:1;margin-top:0;margin-bottom:calc(", " - 1em);}", ";"], props => getColor('neutralHue', 300, props.theme), getHeaderRowHeight, props => props.theme.fontWeights.semibold, StyledOverflowButton, props => math(`${getHeaderRowHeight(props)} / 2`), props => retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledHeaderRow.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$3 = 'tables.head';
+const COMPONENT_ID$4 = 'tables.head';
 const stickyStyles = props => {
   const borderColor = getColor('neutralHue', 300, props.theme);
   return css(["position:sticky;top:0;z-index:1;box-shadow:inset 0 -", " 0 ", ";background-color:", ";& > ", ":last-child{border-bottom-color:transparent;}"], props.theme.borderWidths.sm, borderColor, props.theme.colors.background, StyledHeaderRow);
 };
 const StyledHead = styled.thead.attrs({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.62.2'
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '8.63.1'
 }).withConfig({
   displayName: "StyledHead",
   componentId: "sc-spf23a-0"
-})(["", " ", ";"], props => props.isSticky && stickyStyles(props), props => retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["", " ", ";"], props => props.isSticky && stickyStyles(props), props => retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledHead.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$2 = 'tables.group_row';
+const COMPONENT_ID$3 = 'tables.group_row';
 const sizeStyles$1 = props => {
   const height = `${props.theme.space.base * 8}px`;
   const lineHeight = getLineHeight(props);
   return css(["height:", ";line-height:", ";font-size:", ";", "{padding:", " ", "px;}"], height, lineHeight, props.theme.fontSizes.sm, StyledCell, math(`(${height} - ${lineHeight}) / 2`), props.theme.space.base * 3);
 };
 const StyledGroupRow = styled(StyledBaseRow).attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.62.2'
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '8.63.1'
 }).withConfig({
   displayName: "StyledGroupRow",
   componentId: "sc-mpd0r8-0"
-})(["background-color:", ";", " ", ";"], props => getColor('neutralHue', 100, props.theme), props => sizeStyles$1(props), props => retrieveComponentStyles(COMPONENT_ID$2, props));
+})(["background-color:", ";", " ", ";"], props => getColor('neutralHue', 100, props.theme), props => sizeStyles$1(props), props => retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledGroupRow.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$1 = 'tables.sortable';
+const COMPONENT_ID$2 = 'tables.sortable';
 const StyledBaseIconWrapper = styled.div.withConfig({
   displayName: "StyledSortableButton__StyledBaseIconWrapper",
   componentId: "sc-2s1dli-0"
@@ -272,8 +272,8 @@ StyledSortableFillIconWrapper.defaultProps = {
   theme: DEFAULT_THEME
 };
 const StyledSortableButton = styled.button.attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.62.2',
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '8.63.1',
   type: 'button'
 }).withConfig({
   displayName: "StyledSortableButton",
@@ -312,12 +312,12 @@ const StyledSortableButton = styled.button.attrs({
         color: ${getColor('primaryHue', 600, props.theme, 0.25)};
         fill: ${getColor('primaryHue', 600, props.theme)};
       }
-    `, props => retrieveComponentStyles(COMPONENT_ID$1, props));
+    `, props => retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledSortableButton.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID = 'tables.header_cell';
+const COMPONENT_ID$1 = 'tables.header_cell';
 const truncatedStyling = css(["", "{max-width:100%;overflow:hidden;text-overflow:ellipsis;}"], StyledSortableButton);
 const sizeStyles = props => {
   let paddingVertical = undefined;
@@ -328,8 +328,8 @@ const sizeStyles = props => {
 };
 const StyledHeaderCell = styled(StyledCell).attrs({
   as: 'th',
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.62.2'
+  'data-garden-id': COMPONENT_ID$1,
+  'data-garden-version': '8.63.1'
 }).withConfig({
   displayName: "StyledHeaderCell",
   componentId: "sc-fzagoe-0"
@@ -341,11 +341,23 @@ const StyledHeaderCell = styled(StyledCell).attrs({
     return 'left';
   }
   return undefined;
-}, props => sizeStyles(props), props => props.isTruncated && truncatedStyling, props => retrieveComponentStyles(COMPONENT_ID, props));
+}, props => sizeStyles(props), props => props.isTruncated && truncatedStyling, props => retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledHeaderCell.defaultProps = {
   theme: DEFAULT_THEME
 };
 
+const COMPONENT_ID = 'tables.hidden_cell';
+const StyledHiddenCell = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.63.1'
+}).withConfig({
+  displayName: "StyledHiddenCell",
+  componentId: "sc-1x454xw-0"
+})(["", " ", ";"], hideVisually(), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledHiddenCell.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
 const Body = forwardRef((props, ref) => React__default.createElement(StyledBody, _extends$3({
   ref: ref
 }, props)));
@@ -364,14 +376,18 @@ const useTableContext = () => {
   return useContext(TableContext);
 };
 
-const Cell = React__default.forwardRef((props, ref) => {
+const Cell = React__default.forwardRef((_ref, ref) => {
+  let {
+    hidden,
+    ...props
+  } = _ref;
   const {
     size
   } = useTableContext();
   return React__default.createElement(StyledCell, _extends$3({
     ref: ref,
     size: size
-  }, props));
+  }, props), hidden && props.children ? React__default.createElement(StyledHiddenCell, null, props.children) : props.children);
 });
 Cell.displayName = 'Cell';
 Cell.propTypes = {
@@ -397,14 +413,18 @@ const Head = forwardRef((props, ref) => React__default.createElement(StyledHead,
 }, props)));
 Head.displayName = 'Head';
 
-const HeaderCell = forwardRef((props, ref) => {
+const HeaderCell = forwardRef((_ref, ref) => {
+  let {
+    hidden,
+    ...props
+  } = _ref;
   const {
     size
   } = useTableContext();
   return React__default.createElement(StyledHeaderCell, _extends$3({
     ref: ref,
     size: size
-  }, props));
+  }, props), hidden && props.children ? React__default.createElement(StyledHiddenCell, null, props.children) : props.children);
 });
 HeaderCell.displayName = 'HeaderCell';
 HeaderCell.propTypes = Cell.propTypes;
@@ -421,9 +441,7 @@ const HeaderRow = React__default.forwardRef((props, ref) => {
 HeaderRow.displayName = 'HeaderRow';
 
 var _g;
-
 function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : 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); }
-
 var SvgOverflowStroke = function SvgOverflowStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
@@ -431,8 +449,7 @@ var SvgOverflowStroke = function SvgOverflowStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
     fill: "currentColor"
   }, /*#__PURE__*/React.createElement("circle", {
@@ -525,9 +542,7 @@ Row.propTypes = {
 };
 
 var _path$1;
-
 function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : 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); }
-
 var SvgSortStroke = function SvgSortStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
@@ -535,8 +550,7 @@ var SvgSortStroke = function SvgSortStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -546,9 +560,7 @@ var SvgSortStroke = function SvgSortStroke(props) {
 };
 
 var _path, _path2;
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-
 var SvgSortFill = function SvgSortFill(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -556,8 +568,7 @@ var SvgSortFill = function SvgSortFill(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     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"

package/dist/typings/styled/StyledHiddenCell.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+export declare const StyledHiddenCell: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    'data-garden-id': string;
+    'data-garden-version': string;
+}, "data-garden-id" | "data-garden-version">;

package/dist/typings/styled/index.d.ts

@@ -12,6 +12,7 @@ export { StyledCell } from './StyledCell';
 export { StyledGroupRow } from './StyledGroupRow';
 export { StyledTable } from './StyledTable';
 export { StyledHeaderCell } from './StyledHeaderCell';
+export { StyledHiddenCell } from './StyledHiddenCell';
 export { StyledSortableButton, StyledSortableFillIconWrapper, StyledSortableStrokeIconWrapper } from './StyledSortableButton';
 export { StyledOverflowButton, StyledOverflowButtonIconWrapper } from './StyledOverflowButton';
 export { StyledRow } from './StyledRow';

package/dist/typings/types/index.d.ts

@@ -9,7 +9,7 @@ export declare const SIZE: readonly ["small", "medium", "large"];
 export declare const SORT: string[];
 export interface ITableProps extends TableHTMLAttributes<HTMLTableElement> {
     /** Sets the table size */
-    size?: typeof SIZE[number];
+    size?: (typeof SIZE)[number];
     /** Removes interactive styling from table rows */
     isReadOnly?: boolean;
 }
@@ -44,7 +44,7 @@ export interface IHeaderCellProps extends Pick<ICellProps, 'isMinimum' | 'isTrun
 }
 export interface ISortableCellProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Sets the sort order */
-    sort?: typeof SORT[number];
+    sort?: (typeof SORT)[number];
     /** Sets the width of the cell */
     width?: ICellProps['width'];
     /** Passes props to the cell */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-tables",
-  "version": "8.62.2",
+  "version": "8.63.1",
   "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.7.0",
+    "@zendeskgarden/container-utilities": "^1.0.0",
     "dom-helpers": "^5.1.0",
     "polished": "^4.0.0",
     "prop-types": "^15.5.7"
@@ -35,7 +35,7 @@
   "devDependencies": {
     "@types/react-beautiful-dnd": "13.1.3",
     "@types/react-window": "1.8.5",
-    "@zendeskgarden/react-theming": "^8.62.2",
+    "@zendeskgarden/react-theming": "^8.63.1",
     "@zendeskgarden/svg-icons": "6.33.0",
     "react-beautiful-dnd": "13.1.1",
     "react-window": "1.8.8"
@@ -50,5 +50,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "27a7d6c021f3360396af60d51ecbf66e9076a405"
+  "gitHead": "1c1d67d2b98ee0539975cee53f457081e5ae479a"
 }