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

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

@@ -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.4'
 }).withConfig({
   displayName: "StyledTab",
   componentId: "sc-x2pbow-0"
@@ -78,7 +78,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.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledTabList",
   componentId: "sc-wa5aaj-0"
@@ -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.4'
 }).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.4'
 }).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

@@ -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.4'
 }).withConfig({
   displayName: "StyledTab",
   componentId: "sc-x2pbow-0"
@@ -70,7 +70,7 @@ 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.4'
 }).withConfig({
   displayName: "StyledTabList",
   componentId: "sc-wa5aaj-0"
@@ -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.4'
 }).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.4'
 }).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/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/dist/typings/index.d.ts

@@ -4,8 +4,11 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
+/** @deprecated use `Tabs.Tab` instead */
 export { Tab } from './elements/Tab';
+/** @deprecated use `Tabs.TabList` instead */
 export { TabList } from './elements/TabList';
+/** @deprecated use `Tabs.TabPanel` instead */
 export { TabPanel } from './elements/TabPanel';
 export { Tabs } from './elements/Tabs';
 export type { ITabProps, ITabPanelProps, ITabsProps } from './types';

package/package.json

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