@zendeskgarden/react-tables 9.0.0-next.8 → 9.0.0

package/dist/esm/styled/StyledHiddenCell.js

@@ -6,18 +6,15 @@
 */
 import styled from 'styled-components';
 import { hideVisually } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'tables.hidden_cell';
 const StyledHiddenCell = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledHiddenCell",
   componentId: "sc-1x454xw-0"
 })(["", " ", ";"], hideVisually(), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledHiddenCell.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledHiddenCell };

package/dist/esm/styled/StyledOverflowButton.js

@@ -4,48 +4,20 @@
 * 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 } 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.8',
-  type: 'button'
+  'data-garden-version': '9.0.0'
 }).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));
-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
-};
+})(["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));
 
-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, 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,24 @@ 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 sizeStyles = props => {
+  return css(["height:", ";"], getRowHeight(props));
 };
-const StyledRow = styled(StyledBaseRow).attrs(props => ({
+const StyledRow = styled(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8',
-  tabIndex: props.isReadOnly ? undefined : -1
-})).withConfig({
+  'data-garden-version': '9.0.0'
+}).withConfig({
   displayName: "StyledRow",
-  componentId: "sc-ek66ow-1"
-})(["height:", ";", " ", ";"], getRowHeight, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledRow.defaultProps = {
-  theme: DEFAULT_THEME
-};
+  componentId: "sc-ek66ow-0"
+})(["", " ", " ", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
-export { StyledBaseRow, StyledRow };
+export { StyledRow };

package/dist/esm/styled/StyledSortableButton.js

@@ -4,78 +4,89 @@
 * 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 { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'tables.sortable';
 const StyledBaseIconWrapper = styled.div.withConfig({
   displayName: "StyledSortableButton__StyledBaseIconWrapper",
   componentId: "sc-2s1dli-0"
 })(["display:flex;position:absolute;top:0;", ":0;align-items:center;justify-content:center;opacity:0;width:", ";height:100%;color:inherit;fill:inherit;"], props => props.theme.rtl ? 'left' : 'right', props => props.theme.iconSizes.sm);
-StyledBaseIconWrapper.defaultProps = {
-  theme: DEFAULT_THEME
-};
 const StyledSortableStrokeIconWrapper = styled(StyledBaseIconWrapper).withConfig({
   displayName: "StyledSortableButton__StyledSortableStrokeIconWrapper",
   componentId: "sc-2s1dli-1"
 })([""]);
-StyledSortableStrokeIconWrapper.defaultProps = {
-  theme: DEFAULT_THEME
-};
 const StyledSortableFillIconWrapper = styled(StyledBaseIconWrapper).withConfig({
   displayName: "StyledSortableButton__StyledSortableFillIconWrapper",
   componentId: "sc-2s1dli-2"
 })([""]);
-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.8',
+  'data-garden-version': '9.0.0',
   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));
-StyledSortableButton.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["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));
 
 export { StyledSortableButton, StyledSortableFillIconWrapper, StyledSortableStrokeIconWrapper };

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 } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'tables.table';
 const getLineHeight = props => {
@@ -13,13 +13,13 @@ const getLineHeight = props => {
 };
 const StyledTable = styled.table.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0'
 }).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));
-StyledTable.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["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));
 
 export { StyledTable, getLineHeight };

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`;