@zendeskgarden/react-tables 9.0.0-next.2 → 9.0.0-next.21

package/dist/index.cjs.js

@@ -1,16 +1,16 @@
 /**
- * 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');
 var styled = require('styled-components');
 var reactTheming = require('@zendeskgarden/react-theming');
 var polished = require('polished');
+var reactButtons = require('@zendeskgarden/react-buttons');
 var PropTypes = require('prop-types');
 var containerUtilities = require('@zendeskgarden/container-utilities');
 
@@ -38,25 +38,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.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14ud6y-0"
@@ -68,7 +53,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.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledCaption",
   componentId: "sc-113y327-0"
@@ -77,206 +62,212 @@ StyledCaption.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$9 = 'tables.table';
-const getLineHeight = props => {
-  return `${props.theme.space.base * 5}px`;
+const sizeStyles$4 = _ref => {
+  let {
+    theme
+  } = _ref;
+  return styled.css(["border-bottom:", ";vertical-align:top;box-sizing:border-box;"], theme.borders.sm);
 };
-const StyledTable = styled__default.default.table.attrs({
-  'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.2'
-}).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));
-StyledTable.defaultProps = {
+const colorStyles$5 = _ref2 => {
+  let {
+    theme,
+    $isStriped
+  } = _ref2;
+  const borderColor = reactTheming.getColor({
+    variable: 'border.subtle',
+    theme
+  });
+  const backgroundColor = reactTheming.getColor({
+    variable: 'background.subtle',
+    transparency: theme.opacity[100],
+    light: {
+      offset: 300
+    },
+    dark: {
+      offset: -600
+    },
+    theme
+  });
+  return styled.css(["border-bottom-color:", ";background-color:", ";"], borderColor, $isStriped && backgroundColor);
+};
+const StyledBaseRow = styled__default.default.tr.withConfig({
+  displayName: "StyledBaseRow",
+  componentId: "sc-1t4zqg4-0"
+})(["display:table-row;transition:background-color 0.1s ease-in-out;", " ", ""], sizeStyles$4, colorStyles$5);
+StyledBaseRow.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const getRowHeight = props => {
-  if (props.size === 'large') {
+  if (props.$size === 'large') {
     return `${props.theme.space.base * 16}px`;
-  } else if (props.size === 'small') {
+  } else if (props.$size === 'small') {
     return `${props.theme.space.base * 8}px`;
   }
   return `${props.theme.space.base * 10}px`;
 };
 
-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';
-  let padding;
-  let width = props.width;
-  let height;
-  if (props.hasOverflow) {
-    boxSizing = 'content-box';
-    width = '2em';
-    height = 'inherit';
-    padding = props.theme.rtl ? `0 0 0 ${props.theme.space.base}px` : `0 ${props.theme.space.base}px 0 0`;
-  } else {
-    const paddingVertical = polished.math(`(${getRowHeight(props)} - ${getLineHeight(props)}) / 2`);
-    const paddingHorizontal = `${props.theme.space.base * 3}px`;
-    padding = `${paddingVertical} ${paddingHorizontal}`;
-  }
-  if (props.isMinimum) {
-    boxSizing = 'content-box';
-    width = '1em';
-  }
-  return styled.css(["box-sizing:", ";padding:", ";width:", ";height:", ";"], boxSizing, padding, width, height);
-};
-const StyledCell = styled__default.default.td.attrs({
-  'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.2'
-}).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$8, props));
-StyledCell.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
-
-const COMPONENT_ID$7 = 'tables.overflow_button';
+const COMPONENT_ID$9 = '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);
-  let foregroundColor;
-  if (props.isHovered) {
-    foregroundColor = hoverForegroundColor;
-  } else if (props.isActive) {
-    foregroundColor = activeForegroundColor;
-  } else {
-    foregroundColor = reactTheming.getColor('neutralHue', 600, props.theme);
-  }
-  return styled.css(["color:", ";&:hover{background-color:", ";color:", ";}", " &:active{background-color:", ";color:", ";}"], foregroundColor, hoverBackgroundColor, hoverForegroundColor, reactTheming.focusStyles({
-    theme: props.theme,
-    inset: true
-  }), activeBackgroundColor, activeForegroundColor);
-};
-const StyledOverflowButton = styled__default.default.button.attrs({
-  'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.2',
-  type: 'button'
+const StyledOverflowButton = styled__default.default(reactButtons.IconButton).attrs({
+  'data-garden-id': COMPONENT_ID$9,
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledOverflowButton",
   componentId: "sc-1eba2ml-0"
-})(["display:block;transition:background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out;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;", " ", ";"], 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));
+})(["margin-top:calc(", " - 1em);width:100%;min-width:unset;height:", ";font-size:inherit;", ";"], props => polished.math(`${getRowHeight(props)} / 2`), OVERFLOW_BUTTON_SIZE, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledOverflowButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-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:background-color 0.1s ease-in-out;width:", ";height:", ";"], OVERFLOW_BUTTON_SIZE, OVERFLOW_BUTTON_SIZE);
-StyledOverflowButtonIconWrapper.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
-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));
-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);
-  let backgroundColor = undefined;
-  let borderColor = undefined;
-  let hoverBorderBottomColor = undefined;
-  let hoverBackgroundColor = undefined;
-  if (props.isSelected) {
-    if (props.isHovered) {
-      backgroundColor = hoveredSelectedBackgroundColor;
-    } else {
-      backgroundColor = selectedBackgroundColor;
-    }
-    borderColor = selectedBorderColor;
-    hoverBorderBottomColor = selectedBorderColor;
-    hoverBackgroundColor = hoveredSelectedBackgroundColor;
-  } else if (props.isHovered) {
-    backgroundColor = hoveredBackgroundColor;
-    borderColor = hoveredBorderColor;
-  } else if (!props.isReadOnly) {
-    hoverBorderBottomColor = hoveredBorderColor;
-    hoverBackgroundColor = hoveredBackgroundColor;
-  }
-  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$6,
-  'data-garden-version': '9.0.0-next.2',
-  tabIndex: props.isReadOnly ? undefined : -1
-})).withConfig({
-  displayName: "StyledRow",
-  componentId: "sc-ek66ow-1"
-})(["height:", ";", " ", ";"], getRowHeight, props => colorStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
-StyledRow.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
-
-const COMPONENT_ID$5 = 'tables.header_row';
+const COMPONENT_ID$8 = 'tables.header_row';
 const getHeaderRowHeight = props => {
-  if (props.size === 'large') {
+  if (props.$size === 'large') {
     return `${props.theme.space.base * 18}px`;
-  } else if (props.size === 'small') {
+  } else if (props.$size === 'small') {
     return `${props.theme.space.base * 10}px`;
   }
   return `${props.theme.space.base * 12}px`;
 };
+const colorStyles$4 = _ref => {
+  let {
+    theme
+  } = _ref;
+  return styled.css(["border-bottom-color:", ";"], reactTheming.getColor({
+    variable: 'border.default',
+    theme
+  }));
+};
+const sizeStyles$3 = props => {
+  const rowHeight = getHeaderRowHeight(props);
+  return styled.css(["height:", ";vertical-align:bottom;", "{margin-top:0;margin-bottom:calc(", " - 1em);}"], rowHeight, StyledOverflowButton, polished.math(`${rowHeight} / 2`));
+};
 const StyledHeaderRow = styled__default.default(StyledBaseRow).attrs({
-  'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$8,
+  'data-garden-version': '9.0.0-next.21'
 }).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));
+})(["font-weight:", ";", " ", " ", "{opacity:1;}", ";"], props => props.theme.fontWeights.semibold, sizeStyles$3, colorStyles$4, StyledOverflowButton, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, 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 COMPONENT_ID$7 = 'tables.head';
+const colorStyles$3 = _ref => {
+  let {
+    theme
+  } = _ref;
+  const borderColor = reactTheming.getColor({
+    variable: 'border.default',
+    theme
+  });
+  const backgroundColor = reactTheming.getColor({
+    variable: 'background.default',
+    theme
+  });
+  return styled.css(["box-shadow:inset 0 -", " 0 ", ";background-color:", ";& > ", ":last-child{border-bottom-color:transparent;}"], theme.borderWidths.sm, borderColor, backgroundColor, StyledHeaderRow);
+};
+const stickyStyles = () => {
+  return styled.css(["position:sticky;top:0;z-index:1;"]);
 };
 const StyledHead = styled__default.default.thead.attrs({
-  'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$7,
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledHead",
   componentId: "sc-spf23a-0"
-})(["", " ", ";"], props => props.isSticky && stickyStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
+})(["", " ", " ", ";"], props => props.$isSticky && stickyStyles(), colorStyles$3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledHead.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$3 = 'tables.group_row';
-const sizeStyles$1 = props => {
+const COMPONENT_ID$6 = 'tables.table';
+const getLineHeight = props => {
+  return `${props.theme.space.base * 5}px`;
+};
+const StyledTable = styled__default.default.table.attrs({
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '9.0.0-next.21'
+}).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 => reactTheming.getColor({
+  variable: 'foreground.default',
+  theme: props.theme
+}), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
+StyledTable.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
+};
+
+const COMPONENT_ID$5 = 'tables.cell';
+const truncatedStyling$1 = styled.css(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
+const sizeStyling = props => {
+  let boxSizing = 'border-box';
+  let padding;
+  let width = props.width;
+  let height;
+  if (props.$hasOverflow) {
+    boxSizing = 'content-box';
+    width = '2em';
+    height = 'inherit';
+    padding = props.theme.rtl ? `0 0 0 ${props.theme.space.base}px` : `0 ${props.theme.space.base}px 0 0`;
+  } else {
+    const paddingVertical = polished.math(`(${getRowHeight(props)} - ${getLineHeight(props)}) / 2`);
+    const paddingHorizontal = `${props.theme.space.base * 3}px`;
+    padding = `${paddingVertical} ${paddingHorizontal}`;
+  }
+  if (props.$isMinimum) {
+    boxSizing = 'content-box';
+    width = '1em';
+  }
+  return styled.css(["box-sizing:", ";padding:", ";width:", ";height:", ";"], boxSizing, padding, width, height);
+};
+const StyledCell = styled__default.default.td.attrs({
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '9.0.0-next.21'
+}).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$5, props));
+StyledCell.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
+};
+
+const COMPONENT_ID$4 = 'tables.group_row';
+const colorStyles$2 = _ref => {
+  let {
+    theme
+  } = _ref;
+  return styled.css(["background-color:", ";"], reactTheming.getColor({
+    variable: 'background.subtle',
+    transparency: theme.opacity[100],
+    light: {
+      offset: 300
+    },
+    dark: {
+      offset: -600
+    },
+    theme
+  }));
+};
+const sizeStyles$2 = props => {
   const height = `${props.theme.space.base * 8}px`;
   const lineHeight = getLineHeight(props);
   return styled.css(["height:", ";line-height:", ";font-size:", ";", "{padding:", " ", "px;}"], height, lineHeight, props.theme.fontSizes.sm, StyledCell, polished.math(`(${height} - ${lineHeight}) / 2`), props.theme.space.base * 3);
 };
 const StyledGroupRow = styled__default.default(StyledBaseRow).attrs({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '9.0.0-next.21'
 }).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));
+})(["", " ", " ", ";"], sizeStyles$2, colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledGroupRow.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$2 = 'tables.sortable';
+const COMPONENT_ID$3 = 'tables.sortable';
 const StyledBaseIconWrapper = styled__default.default.div.withConfig({
   displayName: "StyledSortableButton__StyledBaseIconWrapper",
   componentId: "sc-2s1dli-0"
@@ -298,104 +289,219 @@ const StyledSortableFillIconWrapper = styled__default.default(StyledBaseIconWrap
 StyledSortableFillIconWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
+const colorStyles$1 = _ref => {
+  let {
+    theme,
+    $sort
+  } = _ref;
+  const fgInactive = reactTheming.getColor({
+    variable: 'foreground.subtle',
+    transparency: theme.opacity[200],
+    theme
+  });
+  const fgActive = reactTheming.getColor({
+    variable: 'foreground.subtle',
+    theme
+  });
+  const fgPrimaryActive = reactTheming.getColor({
+    variable: 'foreground.primary',
+    theme
+  });
+  const fgPrimaryInactive = reactTheming.getColor({
+    variable: 'foreground.primary',
+    theme,
+    dark: {
+      offset: -100
+    },
+    transparency: theme.opacity[200]
+  });
+  let color = fgActive;
+  let fill = fgActive;
+  if ($sort === 'asc') {
+    color = fgActive;
+    fill = fgInactive;
+  } else if ($sort === 'desc') {
+    color = fgInactive;
+    fill = fgActive;
+  }
+  return styled.css(["", "{color:", ";fill:", ";}", "{color:", ";fill:", ";}&:hover,", "{color:", ";", ";", " ", "}", ""], StyledSortableStrokeIconWrapper, fgActive, fgActive, StyledSortableFillIconWrapper, color, fill, reactTheming.SELECTOR_FOCUS_VISIBLE, fgPrimaryActive, $sort === undefined && `
+        ${StyledSortableFillIconWrapper} {
+          opacity: 1;
+          color: ${fgPrimaryActive};
+          fill: ${fgPrimaryActive};
+        }
+
+        ${StyledSortableStrokeIconWrapper} {
+          opacity: 0;
+        }
+      `, $sort === 'asc' && `
+        ${StyledSortableFillIconWrapper} {
+          color: ${fgPrimaryActive};
+          fill: ${fgPrimaryInactive};
+        }
+      `, $sort === 'desc' && `
+        ${StyledSortableFillIconWrapper} {
+          color: ${fgPrimaryInactive};
+          fill: ${fgPrimaryActive};
+        }
+      `, reactTheming.focusStyles({
+    theme
+  }));
+};
 const StyledSortableButton = styled__default.default.button.attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.2',
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '9.0.0-next.21',
   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);
-  } else if (props.sort === 'desc') {
-    return reactTheming.getColor('neutralHue', 400, props.theme);
-  }
-  return undefined;
-}, props => {
-  if (props.sort === 'asc') {
-    return reactTheming.getColor('neutralHue', 400, props.theme);
-  } else if (props.sort === 'desc') {
-    return reactTheming.getColor('neutralHue', 600, props.theme);
-  }
-  return undefined;
-}, reactTheming.SELECTOR_FOCUS_VISIBLE, props => reactTheming.getColor('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)};
-      }
-
-      ${StyledSortableStrokeIconWrapper} {
-        opacity: 0;
-      }
-    `, props => props.sort === 'asc' && `
-      ${StyledSortableFillIconWrapper} {
-        color: ${reactTheming.getColor('primaryHue', 600, props.theme)};
-        fill: ${reactTheming.getColor('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)};
-      }
-    `, props => reactTheming.focusStyles({
-  theme: props.theme
-}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
+})(["position:relative;transition:box-shadow 0.1s ease-in-out;border:none;border-radius:", ";background-color:transparent;cursor:pointer;padding:0;padding-", ":", ";width:", ";text-decoration:none;color:inherit;font-family:inherit;font-size:inherit;font-weight:", ";", "{opacity:", ";}", "{opacity:", ";}&:hover,", "{text-decoration:none;}", " ", ";"], props => props.theme.borderRadii.sm, props => props.theme.rtl ? 'left' : 'right', props => polished.math(`${props.theme.space.base} + ${props.theme.iconSizes.sm}`), props => props.width, props => props.theme.fontWeights.semibold, StyledSortableStrokeIconWrapper, props => props.$sort === undefined && 1, StyledSortableFillIconWrapper, props => props.$sort !== undefined && 1, reactTheming.SELECTOR_FOCUS_VISIBLE, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledSortableButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$1 = 'tables.header_cell';
+const COMPONENT_ID$2 = 'tables.header_cell';
 const truncatedStyling = styled.css(["", "{max-width:100%;overflow:hidden;text-overflow:ellipsis;}"], StyledSortableButton);
-const sizeStyles = props => {
+const sizeStyles$1 = props => {
   let paddingVertical = undefined;
-  if (!props.hasOverflow) {
+  if (!props.$hasOverflow) {
     paddingVertical = polished.math(`(${getRowHeight(props)} - ${getLineHeight(props)}) / 2`);
   }
   return styled.css(["padding-top:", ";padding-bottom:", ";"], paddingVertical, paddingVertical);
 };
 const StyledHeaderCell = styled__default.default(StyledCell).attrs({
   as: 'th',
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledHeaderCell",
   componentId: "sc-fzagoe-0"
 })(["text-align:", ";font-weight:inherit;", " ", " ", ";"], props => {
-  if (!props.hasOverflow) {
+  if (!props.$hasOverflow) {
     if (props.theme.rtl) {
       return 'right';
     }
     return 'left';
   }
   return undefined;
-}, props => sizeStyles(props), props => props.isTruncated && truncatedStyling, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
+}, props => sizeStyles$1(props), props => props.$isTruncated && truncatedStyling, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledHeaderCell.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID = 'tables.hidden_cell';
+const COMPONENT_ID$1 = 'tables.hidden_cell';
 const StyledHiddenCell = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$1,
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledHiddenCell",
   componentId: "sc-1x454xw-0"
-})(["", " ", ";"], polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
+})(["", " ", ";"], polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledHiddenCell.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const Body = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledBody, _extends$3({
+const COMPONENT_ID = 'tables.row';
+const colorStyles = _ref => {
+  let {
+    theme,
+    $isFocused,
+    $isSelected,
+    $isHovered,
+    $isReadOnly
+  } = _ref;
+  const hoveredBackgroundColor = reactTheming.getColor({
+    variable: 'background.primaryEmphasis',
+    transparency: theme.opacity[100],
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const hoveredBorderColor = reactTheming.getColor({
+    variable: 'border.primaryEmphasis',
+    transparency: theme.opacity[200],
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const selectedBackgroundColor = reactTheming.getColor({
+    variable: 'background.primaryEmphasis',
+    transparency: theme.opacity[200],
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const selectedBorderColor = reactTheming.getColor({
+    variable: 'border.primaryEmphasis',
+    light: {
+      offset: -400
+    },
+    dark: {
+      offset: 300
+    },
+    theme
+  });
+  const hoveredSelectedBackgroundColor = reactTheming.getColor({
+    variable: 'background.primaryEmphasis',
+    transparency: theme.opacity[300],
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const boxShadowColor = reactTheming.getColor({
+    variable: 'border.primaryEmphasis',
+    theme
+  });
+  const boxShadow = `inset ${theme.rtl ? '-' : ''}${theme.shadowWidths.md} 0 0 0 ${boxShadowColor}`;
+  let backgroundColor = undefined;
+  let borderColor = undefined;
+  let hoverBorderBottomColor = undefined;
+  let hoverBackgroundColor = undefined;
+  if ($isSelected) {
+    if ($isHovered) {
+      backgroundColor = hoveredSelectedBackgroundColor;
+    } else {
+      backgroundColor = selectedBackgroundColor;
+    }
+    borderColor = selectedBorderColor;
+    hoverBorderBottomColor = selectedBorderColor;
+    hoverBackgroundColor = hoveredSelectedBackgroundColor;
+  } else if ($isHovered) {
+    backgroundColor = hoveredBackgroundColor;
+    borderColor = hoveredBorderColor;
+  } else if (!$isReadOnly) {
+    hoverBorderBottomColor = hoveredBorderColor;
+    hoverBackgroundColor = hoveredBackgroundColor;
+  }
+  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, $isFocused && boxShadow, boxShadow);
+};
+const sizeStyles = props => {
+  return styled.css(["height:", ";"], getRowHeight(props));
+};
+const StyledRow = styled__default.default(StyledBaseRow).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledRow",
+  componentId: "sc-ek66ow-0"
+})(["", " ", " ", ";"], sizeStyles, colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
+StyledRow.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
+};
+
+const Body = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledBody, Object.assign({
   ref: ref
 }, props)));
-Body.displayName = 'Body';
+Body.displayName = 'Table.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';
+Caption.displayName = 'Table.Caption';
 
 const TableContext = React__namespace.default.createContext({
   size: 'medium',
@@ -408,17 +514,23 @@ const useTableContext = () => {
 const Cell = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     hidden,
+    isMinimum,
+    isTruncated,
+    hasOverflow,
     ...props
   } = _ref;
   const {
     size
   } = useTableContext();
-  return React__namespace.default.createElement(StyledCell, _extends$3({
+  return React__namespace.default.createElement(StyledCell, Object.assign({
     ref: ref,
-    size: size
+    $size: size,
+    $isMinimum: isMinimum,
+    $isTruncated: isTruncated,
+    $hasOverflow: hasOverflow
   }, props), hidden && props.children ? React__namespace.default.createElement(StyledHiddenCell, null, props.children) : props.children);
 });
-Cell.displayName = 'Cell';
+Cell.displayName = 'Table.Cell';
 Cell.propTypes = {
   isMinimum: PropTypes__default.default.bool,
   isTruncated: PropTypes__default.default.bool,
@@ -430,48 +542,61 @@ 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
+    $size: size
   }, props));
 });
-GroupRow.displayName = 'GroupRow';
+GroupRow.displayName = 'Table.GroupRow';
 
-const Head = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledHead, _extends$3({
-  ref: ref
-}, props)));
-Head.displayName = 'Head';
+const Head = React.forwardRef((_ref, ref) => {
+  let {
+    isSticky,
+    ...props
+  } = _ref;
+  return React__namespace.default.createElement(StyledHead, Object.assign({
+    ref: ref,
+    $isSticky: isSticky
+  }, props));
+});
+Head.displayName = 'Table.Head';
 
 const HeaderCell = React.forwardRef((_ref, ref) => {
   let {
     hidden,
+    isMinimum,
+    isTruncated,
+    hasOverflow,
     ...props
   } = _ref;
   const {
     size
   } = useTableContext();
-  return React__namespace.default.createElement(StyledHeaderCell, _extends$3({
+  return React__namespace.default.createElement(StyledHeaderCell, Object.assign({
     ref: ref,
-    size: size
+    $size: size,
+    $isMinimum: isMinimum,
+    $isTruncated: isTruncated,
+    $hasOverflow: hasOverflow
   }, props), hidden && props.children ? React__namespace.default.createElement(StyledHiddenCell, null, props.children) : props.children);
 });
-HeaderCell.displayName = 'HeaderCell';
+HeaderCell.displayName = 'Table.HeaderCell';
 HeaderCell.propTypes = Cell.propTypes;
 
 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
+    $size: size
   }, props));
 });
-HeaderRow.displayName = 'HeaderRow';
+HeaderRow.displayName = 'Table.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) {
+var _path$2;
+function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
+var SvgOverflowVerticalStroke = function SvgOverflowVerticalStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
@@ -479,57 +604,33 @@ var SvgOverflowStroke = function SvgOverflowStroke(props) {
     focusable: "false",
     viewBox: "0 0 16 16",
     "aria-hidden": "true"
-  }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
-    fill: "currentColor"
-  }, /*#__PURE__*/React__namespace.createElement("circle", {
-    cx: 2.5,
-    cy: 8,
-    r: 1.5
-  }), /*#__PURE__*/React__namespace.createElement("circle", {
-    cx: 8,
-    cy: 8,
-    r: 1.5
-  }), /*#__PURE__*/React__namespace.createElement("circle", {
-    cx: 13.5,
-    cy: 8,
-    r: 1.5
-  }))));
-};
-
-const OverflowButton = React.forwardRef((_ref, ref) => {
-  let {
-    onFocus,
-    onBlur,
-    isFocused: focused,
-    ...other
-  } = _ref;
-  const [isFocused, setIsFocused] = React.useState(false);
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M9.5 2.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm0 5.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm0 5.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"
+  })));
+};
+
+const OverflowButton = React.forwardRef((props, ref) => {
   const {
     size
   } = useTableContext();
-  return React__namespace.default.createElement(StyledOverflowButton, _extends$3({
-    onFocus: containerUtilities.composeEventHandlers(onFocus, () => {
-      setIsFocused(true);
-    }),
-    onBlur: containerUtilities.composeEventHandlers(onBlur, () => {
-      setIsFocused(false);
-    }),
-    size: size,
-    isFocused: typeof focused === 'undefined' ? isFocused : focused,
+  return React__namespace.default.createElement(StyledOverflowButton, Object.assign({
+    type: "button",
+    $size: size,
     ref: ref
-  }, other), React__namespace.default.createElement(StyledOverflowButtonIconWrapper, null, React__namespace.default.createElement(SvgOverflowStroke, null)));
+  }, props, {
+    focusInset: true
+  }), React__namespace.default.createElement(SvgOverflowVerticalStroke, null));
 });
-OverflowButton.displayName = 'OverflowButton';
-OverflowButton.propTypes = {
-  isHovered: PropTypes__default.default.bool,
-  isActive: PropTypes__default.default.bool,
-  isFocused: PropTypes__default.default.bool
-};
+OverflowButton.displayName = 'Table.OverflowButton';
 
 const Row = React.forwardRef((_ref, ref) => {
   let {
     onFocus,
     onBlur,
+    isSelected,
+    isStriped,
+    isHovered,
     isFocused: focused,
     ...otherProps
   } = _ref;
@@ -553,16 +654,21 @@ 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,
-    isReadOnly: isReadOnly,
-    isFocused: computedFocused,
-    ref: ref
-  }, otherProps));
+    ref: ref,
+    $size: size,
+    $isReadOnly: isReadOnly,
+    $isFocused: computedFocused,
+    $isHovered: isHovered,
+    $isStriped: isStriped,
+    $isSelected: isSelected
+  }, otherProps, {
+    tabIndex: isReadOnly ? undefined : -1
+  }));
 });
-Row.displayName = 'Row';
+Row.displayName = 'Table.Row';
 Row.propTypes = {
   isStriped: PropTypes__default.default.bool,
   isFocused: PropTypes__default.default.bool,
@@ -571,7 +677,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); }
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
 var SvgSortStroke = function SvgSortStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
@@ -589,7 +695,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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgSortFill = function SvgSortFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -612,11 +718,16 @@ const SORT = ['asc', 'desc'];
 const SortableCell = React.forwardRef((_ref, ref) => {
   let {
     sort,
-    cellProps,
+    cellProps = {},
     width,
     children,
-    ...otherProps
+    ...sortableButtonProps
   } = _ref;
+  const {
+    isMinimum,
+    isTruncated,
+    hasOverflow
+  } = cellProps;
   let ariaSortValue = 'none';
   if (sort === 'asc') {
     ariaSortValue = 'ascending';
@@ -624,40 +735,59 @@ 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({
-    sort: sort,
+    width: width,
+    $isMinimum: isMinimum,
+    $isTruncated: isTruncated,
+    $hasOverflow: hasOverflow
+  }, 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))));
+  }, sortableButtonProps), 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.displayName = 'Table.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])
 };
 
-const Table = React__namespace.default.forwardRef((props, ref) => {
+const TableComponent = React__namespace.default.forwardRef((_ref, ref) => {
+  let {
+    isReadOnly,
+    size,
+    ...props
+  } = _ref;
   const tableContextValue = React.useMemo(() => ({
-    size: props.size,
-    isReadOnly: props.isReadOnly
-  }), [props.size, props.isReadOnly]);
+    size: size,
+    isReadOnly: isReadOnly
+  }), [size, 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;