@zendeskgarden/react-tabs 9.0.0-next.6 → 9.0.0-next.8

package/dist/esm/elements/Tab.js

@@ -0,0 +1,48 @@
+/**
+* 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.
+*/
+import React from 'react';
+import PropTypes from 'prop-types';
+import { mergeRefs } from 'react-merge-refs';
+import { StyledTab } from '../styled/StyledTab.js';
+import '../styled/StyledTabList.js';
+import '../styled/StyledTabPanel.js';
+import '../styled/StyledTabs.js';
+import { useTabsContext } from '../utils/useTabsContext.js';
+
+const Tab = React.forwardRef((_ref, ref) => {
+  let {
+    disabled,
+    item,
+    ...otherProps
+  } = _ref;
+  const tabsPropGetters = useTabsContext();
+  if (disabled || !tabsPropGetters) {
+    return React.createElement(StyledTab, Object.assign({
+      role: "tab",
+      "aria-disabled": disabled,
+      ref: ref
+    }, otherProps));
+  }
+  const {
+    ref: tabRef,
+    ...tabProps
+  } = tabsPropGetters.getTabProps({
+    value: item
+  });
+  return React.createElement(StyledTab, Object.assign({
+    isSelected: item === tabsPropGetters.selectedValue
+  }, tabProps, otherProps, {
+    ref: mergeRefs([tabRef, ref])
+  }));
+});
+Tab.displayName = 'Tab';
+Tab.propTypes = {
+  disabled: PropTypes.bool,
+  item: PropTypes.any
+};
+
+export { Tab };

package/dist/esm/elements/TabList.js

@@ -0,0 +1,28 @@
+/**
+* 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.
+*/
+import React from 'react';
+import '../styled/StyledTab.js';
+import { StyledTabList } from '../styled/StyledTabList.js';
+import '../styled/StyledTabPanel.js';
+import '../styled/StyledTabs.js';
+import { useTabsContext } from '../utils/useTabsContext.js';
+
+const TabList = React.forwardRef((props, ref) => {
+  const tabsPropGetters = useTabsContext();
+  if (!tabsPropGetters) {
+    return React.createElement(StyledTabList, Object.assign({
+      ref: ref
+    }, props));
+  }
+  const tabListProps = tabsPropGetters.getTabListProps();
+  return React.createElement(StyledTabList, Object.assign({}, tabListProps, props, {
+    ref: ref
+  }));
+});
+TabList.displayName = 'TabList';
+
+export { TabList };

package/dist/esm/elements/TabPanel.js

@@ -0,0 +1,40 @@
+/**
+* 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.
+*/
+import React from 'react';
+import PropTypes from 'prop-types';
+import '../styled/StyledTab.js';
+import '../styled/StyledTabList.js';
+import { StyledTabPanel } from '../styled/StyledTabPanel.js';
+import '../styled/StyledTabs.js';
+import { useTabsContext } from '../utils/useTabsContext.js';
+
+const TabPanel = React.forwardRef((_ref, ref) => {
+  let {
+    item,
+    ...otherProps
+  } = _ref;
+  const tabsPropGetters = useTabsContext();
+  if (!tabsPropGetters) {
+    return React.createElement(StyledTabPanel, Object.assign({
+      ref: ref
+    }, otherProps));
+  }
+  const tabPanelProps = tabsPropGetters.getTabPanelProps({
+    value: item
+  });
+  return React.createElement(StyledTabPanel, Object.assign({
+    "aria-hidden": tabsPropGetters.selectedValue !== item
+  }, tabPanelProps, otherProps, {
+    ref: ref
+  }));
+});
+TabPanel.displayName = 'TabPanel';
+TabPanel.propTypes = {
+  item: PropTypes.any
+};
+
+export { TabPanel };

package/dist/esm/elements/Tabs.js

@@ -0,0 +1,68 @@
+/**
+* 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.
+*/
+import React, { forwardRef, useContext, useState, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { ThemeContext } from 'styled-components';
+import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { useTabs } from '@zendeskgarden/container-tabs';
+import { getControlledValue } from '@zendeskgarden/container-utilities';
+import { toTabs } from '../utils/toTabs.js';
+import { TabsContext } from '../utils/useTabsContext.js';
+import { StyledTabs } from '../styled/StyledTabs.js';
+import { Tab } from './Tab.js';
+import { TabList } from './TabList.js';
+import { TabPanel } from './TabPanel.js';
+
+const TabsComponent = forwardRef((_ref, ref) => {
+  let {
+    isVertical,
+    children,
+    onChange,
+    selectedItem: controlledSelectedItem,
+    ...otherProps
+  } = _ref;
+  const theme = useContext(ThemeContext) || DEFAULT_THEME;
+  const [internalSelectedItem, setInternalSelectedItem] = useState();
+  const selectedItem = getControlledValue(controlledSelectedItem, internalSelectedItem);
+  const tabs = useMemo(() => toTabs(children), [children]);
+  const tabsContextValue = useTabs({
+    tabs,
+    rtl: theme.rtl,
+    orientation: isVertical ? 'vertical' : 'horizontal',
+    selectedValue: selectedItem,
+    defaultSelectedValue: tabs.find(tab => !tab.disabled)?.value,
+    onSelect: item => {
+      if (onChange) {
+        onChange(item);
+      } else {
+        setInternalSelectedItem(item);
+      }
+    }
+  });
+  return React.createElement(TabsContext.Provider, {
+    value: tabsContextValue
+  }, React.createElement(StyledTabs, Object.assign({
+    isVertical: isVertical
+  }, otherProps, {
+    ref: ref
+  }), children));
+});
+TabsComponent.propTypes = {
+  isVertical: PropTypes.bool,
+  selectedItem: PropTypes.any,
+  onChange: PropTypes.func
+};
+TabsComponent.defaultProps = {
+  isVertical: false
+};
+TabsComponent.displayName = 'Tabs';
+const Tabs = TabsComponent;
+Tabs.Tab = Tab;
+Tabs.TabList = TabList;
+Tabs.TabPanel = TabPanel;
+
+export { Tabs, TabsComponent };

package/dist/esm/index.js

@@ -0,0 +1,10 @@
+/**
+* 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.
+*/
+export { Tab } from './elements/Tab.js';
+export { TabList } from './elements/TabList.js';
+export { TabPanel } from './elements/TabPanel.js';
+export { Tabs } from './elements/Tabs.js';

package/dist/esm/styled/StyledTab.js

@@ -0,0 +1,49 @@
+/**
+* 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.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles } from '@zendeskgarden/react-theming';
+import { stripUnit } from 'polished';
+
+const COMPONENT_ID = 'tabs.tab';
+const colorStyles = _ref => {
+  let {
+    theme,
+    isSelected
+  } = _ref;
+  const selectedColor = getColorV8('primaryHue', 600, theme);
+  return css(["border-color:", ";color:", ";&:hover{color:", ";}", " &:active{border-color:currentcolor;color:", ";}&[aria-disabled='true']{border-color:transparent;color:", ";}"], isSelected && 'currentcolor !important', isSelected ? selectedColor : 'inherit', selectedColor, focusStyles({
+    theme,
+    inset: true,
+    spacerWidth: null,
+    shadowWidth: 'sm',
+    selector: '&:focus-visible::before',
+    styles: {
+      color: selectedColor
+    }
+  }), selectedColor, props => getColorV8('neutralHue', 400, props.theme));
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  const paddingTop = theme.space.base * 2.5;
+  const paddingHorizontal = theme.space.base * 7;
+  const paddingBottom = paddingTop - stripUnit(theme.borderWidths.md) - stripUnit(theme.borderWidths.sm);
+  return css(["padding:", "px ", "px ", "px;"], paddingTop, paddingHorizontal, paddingBottom);
+};
+const StyledTab = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledTab",
+  componentId: "sc-x2pbow-0"
+})(["display:inline-block;position:relative;transition:color 0.25s ease-in-out;border-bottom:", " transparent;border-width:", ";cursor:pointer;overflow:hidden;vertical-align:top;user-select:none;text-align:center;text-decoration:none;text-overflow:ellipsis;", " ", " &:focus{text-decoration:none;}&::before{transition:box-shadow 0.1s ease-in-out;content:'';}&:focus-visible::before{position:absolute;top:", "px;right:", "px;left:", "px;border-radius:", ";height:", "px;pointer-events:none;}&:active::before{box-shadow:none;}&[aria-disabled='true']{cursor:default;}", ";"], props => props.theme.borderStyles.solid, props => props.theme.borderWidths.md, sizeStyles, colorStyles, props => props.theme.space.base * 2.5, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.theme.borderRadii.md, props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTab.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTab };

package/dist/esm/styled/StyledTabList.js

@@ -0,0 +1,22 @@
+/**
+* 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.
+*/
+import styled from 'styled-components';
+import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'tabs.tablist';
+const StyledTabList = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledTabList",
+  componentId: "sc-wa5aaj-0"
+})(["display:block;margin-top:0;margin-bottom:", "px;border-bottom:", " ", " ", ";padding:0;line-height:", "px;white-space:nowrap;color:", ";font-size:", ";", ";"], props => props.theme.space.base * 5, props => props.theme.borderWidths.sm, props => props.theme.borderStyles.solid, props => getColorV8('neutralHue', 300, props.theme), props => props.theme.space.base * 5, props => getColorV8('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTabList.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTabList };

package/dist/esm/styled/StyledTabPanel.js

@@ -0,0 +1,22 @@
+/**
+* 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.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'tabs.tabpanel';
+const StyledTabPanel = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledTabPanel",
+  componentId: "sc-7lhrmp-0"
+})(["display:block;&[aria-hidden='true']{display:none;}", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTabPanel.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTabPanel };

package/dist/esm/styled/StyledTabs.js

@@ -0,0 +1,31 @@
+/**
+* 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.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledTab } from './StyledTab.js';
+import { StyledTabPanel } from './StyledTabPanel.js';
+import { StyledTabList } from './StyledTabList.js';
+
+const COMPONENT_ID = 'tabs.tabs';
+const verticalStyling = _ref => {
+  let {
+    theme
+  } = _ref;
+  return css(["display:table;", "{display:table-cell;margin-bottom:0;border-bottom:none;vertical-align:top;}", "{display:block;margin-bottom:", "px;margin-left:", ";border-left:", ";border-bottom-style:none;border-", "-style:", ";border-", "-color:transparent;padding:", "px ", "px;text-align:", ";&:last-of-type{margin-bottom:0;}&:focus-visible::before{top:", "px;right:", "px;left:", "px;}}", "{margin-", ":", "px;vertical-align:top;}"], StyledTabList, StyledTab, theme.space.base * 5, theme.rtl && '0', theme.rtl && '0', theme.rtl ? 'right' : 'left', theme.borderStyles.solid, theme.rtl ? 'right' : 'left', theme.space.base, theme.space.base * 2, theme.rtl ? 'right' : 'left', theme.space.base, theme.space.base, theme.space.base, StyledTabPanel, theme.rtl ? 'right' : 'left', theme.space.base * 8);
+};
+const StyledTabs = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledTabs",
+  componentId: "sc-1qaor65-0"
+})(["display:block;overflow:hidden;direction:", ";", ";", ";"], props => props.theme.rtl && 'rtl', props => props.isVertical && verticalStyling(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTabs.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTabs };

package/dist/esm/utils/toTabs.js

@@ -0,0 +1,26 @@
+/**
+* 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.
+*/
+import { Children, isValidElement } from 'react';
+
+const toTabs = children => Children.toArray(children).reduce((_items, child) => {
+  const retVal = _items;
+  if ( isValidElement(child)) {
+    if ('item' in child.props) {
+      const props = child.props;
+      retVal.push({
+        value: props.item,
+        disabled: props.disabled
+      });
+    } else {
+      const childItems = toTabs(child.props.children);
+      retVal.push(...childItems);
+    }
+  }
+  return retVal;
+}, []);
+
+export { toTabs };

package/dist/esm/utils/useTabsContext.js

@@ -0,0 +1,14 @@
+/**
+* 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.
+*/
+import { createContext, useContext } from 'react';
+
+const TabsContext = createContext(undefined);
+const useTabsContext = () => {
+  return useContext(TabsContext);
+};
+
+export { TabsContext, useTabsContext };

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');
@@ -22,21 +21,6 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
-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);
-}
-
 const COMPONENT_ID$3 = 'tabs.tab';
 const colorStyles = _ref => {
   let {
@@ -49,7 +33,7 @@ const colorStyles = _ref => {
     inset: true,
     spacerWidth: null,
     shadowWidth: 'sm',
-    selector: '&:focus-visible::before, &[data-garden-focus-visible="true"]::before',
+    selector: '&:focus-visible::before',
     styles: {
       color: selectedColor
     }
@@ -66,11 +50,11 @@ const sizeStyles = _ref2 => {
 };
 const StyledTab = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledTab",
   componentId: "sc-x2pbow-0"
-})(["display:inline-block;position:relative;transition:color 0.25s ease-in-out;border-bottom:", " transparent;border-width:", ";cursor:pointer;overflow:hidden;vertical-align:top;user-select:none;text-align:center;text-decoration:none;text-overflow:ellipsis;", " ", " &:focus{text-decoration:none;}&::before{transition:box-shadow 0.1s ease-in-out;content:'';}&:focus-visible::before,&[data-garden-focus-visible]::before{position:absolute;top:", "px;right:", "px;left:", "px;border-radius:", ";height:", "px;pointer-events:none;}&:active::before{box-shadow:none;}&[aria-disabled='true']{cursor:default;}", ";"], props => props.theme.borderStyles.solid, props => props.theme.borderWidths.md, sizeStyles, colorStyles, props => props.theme.space.base * 2.5, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.theme.borderRadii.md, props => props.theme.space.base * 5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["display:inline-block;position:relative;transition:color 0.25s ease-in-out;border-bottom:", " transparent;border-width:", ";cursor:pointer;overflow:hidden;vertical-align:top;user-select:none;text-align:center;text-decoration:none;text-overflow:ellipsis;", " ", " &:focus{text-decoration:none;}&::before{transition:box-shadow 0.1s ease-in-out;content:'';}&:focus-visible::before{position:absolute;top:", "px;right:", "px;left:", "px;border-radius:", ";height:", "px;pointer-events:none;}&:active::before{box-shadow:none;}&[aria-disabled='true']{cursor:default;}", ";"], props => props.theme.borderStyles.solid, props => props.theme.borderWidths.md, sizeStyles, colorStyles, props => props.theme.space.base * 2.5, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.theme.borderRadii.md, props => props.theme.space.base * 5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledTab.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -78,7 +62,7 @@ StyledTab.defaultProps = {
 const COMPONENT_ID$2 = 'tabs.tablist';
 const StyledTabList = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledTabList",
   componentId: "sc-wa5aaj-0"
@@ -90,7 +74,7 @@ StyledTabList.defaultProps = {
 const COMPONENT_ID$1 = 'tabs.tabpanel';
 const StyledTabPanel = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledTabPanel",
   componentId: "sc-7lhrmp-0"
@@ -104,11 +88,11 @@ const verticalStyling = _ref => {
   let {
     theme
   } = _ref;
-  return styled.css(["display:table;", "{display:table-cell;margin-bottom:0;border-bottom:none;vertical-align:top;}", "{display:block;margin-bottom:", "px;margin-left:", ";border-left:", ";border-bottom-style:none;border-", "-style:", ";border-", "-color:transparent;padding:", "px ", "px;text-align:", ";&:last-of-type{margin-bottom:0;}&:focus-visible::before,&[data-garden-focus-visible]::before{top:", "px;right:", "px;left:", "px;}}", "{margin-", ":", "px;vertical-align:top;}"], StyledTabList, StyledTab, theme.space.base * 5, theme.rtl && '0', theme.rtl && '0', theme.rtl ? 'right' : 'left', theme.borderStyles.solid, theme.rtl ? 'right' : 'left', theme.space.base, theme.space.base * 2, theme.rtl ? 'right' : 'left', theme.space.base, theme.space.base, theme.space.base, StyledTabPanel, theme.rtl ? 'right' : 'left', theme.space.base * 8);
+  return styled.css(["display:table;", "{display:table-cell;margin-bottom:0;border-bottom:none;vertical-align:top;}", "{display:block;margin-bottom:", "px;margin-left:", ";border-left:", ";border-bottom-style:none;border-", "-style:", ";border-", "-color:transparent;padding:", "px ", "px;text-align:", ";&:last-of-type{margin-bottom:0;}&:focus-visible::before{top:", "px;right:", "px;left:", "px;}}", "{margin-", ":", "px;vertical-align:top;}"], StyledTabList, StyledTab, theme.space.base * 5, theme.rtl && '0', theme.rtl && '0', theme.rtl ? 'right' : 'left', theme.borderStyles.solid, theme.rtl ? 'right' : 'left', theme.space.base, theme.space.base * 2, theme.rtl ? 'right' : 'left', theme.space.base, theme.space.base, theme.space.base, StyledTabPanel, theme.rtl ? 'right' : 'left', theme.space.base * 8);
 };
 const StyledTabs = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledTabs",
   componentId: "sc-1qaor65-0"
@@ -130,7 +114,7 @@ const Tab = React__default.default.forwardRef((_ref, ref) => {
   } = _ref;
   const tabsPropGetters = useTabsContext();
   if (disabled || !tabsPropGetters) {
-    return React__default.default.createElement(StyledTab, _extends({
+    return React__default.default.createElement(StyledTab, Object.assign({
       role: "tab",
       "aria-disabled": disabled,
       ref: ref
@@ -142,7 +126,7 @@ const Tab = React__default.default.forwardRef((_ref, ref) => {
   } = tabsPropGetters.getTabProps({
     value: item
   });
-  return React__default.default.createElement(StyledTab, _extends({
+  return React__default.default.createElement(StyledTab, Object.assign({
     isSelected: item === tabsPropGetters.selectedValue
   }, tabProps, otherProps, {
     ref: reactMergeRefs.mergeRefs([tabRef, ref])
@@ -157,12 +141,12 @@ Tab.propTypes = {
 const TabList = React__default.default.forwardRef((props, ref) => {
   const tabsPropGetters = useTabsContext();
   if (!tabsPropGetters) {
-    return React__default.default.createElement(StyledTabList, _extends({
+    return React__default.default.createElement(StyledTabList, Object.assign({
       ref: ref
     }, props));
   }
   const tabListProps = tabsPropGetters.getTabListProps();
-  return React__default.default.createElement(StyledTabList, _extends({}, tabListProps, props, {
+  return React__default.default.createElement(StyledTabList, Object.assign({}, tabListProps, props, {
     ref: ref
   }));
 });
@@ -175,14 +159,14 @@ const TabPanel = React__default.default.forwardRef((_ref, ref) => {
   } = _ref;
   const tabsPropGetters = useTabsContext();
   if (!tabsPropGetters) {
-    return React__default.default.createElement(StyledTabPanel, _extends({
+    return React__default.default.createElement(StyledTabPanel, Object.assign({
       ref: ref
     }, otherProps));
   }
   const tabPanelProps = tabsPropGetters.getTabPanelProps({
     value: item
   });
-  return React__default.default.createElement(StyledTabPanel, _extends({
+  return React__default.default.createElement(StyledTabPanel, Object.assign({
     "aria-hidden": tabsPropGetters.selectedValue !== item
   }, tabPanelProps, otherProps, {
     ref: ref
@@ -238,7 +222,7 @@ const TabsComponent = React.forwardRef((_ref, ref) => {
   });
   return React__default.default.createElement(TabsContext.Provider, {
     value: tabsContextValue
-  }, React__default.default.createElement(StyledTabs, _extends({
+  }, React__default.default.createElement(StyledTabs, Object.assign({
     isVertical: isVertical
   }, otherProps, {
     ref: ref

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-tabs",
-  "version": "9.0.0-next.6",
+  "version": "9.0.0-next.8",
   "description": "Components and render prop containers relating to 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"
   ],
@@ -28,13 +28,13 @@
     "react-merge-refs": "^2.0.0"
   },
   "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": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.6"
+    "@zendeskgarden/react-theming": "^9.0.0-next.8"
   },
   "keywords": [
     "components",
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "45c56ad1c73af40afba8e5415f529a2c9601c83f"
+  "gitHead": "a3d6534843d5a4f5cb60b52bc67264f3230f2da0"
 }

package/dist/index.esm.js

@@ -1,253 +0,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.
- */
-
-import React, { createContext, useContext, Children, isValidElement, forwardRef, useState, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { mergeRefs } from 'react-merge-refs';
-import styled, { css, ThemeContext } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles } from '@zendeskgarden/react-theming';
-import { stripUnit } from 'polished';
-import { useTabs } from '@zendeskgarden/container-tabs';
-import { getControlledValue } from '@zendeskgarden/container-utilities';
-
-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);
-}
-
-const COMPONENT_ID$3 = 'tabs.tab';
-const colorStyles = _ref => {
-  let {
-    theme,
-    isSelected
-  } = _ref;
-  const selectedColor = getColorV8('primaryHue', 600, theme);
-  return css(["border-color:", ";color:", ";&:hover{color:", ";}", " &:active{border-color:currentcolor;color:", ";}&[aria-disabled='true']{border-color:transparent;color:", ";}"], isSelected && 'currentcolor !important', isSelected ? selectedColor : 'inherit', selectedColor, focusStyles({
-    theme,
-    inset: true,
-    spacerWidth: null,
-    shadowWidth: 'sm',
-    selector: '&:focus-visible::before, &[data-garden-focus-visible="true"]::before',
-    styles: {
-      color: selectedColor
-    }
-  }), selectedColor, props => getColorV8('neutralHue', 400, props.theme));
-};
-const sizeStyles = _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  const paddingTop = theme.space.base * 2.5;
-  const paddingHorizontal = theme.space.base * 7;
-  const paddingBottom = paddingTop - stripUnit(theme.borderWidths.md) - stripUnit(theme.borderWidths.sm);
-  return css(["padding:", "px ", "px ", "px;"], paddingTop, paddingHorizontal, paddingBottom);
-};
-const StyledTab = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledTab",
-  componentId: "sc-x2pbow-0"
-})(["display:inline-block;position:relative;transition:color 0.25s ease-in-out;border-bottom:", " transparent;border-width:", ";cursor:pointer;overflow:hidden;vertical-align:top;user-select:none;text-align:center;text-decoration:none;text-overflow:ellipsis;", " ", " &:focus{text-decoration:none;}&::before{transition:box-shadow 0.1s ease-in-out;content:'';}&:focus-visible::before,&[data-garden-focus-visible]::before{position:absolute;top:", "px;right:", "px;left:", "px;border-radius:", ";height:", "px;pointer-events:none;}&:active::before{box-shadow:none;}&[aria-disabled='true']{cursor:default;}", ";"], props => props.theme.borderStyles.solid, props => props.theme.borderWidths.md, sizeStyles, colorStyles, props => props.theme.space.base * 2.5, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.theme.borderRadii.md, props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID$3, props));
-StyledTab.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$2 = 'tabs.tablist';
-const StyledTabList = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledTabList",
-  componentId: "sc-wa5aaj-0"
-})(["display:block;margin-top:0;margin-bottom:", "px;border-bottom:", " ", " ", ";padding:0;line-height:", "px;white-space:nowrap;color:", ";font-size:", ";", ";"], props => props.theme.space.base * 5, props => props.theme.borderWidths.sm, props => props.theme.borderStyles.solid, props => getColorV8('neutralHue', 300, props.theme), props => props.theme.space.base * 5, props => getColorV8('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledTabList.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$1 = 'tabs.tabpanel';
-const StyledTabPanel = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledTabPanel",
-  componentId: "sc-7lhrmp-0"
-})(["display:block;&[aria-hidden='true']{display:none;}", ";"], props => retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledTabPanel.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID = 'tabs.tabs';
-const verticalStyling = _ref => {
-  let {
-    theme
-  } = _ref;
-  return css(["display:table;", "{display:table-cell;margin-bottom:0;border-bottom:none;vertical-align:top;}", "{display:block;margin-bottom:", "px;margin-left:", ";border-left:", ";border-bottom-style:none;border-", "-style:", ";border-", "-color:transparent;padding:", "px ", "px;text-align:", ";&:last-of-type{margin-bottom:0;}&:focus-visible::before,&[data-garden-focus-visible]::before{top:", "px;right:", "px;left:", "px;}}", "{margin-", ":", "px;vertical-align:top;}"], StyledTabList, StyledTab, theme.space.base * 5, theme.rtl && '0', theme.rtl && '0', theme.rtl ? 'right' : 'left', theme.borderStyles.solid, theme.rtl ? 'right' : 'left', theme.space.base, theme.space.base * 2, theme.rtl ? 'right' : 'left', theme.space.base, theme.space.base, theme.space.base, StyledTabPanel, theme.rtl ? 'right' : 'left', theme.space.base * 8);
-};
-const StyledTabs = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledTabs",
-  componentId: "sc-1qaor65-0"
-})(["display:block;overflow:hidden;direction:", ";", ";", ";"], props => props.theme.rtl && 'rtl', props => props.isVertical && verticalStyling(props), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledTabs.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const TabsContext = createContext(undefined);
-const useTabsContext = () => {
-  return useContext(TabsContext);
-};
-
-const Tab = React.forwardRef((_ref, ref) => {
-  let {
-    disabled,
-    item,
-    ...otherProps
-  } = _ref;
-  const tabsPropGetters = useTabsContext();
-  if (disabled || !tabsPropGetters) {
-    return React.createElement(StyledTab, _extends({
-      role: "tab",
-      "aria-disabled": disabled,
-      ref: ref
-    }, otherProps));
-  }
-  const {
-    ref: tabRef,
-    ...tabProps
-  } = tabsPropGetters.getTabProps({
-    value: item
-  });
-  return React.createElement(StyledTab, _extends({
-    isSelected: item === tabsPropGetters.selectedValue
-  }, tabProps, otherProps, {
-    ref: mergeRefs([tabRef, ref])
-  }));
-});
-Tab.displayName = 'Tab';
-Tab.propTypes = {
-  disabled: PropTypes.bool,
-  item: PropTypes.any
-};
-
-const TabList = React.forwardRef((props, ref) => {
-  const tabsPropGetters = useTabsContext();
-  if (!tabsPropGetters) {
-    return React.createElement(StyledTabList, _extends({
-      ref: ref
-    }, props));
-  }
-  const tabListProps = tabsPropGetters.getTabListProps();
-  return React.createElement(StyledTabList, _extends({}, tabListProps, props, {
-    ref: ref
-  }));
-});
-TabList.displayName = 'TabList';
-
-const TabPanel = React.forwardRef((_ref, ref) => {
-  let {
-    item,
-    ...otherProps
-  } = _ref;
-  const tabsPropGetters = useTabsContext();
-  if (!tabsPropGetters) {
-    return React.createElement(StyledTabPanel, _extends({
-      ref: ref
-    }, otherProps));
-  }
-  const tabPanelProps = tabsPropGetters.getTabPanelProps({
-    value: item
-  });
-  return React.createElement(StyledTabPanel, _extends({
-    "aria-hidden": tabsPropGetters.selectedValue !== item
-  }, tabPanelProps, otherProps, {
-    ref: ref
-  }));
-});
-TabPanel.displayName = 'TabPanel';
-TabPanel.propTypes = {
-  item: PropTypes.any
-};
-
-const toTabs = children => Children.toArray(children).reduce((_items, child) => {
-  const retVal = _items;
-  if ( isValidElement(child)) {
-    if ('item' in child.props) {
-      const props = child.props;
-      retVal.push({
-        value: props.item,
-        disabled: props.disabled
-      });
-    } else {
-      const childItems = toTabs(child.props.children);
-      retVal.push(...childItems);
-    }
-  }
-  return retVal;
-}, []);
-
-const TabsComponent = forwardRef((_ref, ref) => {
-  let {
-    isVertical,
-    children,
-    onChange,
-    selectedItem: controlledSelectedItem,
-    ...otherProps
-  } = _ref;
-  const theme = useContext(ThemeContext) || DEFAULT_THEME;
-  const [internalSelectedItem, setInternalSelectedItem] = useState();
-  const selectedItem = getControlledValue(controlledSelectedItem, internalSelectedItem);
-  const tabs = useMemo(() => toTabs(children), [children]);
-  const tabsContextValue = useTabs({
-    tabs,
-    rtl: theme.rtl,
-    orientation: isVertical ? 'vertical' : 'horizontal',
-    selectedValue: selectedItem,
-    defaultSelectedValue: tabs.find(tab => !tab.disabled)?.value,
-    onSelect: item => {
-      if (onChange) {
-        onChange(item);
-      } else {
-        setInternalSelectedItem(item);
-      }
-    }
-  });
-  return React.createElement(TabsContext.Provider, {
-    value: tabsContextValue
-  }, React.createElement(StyledTabs, _extends({
-    isVertical: isVertical
-  }, otherProps, {
-    ref: ref
-  }), children));
-});
-TabsComponent.propTypes = {
-  isVertical: PropTypes.bool,
-  selectedItem: PropTypes.any,
-  onChange: PropTypes.func
-};
-TabsComponent.defaultProps = {
-  isVertical: false
-};
-TabsComponent.displayName = 'Tabs';
-const Tabs = TabsComponent;
-Tabs.Tab = Tab;
-Tabs.TabList = TabList;
-Tabs.TabPanel = TabPanel;
-
-export { Tab, TabList, TabPanel, Tabs };