@zendeskgarden/react-tables 9.0.0-next.13 → 9.0.0-next.15

package/dist/esm/styled/StyledHeaderCell.js

@@ -16,7 +16,7 @@ const COMPONENT_ID = 'tables.header_cell';
 const truncatedStyling = css(["", "{max-width:100%;overflow:hidden;text-overflow:ellipsis;}"], StyledSortableButton);
 const sizeStyles = props => {
   let paddingVertical = undefined;
-  if (!props.hasOverflow) {
+  if (!props.$hasOverflow) {
     paddingVertical = math(`(${getRowHeight(props)} - ${getLineHeight(props)}) / 2`);
   }
   return css(["padding-top:", ";padding-bottom:", ";"], paddingVertical, paddingVertical);
@@ -24,19 +24,19 @@ const sizeStyles = props => {
 const StyledHeaderCell = styled(StyledCell).attrs({
   as: 'th',
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.13'
+  'data-garden-version': '9.0.0-next.15'
 }).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 => retrieveComponentStyles(COMPONENT_ID, props));
+}, props => sizeStyles(props), props => props.$isTruncated && truncatedStyling, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledHeaderCell.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/StyledHeaderRow.js

@@ -4,28 +4,41 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
-import { StyledBaseRow } from './StyledRow.js';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { StyledBaseRow } from './StyledBaseRow.js';
 import { StyledOverflowButton } from './StyledOverflowButton.js';
 
 const COMPONENT_ID = '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 = _ref => {
+  let {
+    theme
+  } = _ref;
+  return css(["border-bottom-color:", ";"], getColor({
+    variable: 'border.default',
+    theme
+  }));
+};
+const sizeStyles = props => {
+  const rowHeight = getHeaderRowHeight(props);
+  return css(["height:", ";vertical-align:bottom;", "{margin-top:0;margin-bottom:calc(", " - 1em);}"], rowHeight, StyledOverflowButton, math(`${rowHeight} / 2`));
+};
 const StyledHeaderRow = styled(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.13'
+  'data-garden-version': '9.0.0-next.15'
 }).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 => getColorV8('neutralHue', 300, props.theme), getHeaderRowHeight, props => props.theme.fontWeights.semibold, StyledOverflowButton, props => math(`${getHeaderRowHeight(props)} / 2`), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["font-weight:", ";", " ", " ", "{opacity:1;}", ";"], props => props.theme.fontWeights.semibold, sizeStyles, colorStyles, StyledOverflowButton, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledHeaderRow.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/StyledHiddenCell.js

@@ -11,7 +11,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'tables.hidden_cell';
 const StyledHiddenCell = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.13'
+  'data-garden-version': '9.0.0-next.15'
 }).withConfig({
   displayName: "StyledHiddenCell",
   componentId: "sc-1x454xw-0"

package/dist/esm/styled/StyledOverflowButton.js

@@ -4,48 +4,23 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import { getRowHeight } from './style-utils.js';
+import { IconButton } from '@zendeskgarden/react-buttons';
 
 const COMPONENT_ID = 'tables.overflow_button';
 const OVERFLOW_BUTTON_SIZE = '2em';
-const colorStyles = props => {
-  const hoverBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.08);
-  const hoverForegroundColor = getColorV8('neutralHue', 700, props.theme);
-  const activeBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.2);
-  const activeForegroundColor = getColorV8('neutralHue', 800, props.theme);
-  let foregroundColor;
-  if (props.isHovered) {
-    foregroundColor = hoverForegroundColor;
-  } else if (props.isActive) {
-    foregroundColor = activeForegroundColor;
-  } else {
-    foregroundColor = getColorV8('neutralHue', 600, props.theme);
-  }
-  return css(["color:", ";&:hover{background-color:", ";color:", ";}", " &:active{background-color:", ";color:", ";}"], foregroundColor, hoverBackgroundColor, hoverForegroundColor, focusStyles({
-    theme: props.theme,
-    inset: true
-  }), activeBackgroundColor, activeForegroundColor);
-};
-const StyledOverflowButton = styled.button.attrs({
+const StyledOverflowButton = styled(IconButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.13',
-  type: 'button'
+  'data-garden-version': '9.0.0-next.15'
 }).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 => math(`${getRowHeight(props)} / 2`), OVERFLOW_BUTTON_SIZE, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["margin-top:calc(", " - 1em);width:100%;min-width:unset;height:", ";font-size:inherit;", ";"], props => math(`${getRowHeight(props)} / 2`), OVERFLOW_BUTTON_SIZE, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledOverflowButton.defaultProps = {
   theme: DEFAULT_THEME
 };
-const StyledOverflowButtonIconWrapper = styled.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: DEFAULT_THEME
-};
 
-export { StyledOverflowButton, StyledOverflowButtonIconWrapper };
+export { StyledOverflowButton };

package/dist/esm/styled/StyledRow.js

@@ -5,32 +5,74 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { getColorV8, DEFAULT_THEME, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { StyledCell } from './StyledCell.js';
+import { StyledBaseRow } from './StyledBaseRow.js';
 import { StyledOverflowButton } from './StyledOverflowButton.js';
 import { getRowHeight } from './style-utils.js';
 
 const COMPONENT_ID = 'tables.row';
-const StyledBaseRow = styled.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} ${getColorV8('neutralHue', 200, props.theme)}`, props => props.isStriped && getColorV8('neutralHue', 100, props.theme));
-StyledBaseRow.defaultProps = {
-  theme: DEFAULT_THEME
-};
-const colorStyles = props => {
-  const boxShadow = `inset ${props.theme.rtl ? '-' : ''}${props.theme.shadowWidths.md} 0 0 0 ${getColorV8('primaryHue', 600, props.theme)}`;
-  const hoveredBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.08);
-  const hoveredBorderColor = getColorV8('primaryHue', 200, props.theme);
-  const selectedBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.2);
-  const selectedBorderColor = getColorV8('primaryHue', 300, props.theme);
-  const hoveredSelectedBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.28);
+const colorStyles = _ref => {
+  let {
+    theme,
+    $isFocused,
+    $isSelected,
+    $isHovered,
+    $isReadOnly
+  } = _ref;
+  const hoveredBackgroundColor = getColor({
+    variable: 'background.primaryEmphasis',
+    transparency: theme.opacity[100],
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const hoveredBorderColor = getColor({
+    variable: 'border.primaryEmphasis',
+    transparency: theme.opacity[200],
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const selectedBackgroundColor = getColor({
+    variable: 'background.primaryEmphasis',
+    transparency: theme.opacity[200],
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const selectedBorderColor = getColor({
+    variable: 'border.primaryEmphasis',
+    light: {
+      offset: -400
+    },
+    dark: {
+      offset: 300
+    },
+    theme
+  });
+  const hoveredSelectedBackgroundColor = getColor({
+    variable: 'background.primaryEmphasis',
+    transparency: theme.opacity[300],
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const boxShadowColor = 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 (props.isSelected) {
-    if (props.isHovered) {
+  if ($isSelected) {
+    if ($isHovered) {
       backgroundColor = hoveredSelectedBackgroundColor;
     } else {
       backgroundColor = selectedBackgroundColor;
@@ -38,25 +80,27 @@ const colorStyles = props => {
     borderColor = selectedBorderColor;
     hoverBorderBottomColor = selectedBorderColor;
     hoverBackgroundColor = hoveredSelectedBackgroundColor;
-  } else if (props.isHovered) {
+  } else if ($isHovered) {
     backgroundColor = hoveredBackgroundColor;
     borderColor = hoveredBorderColor;
-  } else if (!props.isReadOnly) {
+  } else if (!$isReadOnly) {
     hoverBorderBottomColor = hoveredBorderColor;
     hoverBackgroundColor = hoveredBackgroundColor;
   }
-  return css(["border-bottom-color:", ";background-color:", ";&:hover{border-bottom-color:", ";background-color:", ";", "{opacity:1;}}&:focus{outline:none;}", ":first-of-type{box-shadow:", ";&:focus{box-shadow:", ";}}"], borderColor, backgroundColor, hoverBorderBottomColor, hoverBackgroundColor, StyledOverflowButton, StyledCell, props.isFocused && boxShadow, boxShadow);
+  return css(["border-bottom-color:", ";background-color:", ";&:hover{border-bottom-color:", ";background-color:", ";", "{opacity:1;}}&:focus{outline:none;}", ":first-of-type{box-shadow:", ";&:focus{box-shadow:", ";}}"], borderColor, backgroundColor, hoverBorderBottomColor, hoverBackgroundColor, StyledOverflowButton, StyledCell, $isFocused && boxShadow, boxShadow);
 };
-const StyledRow = styled(StyledBaseRow).attrs(props => ({
+const sizeStyles = props => {
+  return css(["height:", ";"], getRowHeight(props));
+};
+const StyledRow = styled(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.13',
-  tabIndex: props.isReadOnly ? undefined : -1
-})).withConfig({
+  'data-garden-version': '9.0.0-next.15'
+}).withConfig({
   displayName: "StyledRow",
-  componentId: "sc-ek66ow-1"
-})(["height:", ";", " ", ";"], getRowHeight, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+  componentId: "sc-ek66ow-0"
+})(["", " ", " ", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledRow.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-export { StyledBaseRow, StyledRow };
+export { StyledRow };

package/dist/esm/styled/StyledSortableButton.js

@@ -4,9 +4,9 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { DEFAULT_THEME, getColorV8, SELECTOR_FOCUS_VISIBLE, focusStyles, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { DEFAULT_THEME, SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'tables.sortable';
 const StyledBaseIconWrapper = styled.div.withConfig({
@@ -30,50 +30,73 @@ const StyledSortableFillIconWrapper = styled(StyledBaseIconWrapper).withConfig({
 StyledSortableFillIconWrapper.defaultProps = {
   theme: DEFAULT_THEME
 };
+const colorStyles = _ref => {
+  let {
+    theme,
+    $sort
+  } = _ref;
+  const fgInactive = getColor({
+    variable: 'foreground.subtle',
+    transparency: theme.opacity[200],
+    theme
+  });
+  const fgActive = getColor({
+    variable: 'foreground.subtle',
+    theme
+  });
+  const fgPrimaryActive = getColor({
+    variable: 'foreground.primary',
+    theme
+  });
+  const fgPrimaryInactive = 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 css(["", "{color:", ";fill:", ";}", "{color:", ";fill:", ";}&:hover,", "{color:", ";", ";", " ", "}", ""], StyledSortableStrokeIconWrapper, fgActive, fgActive, StyledSortableFillIconWrapper, color, fill, 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};
+        }
+      `, focusStyles({
+    theme
+  }));
+};
 const StyledSortableButton = styled.button.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.13',
+  'data-garden-version': '9.0.0-next.15',
   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 => 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 getColorV8('neutralHue', 600, props.theme);
-  } else if (props.sort === 'desc') {
-    return getColorV8('neutralHue', 400, props.theme);
-  }
-  return undefined;
-}, props => {
-  if (props.sort === 'asc') {
-    return getColorV8('neutralHue', 400, props.theme);
-  } else if (props.sort === 'desc') {
-    return getColorV8('neutralHue', 600, props.theme);
-  }
-  return undefined;
-}, SELECTOR_FOCUS_VISIBLE, props => getColorV8('primaryHue', 600, props.theme), props => props.sort === undefined && `
-      ${StyledSortableFillIconWrapper} {
-        opacity: 1;
-        color: ${getColorV8('primaryHue', 600, props.theme)};
-        fill: ${getColorV8('primaryHue', 600, props.theme)};
-      }
-
-      ${StyledSortableStrokeIconWrapper} {
-        opacity: 0;
-      }
-    `, props => props.sort === 'asc' && `
-      ${StyledSortableFillIconWrapper} {
-        color: ${getColorV8('primaryHue', 600, props.theme)};
-        fill: ${getColorV8('primaryHue', 600, props.theme, 0.25)};
-      }
-    `, props => props.sort === 'desc' && `
-      ${StyledSortableFillIconWrapper} {
-        color: ${getColorV8('primaryHue', 600, props.theme, 0.25)};
-        fill: ${getColorV8('primaryHue', 600, props.theme)};
-      }
-    `, props => focusStyles({
-  theme: props.theme
-}), props => retrieveComponentStyles(COMPONENT_ID, 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 => 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, SELECTOR_FOCUS_VISIBLE, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledSortableButton.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/StyledTable.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'tables.table';
 const getLineHeight = props => {
@@ -13,11 +13,14 @@ const getLineHeight = props => {
 };
 const StyledTable = styled.table.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.13'
+  'data-garden-version': '9.0.0-next.15'
 }).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 => getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID, 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 => getColor({
+  variable: 'foreground.default',
+  theme: props.theme
+}), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledTable.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/style-utils.js

@@ -5,9 +5,9 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 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`;