@zendeskgarden/react-tables 8.62.1 → 8.63.0

package/dist/index.cjs.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var styled = require('styled-components');
 var reactTheming = require('@zendeskgarden/react-theming');
@@ -16,7 +14,7 @@ var polished = require('polished');
 var PropTypes = require('prop-types');
 var containerUtilities = require('@zendeskgarden/container-utilities');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -32,14 +30,13 @@ function _interopNamespace(e) {
       }
     });
   }
-  n["default"] = e;
+  n.default = e;
   return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 
 function _extends$3() {
   _extends$3 = Object.assign ? Object.assign.bind() : function (target) {
@@ -57,9 +54,9 @@ function _extends$3() {
 }
 
 const COMPONENT_ID$a = 'tables.body';
-const StyledBody = styled__default["default"].tbody.attrs({
+const StyledBody = styled__default.default.tbody.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14ud6y-0"
@@ -69,9 +66,9 @@ StyledBody.defaultProps = {
 };
 
 const COMPONENT_ID$9 = 'tables.caption';
-const StyledCaption = styled__default["default"].caption.attrs({
+const StyledCaption = styled__default.default.caption.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledCaption",
   componentId: "sc-113y327-0"
@@ -84,9 +81,9 @@ const COMPONENT_ID$8 = 'tables.table';
 const getLineHeight = props => {
   return `${props.theme.space.base * 5}px`;
 };
-const StyledTable = styled__default["default"].table.attrs({
+const StyledTable = styled__default.default.table.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTable",
   componentId: "sc-gje7na-0"
@@ -127,13 +124,13 @@ const sizeStyling = props => {
   }
   return styled.css(["box-sizing:", ";padding:", ";width:", ";height:", ";"], boxSizing, padding, width, height);
 };
-const StyledCell = styled__default["default"].td.attrs({
+const StyledCell = styled__default.default.td.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.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, 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;", ";", ";&[hidden]{", "}", ";"], props => sizeStyling(props), props => props.isTruncated && truncatedStyling$1, polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledCell.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -156,9 +153,9 @@ 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({
+const StyledOverflowButton = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   type: 'button'
 }).withConfig({
   displayName: "StyledOverflowButton",
@@ -167,7 +164,7 @@ const StyledOverflowButton = styled__default["default"].button.attrs({
 StyledOverflowButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-const StyledOverflowButtonIconWrapper = styled__default["default"].div.withConfig({
+const 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);
@@ -176,7 +173,7 @@ StyledOverflowButtonIconWrapper.defaultProps = {
 };
 
 const COMPONENT_ID$5 = 'tables.row';
-const StyledBaseRow = styled__default["default"].tr.withConfig({
+const 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;"], props => `${props.theme.borders.sm} ${reactTheming.getColor('neutralHue', 200, props.theme)}`, props => props.isStriped && reactTheming.getColor('neutralHue', 100, props.theme));
@@ -212,9 +209,9 @@ 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 => ({
+const StyledRow = styled__default.default(StyledBaseRow).attrs(props => ({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   tabIndex: props.isReadOnly ? undefined : -1
 })).withConfig({
   displayName: "StyledRow",
@@ -233,9 +230,9 @@ const getHeaderRowHeight = props => {
   }
   return `${props.theme.space.base * 12}px`;
 };
-const StyledHeaderRow = styled__default["default"](StyledBaseRow).attrs({
+const StyledHeaderRow = styled__default.default(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledHeaderRow",
   componentId: "sc-16ogvdx-0"
@@ -249,9 +246,9 @@ 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({
+const StyledHead = styled__default.default.thead.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledHead",
   componentId: "sc-spf23a-0"
@@ -266,9 +263,9 @@ const sizeStyles$1 = props => {
   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({
+const StyledGroupRow = styled__default.default(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledGroupRow",
   componentId: "sc-mpd0r8-0"
@@ -278,30 +275,30 @@ StyledGroupRow.defaultProps = {
 };
 
 const COMPONENT_ID$1 = 'tables.sortable';
-const StyledBaseIconWrapper = styled__default["default"].div.withConfig({
+const 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;"], props => props.theme.rtl ? 'left' : 'right', props => props.theme.iconSizes.sm);
 StyledBaseIconWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-const StyledSortableStrokeIconWrapper = styled__default["default"](StyledBaseIconWrapper).withConfig({
+const StyledSortableStrokeIconWrapper = styled__default.default(StyledBaseIconWrapper).withConfig({
   displayName: "StyledSortableButton__StyledSortableStrokeIconWrapper",
   componentId: "sc-2s1dli-1"
 })([""]);
 StyledSortableStrokeIconWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-const StyledSortableFillIconWrapper = styled__default["default"](StyledBaseIconWrapper).withConfig({
+const StyledSortableFillIconWrapper = styled__default.default(StyledBaseIconWrapper).withConfig({
   displayName: "StyledSortableButton__StyledSortableFillIconWrapper",
   componentId: "sc-2s1dli-2"
 })([""]);
 StyledSortableFillIconWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-const StyledSortableButton = styled__default["default"].button.attrs({
+const StyledSortableButton = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   type: 'button'
 }).withConfig({
   displayName: "StyledSortableButton",
@@ -354,10 +351,10 @@ const sizeStyles = props => {
   }
   return styled.css(["padding-top:", ";padding-bottom:", ";"], paddingVertical, paddingVertical);
 };
-const StyledHeaderCell = styled__default["default"](StyledCell).attrs({
+const StyledHeaderCell = styled__default.default(StyledCell).attrs({
   as: 'th',
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledHeaderCell",
   componentId: "sc-fzagoe-0"
@@ -374,17 +371,17 @@ StyledHeaderCell.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const Body = React.forwardRef((props, ref) => React__default["default"].createElement(StyledBody, _extends$3({
+const Body = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledBody, _extends$3({
   ref: ref
 }, props)));
 Body.displayName = 'Body';
 
-const Caption = React.forwardRef((props, ref) => React__default["default"].createElement(StyledCaption, _extends$3({
+const Caption = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledCaption, _extends$3({
   ref: ref
 }, props)));
 Caption.displayName = 'Caption';
 
-const TableContext = React__default["default"].createContext({
+const TableContext = React__namespace.default.createContext({
   size: 'medium',
   isReadOnly: false
 });
@@ -392,35 +389,35 @@ const useTableContext = () => {
   return React.useContext(TableContext);
 };
 
-const Cell = React__default["default"].forwardRef((props, ref) => {
+const Cell = React__namespace.default.forwardRef((props, ref) => {
   const {
     size
   } = useTableContext();
-  return React__default["default"].createElement(StyledCell, _extends$3({
+  return React__namespace.default.createElement(StyledCell, _extends$3({
     ref: ref,
     size: size
   }, props));
 });
 Cell.displayName = 'Cell';
 Cell.propTypes = {
-  isMinimum: PropTypes__default["default"].bool,
-  isTruncated: PropTypes__default["default"].bool,
-  hasOverflow: PropTypes__default["default"].bool,
-  width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
+  isMinimum: PropTypes__default.default.bool,
+  isTruncated: PropTypes__default.default.bool,
+  hasOverflow: PropTypes__default.default.bool,
+  width: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number])
 };
 
 const GroupRow = React.forwardRef((props, ref) => {
   const {
     size
   } = useTableContext();
-  return React__default["default"].createElement(StyledGroupRow, _extends$3({
+  return React__namespace.default.createElement(StyledGroupRow, _extends$3({
     ref: ref,
     size: size
   }, props));
 });
 GroupRow.displayName = 'GroupRow';
 
-const Head = React.forwardRef((props, ref) => React__default["default"].createElement(StyledHead, _extends$3({
+const Head = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledHead, _extends$3({
   ref: ref
 }, props)));
 Head.displayName = 'Head';
@@ -429,7 +426,7 @@ const HeaderCell = React.forwardRef((props, ref) => {
   const {
     size
   } = useTableContext();
-  return React__default["default"].createElement(StyledHeaderCell, _extends$3({
+  return React__namespace.default.createElement(StyledHeaderCell, _extends$3({
     ref: ref,
     size: size
   }, props));
@@ -437,11 +434,11 @@ const HeaderCell = React.forwardRef((props, ref) => {
 HeaderCell.displayName = 'HeaderCell';
 HeaderCell.propTypes = Cell.propTypes;
 
-const HeaderRow = React__default["default"].forwardRef((props, ref) => {
+const HeaderRow = React__namespace.default.forwardRef((props, ref) => {
   const {
     size
   } = useTableContext();
-  return React__default["default"].createElement(StyledHeaderRow, _extends$3({
+  return React__namespace.default.createElement(StyledHeaderRow, _extends$3({
     ref: ref,
     size: size
   }, props));
@@ -449,9 +446,7 @@ const HeaderRow = React__default["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",
@@ -459,8 +454,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", {
@@ -489,7 +483,7 @@ const OverflowButton = React.forwardRef((_ref, ref) => {
   const {
     size
   } = useTableContext();
-  return React__default["default"].createElement(StyledOverflowButton, _extends$3({
+  return React__namespace.default.createElement(StyledOverflowButton, _extends$3({
     onFocus: containerUtilities.composeEventHandlers(onFocus, () => {
       setIsFocused(true);
     }),
@@ -499,13 +493,13 @@ const OverflowButton = React.forwardRef((_ref, ref) => {
     size: size,
     isFocused: typeof focused === 'undefined' ? isFocused : focused,
     ref: ref
-  }, other), React__default["default"].createElement(StyledOverflowButtonIconWrapper, null, React__default["default"].createElement(SvgOverflowStroke, null)));
+  }, other), React__namespace.default.createElement(StyledOverflowButtonIconWrapper, null, React__namespace.default.createElement(SvgOverflowStroke, null)));
 });
 OverflowButton.displayName = 'OverflowButton';
 OverflowButton.propTypes = {
-  isHovered: PropTypes__default["default"].bool,
-  isActive: PropTypes__default["default"].bool,
-  isFocused: PropTypes__default["default"].bool
+  isHovered: PropTypes__default.default.bool,
+  isActive: PropTypes__default.default.bool,
+  isFocused: PropTypes__default.default.bool
 };
 
 const Row = React.forwardRef((_ref, ref) => {
@@ -535,7 +529,7 @@ const Row = React.forwardRef((_ref, ref) => {
   const onBlurCallback = React.useMemo(() => containerUtilities.composeEventHandlers(onBlur, () => {
     setIsFocused(false);
   }), [onBlur, setIsFocused]);
-  return React__default["default"].createElement(StyledRow, _extends$3({
+  return React__namespace.default.createElement(StyledRow, _extends$3({
     onFocus: onFocusCallback,
     onBlur: onBlurCallback,
     size: size,
@@ -546,16 +540,14 @@ const Row = React.forwardRef((_ref, ref) => {
 });
 Row.displayName = 'Row';
 Row.propTypes = {
-  isStriped: PropTypes__default["default"].bool,
-  isFocused: PropTypes__default["default"].bool,
-  isHovered: PropTypes__default["default"].bool,
-  isSelected: PropTypes__default["default"].bool
+  isStriped: PropTypes__default.default.bool,
+  isFocused: PropTypes__default.default.bool,
+  isHovered: PropTypes__default.default.bool,
+  isSelected: PropTypes__default.default.bool
 };
 
 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",
@@ -563,8 +555,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",
@@ -574,9 +565,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",
@@ -584,8 +573,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"
@@ -612,29 +600,29 @@ const SortableCell = React.forwardRef((_ref, ref) => {
     ariaSortValue = 'descending';
   }
   const SortIcon = sort === undefined ? SvgSortStroke : SvgSortFill;
-  return React__default["default"].createElement(StyledHeaderCell, _extends$3({
+  return React__namespace.default.createElement(StyledHeaderCell, _extends$3({
     "aria-sort": ariaSortValue,
     width: width
-  }, cellProps), React__default["default"].createElement(StyledSortableButton, _extends$3({
+  }, cellProps), React__namespace.default.createElement(StyledSortableButton, _extends$3({
     sort: sort,
     ref: ref
-  }, otherProps), children, React__default["default"].createElement(StyledSortableStrokeIconWrapper, null, React__default["default"].createElement(SortIcon, null)), React__default["default"].createElement(StyledSortableFillIconWrapper, null, React__default["default"].createElement(SvgSortFill, null))));
+  }, otherProps), children, React__namespace.default.createElement(StyledSortableStrokeIconWrapper, null, React__namespace.default.createElement(SortIcon, null)), React__namespace.default.createElement(StyledSortableFillIconWrapper, null, React__namespace.default.createElement(SvgSortFill, null))));
 });
 SortableCell.displayName = 'SortableCell';
 SortableCell.propTypes = {
-  sort: PropTypes__default["default"].oneOf(SORT),
-  cellProps: PropTypes__default["default"].any,
-  width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
+  sort: PropTypes__default.default.oneOf(SORT),
+  cellProps: PropTypes__default.default.any,
+  width: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number])
 };
 
-const Table = React__default["default"].forwardRef((props, ref) => {
+const Table = React__namespace.default.forwardRef((props, ref) => {
   const tableContextValue = React.useMemo(() => ({
     size: props.size,
     isReadOnly: props.isReadOnly
   }), [props.size, props.isReadOnly]);
-  return React__default["default"].createElement(TableContext.Provider, {
+  return React__namespace.default.createElement(TableContext.Provider, {
     value: tableContextValue
-  }, React__default["default"].createElement(StyledTable, _extends$3({
+  }, React__namespace.default.createElement(StyledTable, _extends$3({
     ref: ref
   }, props)));
 });
@@ -643,8 +631,8 @@ Table.defaultProps = {
   size: 'medium'
 };
 Table.propTypes = {
-  size: PropTypes__default["default"].oneOf(SIZE),
-  isReadOnly: PropTypes__default["default"].bool
+  size: PropTypes__default.default.oneOf(SIZE),
+  isReadOnly: PropTypes__default.default.bool
 };
 
 exports.Body = Body;

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 { hideVisually, math } from 'polished';
 import PropTypes from 'prop-types';
 import { composeEventHandlers } from '@zendeskgarden/container-utilities';
 
@@ -31,7 +31,7 @@ function _extends$3() {
 const COMPONENT_ID$a = 'tables.body';
 const StyledBody = styled.tbody.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14ud6y-0"
@@ -43,7 +43,7 @@ StyledBody.defaultProps = {
 const COMPONENT_ID$9 = 'tables.caption';
 const StyledCaption = styled.caption.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledCaption",
   componentId: "sc-113y327-0"
@@ -58,7 +58,7 @@ const getLineHeight = props => {
 };
 const StyledTable = styled.table.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTable",
   componentId: "sc-gje7na-0"
@@ -101,11 +101,11 @@ const sizeStyling = props => {
 };
 const StyledCell = styled.td.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.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, props => retrieveComponentStyles(COMPONENT_ID$7, props));
+})(["display:table-cell;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out;", ";", ";&[hidden]{", "}", ";"], props => sizeStyling(props), props => props.isTruncated && truncatedStyling$1, hideVisually(), props => retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledCell.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -130,7 +130,7 @@ const colorStyles$1 = props => {
 };
 const StyledOverflowButton = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   type: 'button'
 }).withConfig({
   displayName: "StyledOverflowButton",
@@ -186,7 +186,7 @@ const colorStyles = props => {
 };
 const StyledRow = styled(StyledBaseRow).attrs(props => ({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   tabIndex: props.isReadOnly ? undefined : -1
 })).withConfig({
   displayName: "StyledRow",
@@ -207,7 +207,7 @@ const getHeaderRowHeight = props => {
 };
 const StyledHeaderRow = styled(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledHeaderRow",
   componentId: "sc-16ogvdx-0"
@@ -223,7 +223,7 @@ const stickyStyles = props => {
 };
 const StyledHead = styled.thead.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledHead",
   componentId: "sc-spf23a-0"
@@ -240,7 +240,7 @@ const sizeStyles$1 = props => {
 };
 const StyledGroupRow = styled(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledGroupRow",
   componentId: "sc-mpd0r8-0"
@@ -273,7 +273,7 @@ StyledSortableFillIconWrapper.defaultProps = {
 };
 const StyledSortableButton = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   type: 'button'
 }).withConfig({
   displayName: "StyledSortableButton",
@@ -329,7 +329,7 @@ const sizeStyles = props => {
 const StyledHeaderCell = styled(StyledCell).attrs({
   as: 'th',
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledHeaderCell",
   componentId: "sc-fzagoe-0"
@@ -421,9 +421,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 +429,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 +522,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 +530,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 +540,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 +548,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/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.1",
+  "version": "8.63.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.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.1",
+    "@zendeskgarden/react-theming": "^8.63.0",
     "@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": "e84b3603c69975dc0ef30029364da15fc1e4fc03"
+  "gitHead": "4b8715305a769881b143c7195c5b31e687422926"
 }