@zendeskgarden/react-tabs 9.0.0-next.3 → 9.0.0-next.5

package/README.md

@@ -17,7 +17,7 @@ npm install react react-dom styled-components @zendeskgarden/react-theming
 ```jsx
 import React, { useState } from 'react';
 import { ThemeProvider } from '@zendeskgarden/react-theming';
-import { Tabs, TabList, Tab, TabPanel } from '@zendeskgarden/react-tabs';
+import { Tabs } from '@zendeskgarden/react-tabs';
 
 const Example = () => {
   const [selectedTab, setSelectedTab] = useState('tab-1');
@@ -28,15 +28,15 @@ const Example = () => {
   return (
     <ThemeProvider>
       <Tabs selectedItem={selectedTab} onChange={setSelectedTab}>
-        <TabList>
-          <Tab item="tab-1">Tab 1</Tab>
-          <Tab item="tab-2">Tab 2</Tab>
-          <Tab disabled>Disabled Tab</Tab>
-          <Tab item="tab-3">Tab 3</Tab>
-        </TabList>
-        <TabPanel item="tab-1">Tab 1 content</TabPanel>
-        <TabPanel item="tab-2">Tab 2 content</TabPanel>
-        <TabPanel item="tab-3">Tab 3 content</TabPanel>
+        <Tabs.TabList>
+          <Tabs.Tab item="tab-1">Tab 1</Tabs.Tab>
+          <Tabs.Tab item="tab-2">Tab 2</Tabs.Tab>
+          <Tabs.Tab disabled>Disabled Tab</Tabs.Tab>
+          <Tabs.Tab item="tab-3">Tab 3</Tabs.Tab>
+        </Tabs.TabList>
+        <Tabs.TabPanel item="tab-1">Tab 1 content</Tabs.TabPanel>
+        <Tabs.TabPanel item="tab-2">Tab 2 content</Tabs.TabPanel>
+        <Tabs.TabPanel item="tab-3">Tab 3 content</Tabs.TabPanel>
       </Tabs>
     </ThemeProvider>
   );

package/dist/index.cjs.js

@@ -43,7 +43,7 @@ const colorStyles = _ref => {
     theme,
     isSelected
   } = _ref;
-  const selectedColor = reactTheming.getColor('primaryHue', 600, theme);
+  const selectedColor = reactTheming.getColorV8('primaryHue', 600, theme);
   return styled.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, reactTheming.focusStyles({
     theme,
     inset: true,
@@ -53,7 +53,7 @@ const colorStyles = _ref => {
     styles: {
       color: selectedColor
     }
-  }), selectedColor, props => reactTheming.getColor('neutralHue', 400, props.theme));
+  }), selectedColor, props => reactTheming.getColorV8('neutralHue', 400, props.theme));
 };
 const sizeStyles = _ref2 => {
   let {
@@ -66,7 +66,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledTab = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledTab",
   componentId: "sc-x2pbow-0"
@@ -78,11 +78,11 @@ 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.3'
+  'data-garden-version': '9.0.0-next.5'
 }).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 => reactTheming.getColor('neutralHue', 300, props.theme), props => props.theme.space.base * 5, props => reactTheming.getColor('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
+})(["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 => reactTheming.getColorV8('neutralHue', 300, props.theme), props => props.theme.space.base * 5, props => reactTheming.getColorV8('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledTabList.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -90,7 +90,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.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledTabPanel",
   componentId: "sc-7lhrmp-0"
@@ -108,7 +108,7 @@ const verticalStyling = _ref => {
 };
 const StyledTabs = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledTabs",
   componentId: "sc-1qaor65-0"
@@ -210,7 +210,7 @@ const toTabs = children => React.Children.toArray(children).reduce((_items, chil
   return retVal;
 }, []);
 
-const Tabs = React.forwardRef((_ref, ref) => {
+const TabsComponent = React.forwardRef((_ref, ref) => {
   let {
     isVertical,
     children,
@@ -244,15 +244,19 @@ const Tabs = React.forwardRef((_ref, ref) => {
     ref: ref
   }), children));
 });
-Tabs.propTypes = {
+TabsComponent.propTypes = {
   isVertical: PropTypes__default.default.bool,
   selectedItem: PropTypes__default.default.any,
   onChange: PropTypes__default.default.func
 };
-Tabs.defaultProps = {
+TabsComponent.defaultProps = {
   isVertical: false
 };
-Tabs.displayName = 'Tabs';
+TabsComponent.displayName = 'Tabs';
+const Tabs = TabsComponent;
+Tabs.Tab = Tab;
+Tabs.TabList = TabList;
+Tabs.TabPanel = TabPanel;
 
 exports.Tab = Tab;
 exports.TabList = TabList;

package/dist/index.esm.js

@@ -9,7 +9,7 @@ import React, { createContext, useContext, Children, isValidElement, forwardRef,
 import PropTypes from 'prop-types';
 import { mergeRefs } from 'react-merge-refs';
 import styled, { css, ThemeContext } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles } from '@zendeskgarden/react-theming';
+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';
@@ -35,7 +35,7 @@ const colorStyles = _ref => {
     theme,
     isSelected
   } = _ref;
-  const selectedColor = getColor('primaryHue', 600, theme);
+  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,
@@ -45,7 +45,7 @@ const colorStyles = _ref => {
     styles: {
       color: selectedColor
     }
-  }), selectedColor, props => getColor('neutralHue', 400, props.theme));
+  }), selectedColor, props => getColorV8('neutralHue', 400, props.theme));
 };
 const sizeStyles = _ref2 => {
   let {
@@ -58,7 +58,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledTab = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledTab",
   componentId: "sc-x2pbow-0"
@@ -70,11 +70,11 @@ StyledTab.defaultProps = {
 const COMPONENT_ID$2 = 'tabs.tablist';
 const StyledTabList = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).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 => getColor('neutralHue', 300, props.theme), props => props.theme.space.base * 5, props => getColor('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$2, props));
+})(["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
 };
@@ -82,7 +82,7 @@ StyledTabList.defaultProps = {
 const COMPONENT_ID$1 = 'tabs.tabpanel';
 const StyledTabPanel = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledTabPanel",
   componentId: "sc-7lhrmp-0"
@@ -100,7 +100,7 @@ const verticalStyling = _ref => {
 };
 const StyledTabs = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledTabs",
   componentId: "sc-1qaor65-0"
@@ -202,7 +202,7 @@ const toTabs = children => Children.toArray(children).reduce((_items, child) =>
   return retVal;
 }, []);
 
-const Tabs = forwardRef((_ref, ref) => {
+const TabsComponent = forwardRef((_ref, ref) => {
   let {
     isVertical,
     children,
@@ -236,14 +236,18 @@ const Tabs = forwardRef((_ref, ref) => {
     ref: ref
   }), children));
 });
-Tabs.propTypes = {
+TabsComponent.propTypes = {
   isVertical: PropTypes.bool,
   selectedItem: PropTypes.any,
   onChange: PropTypes.func
 };
-Tabs.defaultProps = {
+TabsComponent.defaultProps = {
   isVertical: false
 };
-Tabs.displayName = 'Tabs';
+TabsComponent.displayName = 'Tabs';
+const Tabs = TabsComponent;
+Tabs.Tab = Tab;
+Tabs.TabList = TabList;
+Tabs.TabPanel = TabPanel;
 
 export { Tab, TabList, TabPanel, Tabs };

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

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

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

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

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

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

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

@@ -6,7 +6,15 @@
  */
 import React from 'react';
 import { ITabsProps } from '../types';
+import { Tab } from './Tab';
+import { TabList } from './TabList';
+import { TabPanel } from './TabPanel';
+export declare const TabsComponent: React.ForwardRefExoticComponent<ITabsProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export declare const Tabs: React.ForwardRefExoticComponent<ITabsProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Tabs: React.ForwardRefExoticComponent<ITabsProps & React.RefAttributes<HTMLDivElement>> & {
+    Tab: typeof Tab;
+    TabList: typeof TabList;
+    TabPanel: typeof TabPanel;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-tabs",
-  "version": "9.0.0-next.3",
+  "version": "9.0.0-next.5",
   "description": "Components and render prop containers relating to the Garden Design System.",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -31,10 +31,10 @@
     "@zendeskgarden/react-theming": "^8.67.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "styled-components": "^5.1.0"
+    "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.3"
+    "@zendeskgarden/react-theming": "^9.0.0-next.5"
   },
   "keywords": [
     "components",
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "d5086e8a3ae0c8608361966954bf434ef03005ec"
+  "gitHead": "806fa33feb06142c3f69b6a87b53628469117e4d"
 }