@zendeskgarden/react-tables 9.0.0-next.0 → 9.0.0-next.10

package/dist/index.cjs.js

@@ -1,10 +1,9 @@
 /**
- * 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.
- */
-
+* 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.
+*/
 'use strict';
 
 var React = require('react');
@@ -38,25 +37,10 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 
-function _extends$3() {
-  _extends$3 = 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$3.apply(this, arguments);
-}
-
 const COMPONENT_ID$b = 'tables.body';
 const StyledBody = styled__default.default.tbody.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14ud6y-0"
@@ -68,7 +52,7 @@ StyledBody.defaultProps = {
 const COMPONENT_ID$a = 'tables.caption';
 const StyledCaption = styled__default.default.caption.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledCaption",
   componentId: "sc-113y327-0"
@@ -83,11 +67,11 @@ const getLineHeight = props => {
 };
 const StyledTable = styled__default.default.table.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).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$9, 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 => reactTheming.getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledTable.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -126,7 +110,7 @@ const sizeStyling = props => {
 };
 const StyledCell = styled__default.default.td.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-8hpncx-0"
@@ -138,17 +122,17 @@ StyledCell.defaultProps = {
 const COMPONENT_ID$7 = 'tables.overflow_button';
 const OVERFLOW_BUTTON_SIZE = '2em';
 const colorStyles$1 = props => {
-  const hoverBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.08);
-  const hoverForegroundColor = reactTheming.getColor('neutralHue', 700, props.theme);
-  const activeBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.2);
-  const activeForegroundColor = reactTheming.getColor('neutralHue', 800, props.theme);
+  const hoverBackgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.08);
+  const hoverForegroundColor = reactTheming.getColorV8('neutralHue', 700, props.theme);
+  const activeBackgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.2);
+  const activeForegroundColor = reactTheming.getColorV8('neutralHue', 800, props.theme);
   let foregroundColor;
   if (props.isHovered) {
     foregroundColor = hoverForegroundColor;
   } else if (props.isActive) {
     foregroundColor = activeForegroundColor;
   } else {
-    foregroundColor = reactTheming.getColor('neutralHue', 600, props.theme);
+    foregroundColor = reactTheming.getColorV8('neutralHue', 600, props.theme);
   }
   return styled.css(["color:", ";&:hover{background-color:", ";color:", ";}", " &:active{background-color:", ";color:", ";}"], foregroundColor, hoverBackgroundColor, hoverForegroundColor, reactTheming.focusStyles({
     theme: props.theme,
@@ -157,7 +141,7 @@ const colorStyles$1 = props => {
 };
 const StyledOverflowButton = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.0',
+  'data-garden-version': '9.0.0-next.10',
   type: 'button'
 }).withConfig({
   displayName: "StyledOverflowButton",
@@ -178,17 +162,17 @@ const COMPONENT_ID$6 = 'tables.row';
 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));
+})(["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.getColorV8('neutralHue', 200, props.theme)}`, props => props.isStriped && reactTheming.getColorV8('neutralHue', 100, props.theme));
 StyledBaseRow.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 const colorStyles = props => {
-  const boxShadow = `inset ${props.theme.rtl ? '-' : ''}${props.theme.shadowWidths.md} 0 0 0 ${reactTheming.getColor('primaryHue', 600, props.theme)}`;
-  const hoveredBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.08);
-  const hoveredBorderColor = reactTheming.getColor('primaryHue', 200, props.theme);
-  const selectedBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.2);
-  const selectedBorderColor = reactTheming.getColor('primaryHue', 300, props.theme);
-  const hoveredSelectedBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.28);
+  const boxShadow = `inset ${props.theme.rtl ? '-' : ''}${props.theme.shadowWidths.md} 0 0 0 ${reactTheming.getColorV8('primaryHue', 600, props.theme)}`;
+  const hoveredBackgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.08);
+  const hoveredBorderColor = reactTheming.getColorV8('primaryHue', 200, props.theme);
+  const selectedBackgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.2);
+  const selectedBorderColor = reactTheming.getColorV8('primaryHue', 300, props.theme);
+  const hoveredSelectedBackgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.28);
   let backgroundColor = undefined;
   let borderColor = undefined;
   let hoverBorderBottomColor = undefined;
@@ -213,7 +197,7 @@ const colorStyles = props => {
 };
 const StyledRow = styled__default.default(StyledBaseRow).attrs(props => ({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.0',
+  'data-garden-version': '9.0.0-next.10',
   tabIndex: props.isReadOnly ? undefined : -1
 })).withConfig({
   displayName: "StyledRow",
@@ -234,23 +218,23 @@ const getHeaderRowHeight = props => {
 };
 const StyledHeaderRow = styled__default.default(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).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$5, props));
+})(["border-bottom-color:", ";height:", ";vertical-align:bottom;font-weight:", ";", "{opacity:1;margin-top:0;margin-bottom:calc(", " - 1em);}", ";"], props => reactTheming.getColorV8('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$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 borderColor = reactTheming.getColorV8('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, reactTheming.getColorV8('background', 600 , props.theme), StyledHeaderRow);
 };
 const StyledHead = styled__default.default.thead.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledHead",
   componentId: "sc-spf23a-0"
@@ -267,11 +251,11 @@ const sizeStyles$1 = props => {
 };
 const StyledGroupRow = styled__default.default(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).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$3, props));
+})(["background-color:", ";", " ", ";"], props => reactTheming.getColorV8('neutralHue', 100, props.theme), props => sizeStyles$1(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledGroupRow.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -300,30 +284,30 @@ StyledSortableFillIconWrapper.defaultProps = {
 };
 const StyledSortableButton = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.0',
+  'data-garden-version': '9.0.0-next.10',
   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:", ";color:", ";fill:", ";}&:hover,", "{text-decoration:none;color:", ";", ";", " ", "}", " ", ";"], 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, props => {
   if (props.sort === 'asc') {
-    return reactTheming.getColor('neutralHue', 600, props.theme);
+    return reactTheming.getColorV8('neutralHue', 600, props.theme);
   } else if (props.sort === 'desc') {
-    return reactTheming.getColor('neutralHue', 400, props.theme);
+    return reactTheming.getColorV8('neutralHue', 400, props.theme);
   }
   return undefined;
 }, props => {
   if (props.sort === 'asc') {
-    return reactTheming.getColor('neutralHue', 400, props.theme);
+    return reactTheming.getColorV8('neutralHue', 400, props.theme);
   } else if (props.sort === 'desc') {
-    return reactTheming.getColor('neutralHue', 600, props.theme);
+    return reactTheming.getColorV8('neutralHue', 600, props.theme);
   }
   return undefined;
-}, reactTheming.SELECTOR_FOCUS_VISIBLE, props => reactTheming.getColor('primaryHue', 600, props.theme), props => props.sort === undefined && `
+}, reactTheming.SELECTOR_FOCUS_VISIBLE, props => reactTheming.getColorV8('primaryHue', 600, props.theme), props => props.sort === undefined && `
       ${StyledSortableFillIconWrapper} {
         opacity: 1;
-        color: ${reactTheming.getColor('primaryHue', 600, props.theme)};
-        fill: ${reactTheming.getColor('primaryHue', 600, props.theme)};
+        color: ${reactTheming.getColorV8('primaryHue', 600, props.theme)};
+        fill: ${reactTheming.getColorV8('primaryHue', 600, props.theme)};
       }
 
       ${StyledSortableStrokeIconWrapper} {
@@ -331,13 +315,13 @@ const StyledSortableButton = styled__default.default.button.attrs({
       }
     `, props => props.sort === 'asc' && `
       ${StyledSortableFillIconWrapper} {
-        color: ${reactTheming.getColor('primaryHue', 600, props.theme)};
-        fill: ${reactTheming.getColor('primaryHue', 600, props.theme, 0.25)};
+        color: ${reactTheming.getColorV8('primaryHue', 600, props.theme)};
+        fill: ${reactTheming.getColorV8('primaryHue', 600, props.theme, 0.25)};
       }
     `, props => props.sort === 'desc' && `
       ${StyledSortableFillIconWrapper} {
-        color: ${reactTheming.getColor('primaryHue', 600, props.theme, 0.25)};
-        fill: ${reactTheming.getColor('primaryHue', 600, props.theme)};
+        color: ${reactTheming.getColorV8('primaryHue', 600, props.theme, 0.25)};
+        fill: ${reactTheming.getColorV8('primaryHue', 600, props.theme)};
       }
     `, props => reactTheming.focusStyles({
   theme: props.theme
@@ -358,7 +342,7 @@ const sizeStyles = props => {
 const StyledHeaderCell = styled__default.default(StyledCell).attrs({
   as: 'th',
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledHeaderCell",
   componentId: "sc-fzagoe-0"
@@ -378,7 +362,7 @@ StyledHeaderCell.defaultProps = {
 const COMPONENT_ID = 'tables.hidden_cell';
 const StyledHiddenCell = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledHiddenCell",
   componentId: "sc-1x454xw-0"
@@ -387,12 +371,12 @@ StyledHiddenCell.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const Body = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledBody, _extends$3({
+const Body = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledBody, Object.assign({
   ref: ref
 }, props)));
 Body.displayName = 'Body';
 
-const Caption = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledCaption, _extends$3({
+const Caption = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledCaption, Object.assign({
   ref: ref
 }, props)));
 Caption.displayName = 'Caption';
@@ -413,7 +397,7 @@ const Cell = React__namespace.default.forwardRef((_ref, ref) => {
   const {
     size
   } = useTableContext();
-  return React__namespace.default.createElement(StyledCell, _extends$3({
+  return React__namespace.default.createElement(StyledCell, Object.assign({
     ref: ref,
     size: size
   }, props), hidden && props.children ? React__namespace.default.createElement(StyledHiddenCell, null, props.children) : props.children);
@@ -430,14 +414,14 @@ const GroupRow = React.forwardRef((props, ref) => {
   const {
     size
   } = useTableContext();
-  return React__namespace.default.createElement(StyledGroupRow, _extends$3({
+  return React__namespace.default.createElement(StyledGroupRow, Object.assign({
     ref: ref,
     size: size
   }, props));
 });
 GroupRow.displayName = 'GroupRow';
 
-const Head = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledHead, _extends$3({
+const Head = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledHead, Object.assign({
   ref: ref
 }, props)));
 Head.displayName = 'Head';
@@ -450,7 +434,7 @@ const HeaderCell = React.forwardRef((_ref, ref) => {
   const {
     size
   } = useTableContext();
-  return React__namespace.default.createElement(StyledHeaderCell, _extends$3({
+  return React__namespace.default.createElement(StyledHeaderCell, Object.assign({
     ref: ref,
     size: size
   }, props), hidden && props.children ? React__namespace.default.createElement(StyledHiddenCell, null, props.children) : props.children);
@@ -462,7 +446,7 @@ const HeaderRow = React__namespace.default.forwardRef((props, ref) => {
   const {
     size
   } = useTableContext();
-  return React__namespace.default.createElement(StyledHeaderRow, _extends$3({
+  return React__namespace.default.createElement(StyledHeaderRow, Object.assign({
     ref: ref,
     size: size
   }, props));
@@ -507,7 +491,7 @@ const OverflowButton = React.forwardRef((_ref, ref) => {
   const {
     size
   } = useTableContext();
-  return React__namespace.default.createElement(StyledOverflowButton, _extends$3({
+  return React__namespace.default.createElement(StyledOverflowButton, Object.assign({
     onFocus: containerUtilities.composeEventHandlers(onFocus, () => {
       setIsFocused(true);
     }),
@@ -553,7 +537,7 @@ const Row = React.forwardRef((_ref, ref) => {
   const onBlurCallback = React.useMemo(() => containerUtilities.composeEventHandlers(onBlur, () => {
     setIsFocused(false);
   }), [onBlur, setIsFocused]);
-  return React__namespace.default.createElement(StyledRow, _extends$3({
+  return React__namespace.default.createElement(StyledRow, Object.assign({
     onFocus: onFocusCallback,
     onBlur: onBlurCallback,
     size: size,
@@ -624,10 +608,10 @@ const SortableCell = React.forwardRef((_ref, ref) => {
     ariaSortValue = 'descending';
   }
   const SortIcon = sort === undefined ? SvgSortStroke : SvgSortFill;
-  return React__namespace.default.createElement(StyledHeaderCell, _extends$3({
+  return React__namespace.default.createElement(StyledHeaderCell, Object.assign({
     "aria-sort": ariaSortValue,
     width: width
-  }, cellProps), React__namespace.default.createElement(StyledSortableButton, _extends$3({
+  }, cellProps), React__namespace.default.createElement(StyledSortableButton, Object.assign({
     sort: sort,
     ref: ref
   }, 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))));
@@ -639,25 +623,36 @@ SortableCell.propTypes = {
   width: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number])
 };
 
-const Table = React__namespace.default.forwardRef((props, ref) => {
+const TableComponent = React__namespace.default.forwardRef((props, ref) => {
   const tableContextValue = React.useMemo(() => ({
     size: props.size,
     isReadOnly: props.isReadOnly
   }), [props.size, props.isReadOnly]);
   return React__namespace.default.createElement(TableContext.Provider, {
     value: tableContextValue
-  }, React__namespace.default.createElement(StyledTable, _extends$3({
+  }, React__namespace.default.createElement(StyledTable, Object.assign({
     ref: ref
   }, props)));
 });
-Table.displayName = 'Table';
-Table.defaultProps = {
+TableComponent.displayName = 'Table';
+TableComponent.defaultProps = {
   size: 'medium'
 };
-Table.propTypes = {
+TableComponent.propTypes = {
   size: PropTypes__default.default.oneOf(SIZE),
   isReadOnly: PropTypes__default.default.bool
 };
+const Table = TableComponent;
+Table.Body = Body;
+Table.Caption = Caption;
+Table.Cell = Cell;
+Table.GroupRow = GroupRow;
+Table.Head = Head;
+Table.HeaderCell = HeaderCell;
+Table.HeaderRow = HeaderRow;
+Table.OverflowButton = OverflowButton;
+Table.Row = Row;
+Table.SortableCell = SortableCell;
 
 exports.Body = Body;
 exports.Caption = Caption;

package/dist/typings/elements/Body.d.ts

@@ -6,6 +6,8 @@
  */
 import React from 'react';
 /**
+ * @deprecated use `Table.Body` instead
+ *
  * @extends HTMLAttributes<HTMLTableSectionElement>
  */
 export declare const Body: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/typings/elements/Caption.d.ts

@@ -6,6 +6,8 @@
  */
 import React from 'react';
 /**
+ * @deprecated use `Table.Caption` instead
+ *
  * @extends HTMLAttributes<HTMLTableCaptionElement>
  */
 export declare const Caption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;

package/dist/typings/elements/Cell.d.ts

@@ -7,6 +7,8 @@
 import React from 'react';
 import { ICellProps } from '../types';
 /**
+ * @deprecated use `Table.Cell` instead
+ *
  * @extends TdHTMLAttributes<HTMLTableCellElement>
  */
 export declare const Cell: React.ForwardRefExoticComponent<ICellProps & React.RefAttributes<HTMLTableCellElement>>;

package/dist/typings/elements/GroupRow.d.ts

@@ -6,6 +6,8 @@
  */
 import React from 'react';
 /**
+ * @deprecated use `Table.GroupRow` instead
+ *
  * @extends HTMLAttributes<HTMLTableRowElement>
  */
 export declare const GroupRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;

package/dist/typings/elements/Head.d.ts

@@ -7,6 +7,8 @@
 import React from 'react';
 import { IHeadProps } from '../types';
 /**
+ * @deprecated use `Table.Head` instead
+ *
  * @extends HTMLAttributes<HTMLTableSectionElement>
  */
 export declare const Head: React.ForwardRefExoticComponent<IHeadProps & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/typings/elements/HeaderCell.d.ts

@@ -7,6 +7,8 @@
 import React from 'react';
 import { IHeaderCellProps } from '../types';
 /**
+ * @deprecated use `Table.HeaderCell` instead
+ *
  * @extends ThHTMLAttributes<HTMLTableCellElement>
  */
 export declare const HeaderCell: React.ForwardRefExoticComponent<IHeaderCellProps & React.RefAttributes<HTMLTableCellElement>>;

package/dist/typings/elements/HeaderRow.d.ts

@@ -6,6 +6,8 @@
  */
 import React from 'react';
 /**
+ * @deprecated use `Table.HeaderRow` instead
+ *
  * @extends HTMLAttributes<HTMLTableRowElement>
  */
 export declare const HeaderRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;

package/dist/typings/elements/OverflowButton.d.ts

@@ -14,6 +14,8 @@ export interface IOverflowButtonProps extends ButtonHTMLAttributes<HTMLButtonEle
     isFocused?: boolean;
 }
 /**
+ * @deprecated use `Table.OverflowButton` instead
+ *
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
 export declare const OverflowButton: React.ForwardRefExoticComponent<IOverflowButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/typings/elements/Row.d.ts

@@ -7,6 +7,8 @@
 import React from 'react';
 import { IRowProps } from '../types';
 /**
+ * @deprecated use `Table.Row` instead
+ *
  * @extends HTMLAttributes<HTMLTableRowElement>
  */
 export declare const Row: React.ForwardRefExoticComponent<IRowProps & React.RefAttributes<HTMLTableRowElement>>;

package/dist/typings/elements/SortableCell.d.ts

@@ -7,6 +7,8 @@
 import React from 'react';
 import { ISortableCellProps } from '../types';
 /**
+ * @deprecated use `Table.SortableCell` instead
+ *
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
 export declare const SortableCell: React.ForwardRefExoticComponent<ISortableCellProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/typings/elements/Table.d.ts

@@ -6,7 +6,29 @@
  */
 import React from 'react';
 import { ITableProps } from '../types';
+import { Head } from './Head';
+import { Body } from './Body';
+import { Caption } from './Caption';
+import { Cell } from './Cell';
+import { GroupRow } from './GroupRow';
+import { HeaderCell } from './HeaderCell';
+import { HeaderRow } from './HeaderRow';
+import { OverflowButton } from './OverflowButton';
+import { Row } from './Row';
+import { SortableCell } from './SortableCell';
+export declare const TableComponent: React.ForwardRefExoticComponent<ITableProps & React.RefAttributes<HTMLTableElement>>;
 /**
  * @extends TableHTMLAttributes<HTMLTableElement>
  */
-export declare const Table: React.ForwardRefExoticComponent<ITableProps & React.RefAttributes<HTMLTableElement>>;
+export declare const Table: React.ForwardRefExoticComponent<ITableProps & React.RefAttributes<HTMLTableElement>> & {
+    Body: typeof Body;
+    Caption: typeof Caption;
+    Cell: typeof Cell;
+    GroupRow: typeof GroupRow;
+    Head: typeof Head;
+    HeaderCell: typeof HeaderCell;
+    HeaderRow: typeof HeaderRow;
+    OverflowButton: typeof OverflowButton;
+    Row: typeof Row;
+    SortableCell: typeof SortableCell;
+};

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

@@ -10,4 +10,4 @@ export declare const StyledHeaderCell: import("styled-components").StyledCompone
     as: string;
     'data-garden-id': string;
     'data-garden-version': string;
-}, "data-garden-id" | "data-garden-version" | "as">;
+}, "as" | "data-garden-id" | "data-garden-version">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-tables",
-  "version": "9.0.0-next.0",
+  "version": "9.0.0-next.10",
   "description": "Components relating to tables in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -10,7 +10,7 @@
     "url": "https://github.com/zendeskgarden/react-components/issues"
   },
   "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
+  "module": "dist/esm/index.js",
   "files": [
     "dist"
   ],
@@ -27,15 +27,15 @@
     "prop-types": "^15.5.7"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": "^8.67.0",
+    "@zendeskgarden/react-theming": ">=9.0.0-next",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "styled-components": "^4.2.0 || ^5.0.0"
+    "styled-components": "^5.3.1"
   },
   "devDependencies": {
     "@types/react-beautiful-dnd": "13.1.8",
     "@types/react-window": "1.8.8",
-    "@zendeskgarden/react-theming": "^9.0.0-next.0",
+    "@zendeskgarden/react-theming": "^9.0.0-next.10",
     "@zendeskgarden/svg-icons": "7.0.0",
     "react-beautiful-dnd": "13.1.1",
     "react-window": "1.8.10"
@@ -50,5 +50,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "7145e970afa57b024ab7d505f2220a656e430c04"
+  "gitHead": "818e6100aa6676af7e972198b82516d330307d60"
 }