@zendeskgarden/react-tables 8.62.2 → 8.63.0

package/dist/index.cjs.js

@@ -56,7 +56,7 @@ function _extends$3() {
 const COMPONENT_ID$a = 'tables.body';
 const StyledBody = styled__default.default.tbody.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14ud6y-0"
@@ -68,7 +68,7 @@ StyledBody.defaultProps = {
 const COMPONENT_ID$9 = 'tables.caption';
 const StyledCaption = styled__default.default.caption.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledCaption",
   componentId: "sc-113y327-0"
@@ -83,7 +83,7 @@ const getLineHeight = props => {
 };
 const StyledTable = styled__default.default.table.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTable",
   componentId: "sc-gje7na-0"
@@ -126,11 +126,11 @@ const sizeStyling = props => {
 };
 const StyledCell = styled__default.default.td.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.62.2'
+  '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
 };
@@ -155,7 +155,7 @@ const colorStyles$1 = props => {
 };
 const StyledOverflowButton = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.62.2',
+  'data-garden-version': '8.63.0',
   type: 'button'
 }).withConfig({
   displayName: "StyledOverflowButton",
@@ -211,7 +211,7 @@ const colorStyles = props => {
 };
 const StyledRow = styled__default.default(StyledBaseRow).attrs(props => ({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.62.2',
+  'data-garden-version': '8.63.0',
   tabIndex: props.isReadOnly ? undefined : -1
 })).withConfig({
   displayName: "StyledRow",
@@ -232,7 +232,7 @@ const getHeaderRowHeight = props => {
 };
 const StyledHeaderRow = styled__default.default(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledHeaderRow",
   componentId: "sc-16ogvdx-0"
@@ -248,7 +248,7 @@ const stickyStyles = props => {
 };
 const StyledHead = styled__default.default.thead.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledHead",
   componentId: "sc-spf23a-0"
@@ -265,7 +265,7 @@ const sizeStyles$1 = props => {
 };
 const StyledGroupRow = styled__default.default(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledGroupRow",
   componentId: "sc-mpd0r8-0"
@@ -298,7 +298,7 @@ StyledSortableFillIconWrapper.defaultProps = {
 };
 const StyledSortableButton = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.62.2',
+  'data-garden-version': '8.63.0',
   type: 'button'
 }).withConfig({
   displayName: "StyledSortableButton",
@@ -354,7 +354,7 @@ 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-version': '8.63.0'
 }).withConfig({
   displayName: "StyledHeaderCell",
   componentId: "sc-fzagoe-0"
@@ -446,9 +446,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 +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", {
@@ -550,9 +547,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 +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",
@@ -571,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",
@@ -581,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"

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.2'
+  '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.2'
+  '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.2'
+  '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.2'
+  '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.2',
+  '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.2',
+  '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.2'
+  '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.2'
+  '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.2'
+  '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.2',
+  '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.2'
+  '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.2",
+  "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.2",
+    "@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": "27a7d6c021f3360396af60d51ecbf66e9076a405"
+  "gitHead": "4b8715305a769881b143c7195c5b31e687422926"
 }