@zendeskgarden/react-tabs 8.69.3 → 8.69.5

package/dist/index.cjs.js

@@ -45,7 +45,7 @@ const colorStyles = _ref => {
     isSelected
   } = _ref;
   const selectedColor = reactTheming.getColor('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({
+  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,
     spacerWidth: null,
@@ -67,7 +67,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledTab = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.69.3'
+  'data-garden-version': '8.69.5'
 }).withConfig({
   displayName: "StyledTab",
   componentId: "sc-x2pbow-0"
@@ -79,7 +79,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': '8.69.3'
+  'data-garden-version': '8.69.5'
 }).withConfig({
   displayName: "StyledTabList",
   componentId: "sc-wa5aaj-0"
@@ -91,7 +91,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': '8.69.3'
+  'data-garden-version': '8.69.5'
 }).withConfig({
   displayName: "StyledTabPanel",
   componentId: "sc-7lhrmp-0"
@@ -109,7 +109,7 @@ const verticalStyling = _ref => {
 };
 const StyledTabs = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.69.3'
+  'data-garden-version': '8.69.5'
 }).withConfig({
   displayName: "StyledTabs",
   componentId: "sc-1qaor65-0"
@@ -130,21 +130,21 @@ const Tab = React__default.default.forwardRef((_ref, ref) => {
     ...otherProps
   } = _ref;
   const tabsPropGetters = useTabsContext();
-  const tabRef = React__default.default.createRef();
   if (disabled || !tabsPropGetters) {
     return React__default.default.createElement(StyledTab, _extends({
       role: "tab",
       "aria-disabled": disabled,
-      ref: mergeRefs__default.default([tabRef, ref])
+      ref: ref
     }, otherProps));
   }
-  const tabProps = tabsPropGetters.getTabProps({
-    item,
-    focusRef: tabRef,
-    index: tabsPropGetters.tabIndexRef.current++
+  const {
+    ref: tabRef,
+    ...tabProps
+  } = tabsPropGetters.getTabProps({
+    value: item
   });
   return React__default.default.createElement(StyledTab, _extends({
-    isSelected: item === tabsPropGetters.selectedItem
+    isSelected: item === tabsPropGetters.selectedValue
   }, tabProps, otherProps, {
     ref: mergeRefs__default.default([tabRef, ref])
   }));
@@ -181,11 +181,10 @@ const TabPanel = React__default.default.forwardRef((_ref, ref) => {
     }, otherProps));
   }
   const tabPanelProps = tabsPropGetters.getTabPanelProps({
-    item,
-    index: tabsPropGetters.tabPanelIndexRef.current++
+    value: item
   });
   return React__default.default.createElement(StyledTabPanel, _extends({
-    "aria-hidden": tabsPropGetters.selectedItem !== item
+    "aria-hidden": tabsPropGetters.selectedValue !== item
   }, tabPanelProps, otherProps, {
     ref: ref
   }));
@@ -195,6 +194,23 @@ TabPanel.propTypes = {
   item: PropTypes__default.default.any
 };
 
+const toTabs = children => React.Children.toArray(children).reduce((_items, child) => {
+  const retVal = _items;
+  if ( React.isValidElement(child) && child.type !== 'string') {
+    if (Tab === child.type && '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 Tabs = React.forwardRef((_ref, ref) => {
   let {
     isVertical,
@@ -205,14 +221,14 @@ const Tabs = React.forwardRef((_ref, ref) => {
   } = _ref;
   const theme = React.useContext(styled.ThemeContext) || reactTheming.DEFAULT_THEME;
   const [internalSelectedItem, setInternalSelectedItem] = React.useState();
-  const tabIndexRef = React.useRef(0);
-  const tabPanelIndexRef = React.useRef(0);
   const selectedItem = containerUtilities.getControlledValue(controlledSelectedItem, internalSelectedItem);
-  const tabPropGetters = containerTabs.useTabs({
+  const tabs = React.useMemo(() => toTabs(children), [children]);
+  const tabsContextValue = containerTabs.useTabs({
+    tabs,
     rtl: theme.rtl,
     orientation: isVertical ? 'vertical' : 'horizontal',
-    selectedItem,
-    defaultSelectedIndex: 0,
+    selectedValue: selectedItem,
+    defaultSelectedValue: tabs.find(tab => !tab.disabled)?.value,
     onSelect: item => {
       if (onChange) {
         onChange(item);
@@ -221,11 +237,6 @@ const Tabs = React.forwardRef((_ref, ref) => {
       }
     }
   });
-  const tabsContextValue = React.useMemo(() => ({
-    ...tabPropGetters,
-    tabIndexRef,
-    tabPanelIndexRef
-  }), [tabPropGetters]);
   return React__default.default.createElement(TabsContext.Provider, {
     value: tabsContextValue
   }, React__default.default.createElement(StyledTabs, _extends({

package/dist/index.esm.js

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { createContext, useContext, forwardRef, useState, useRef, useMemo } from 'react';
+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';
@@ -36,7 +36,7 @@ const colorStyles = _ref => {
     isSelected
   } = _ref;
   const selectedColor = getColor('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({
+  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,
@@ -58,7 +58,7 @@ const sizeStyles = _ref2 => {
 };
 const StyledTab = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.69.3'
+  'data-garden-version': '8.69.5'
 }).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': '8.69.3'
+  'data-garden-version': '8.69.5'
 }).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': '8.69.3'
+  'data-garden-version': '8.69.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': '8.69.3'
+  'data-garden-version': '8.69.5'
 }).withConfig({
   displayName: "StyledTabs",
   componentId: "sc-1qaor65-0"
@@ -121,21 +121,21 @@ const Tab = React.forwardRef((_ref, ref) => {
     ...otherProps
   } = _ref;
   const tabsPropGetters = useTabsContext();
-  const tabRef = React.createRef();
   if (disabled || !tabsPropGetters) {
     return React.createElement(StyledTab, _extends({
       role: "tab",
       "aria-disabled": disabled,
-      ref: mergeRefs([tabRef, ref])
+      ref: ref
     }, otherProps));
   }
-  const tabProps = tabsPropGetters.getTabProps({
-    item,
-    focusRef: tabRef,
-    index: tabsPropGetters.tabIndexRef.current++
+  const {
+    ref: tabRef,
+    ...tabProps
+  } = tabsPropGetters.getTabProps({
+    value: item
   });
   return React.createElement(StyledTab, _extends({
-    isSelected: item === tabsPropGetters.selectedItem
+    isSelected: item === tabsPropGetters.selectedValue
   }, tabProps, otherProps, {
     ref: mergeRefs([tabRef, ref])
   }));
@@ -172,11 +172,10 @@ const TabPanel = React.forwardRef((_ref, ref) => {
     }, otherProps));
   }
   const tabPanelProps = tabsPropGetters.getTabPanelProps({
-    item,
-    index: tabsPropGetters.tabPanelIndexRef.current++
+    value: item
   });
   return React.createElement(StyledTabPanel, _extends({
-    "aria-hidden": tabsPropGetters.selectedItem !== item
+    "aria-hidden": tabsPropGetters.selectedValue !== item
   }, tabPanelProps, otherProps, {
     ref: ref
   }));
@@ -186,6 +185,23 @@ TabPanel.propTypes = {
   item: PropTypes.any
 };
 
+const toTabs = children => Children.toArray(children).reduce((_items, child) => {
+  const retVal = _items;
+  if ( isValidElement(child) && child.type !== 'string') {
+    if (Tab === child.type && '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 Tabs = forwardRef((_ref, ref) => {
   let {
     isVertical,
@@ -196,14 +212,14 @@ const Tabs = forwardRef((_ref, ref) => {
   } = _ref;
   const theme = useContext(ThemeContext) || DEFAULT_THEME;
   const [internalSelectedItem, setInternalSelectedItem] = useState();
-  const tabIndexRef = useRef(0);
-  const tabPanelIndexRef = useRef(0);
   const selectedItem = getControlledValue(controlledSelectedItem, internalSelectedItem);
-  const tabPropGetters = useTabs({
+  const tabs = useMemo(() => toTabs(children), [children]);
+  const tabsContextValue = useTabs({
+    tabs,
     rtl: theme.rtl,
     orientation: isVertical ? 'vertical' : 'horizontal',
-    selectedItem,
-    defaultSelectedIndex: 0,
+    selectedValue: selectedItem,
+    defaultSelectedValue: tabs.find(tab => !tab.disabled)?.value,
     onSelect: item => {
       if (onChange) {
         onChange(item);
@@ -212,11 +228,6 @@ const Tabs = forwardRef((_ref, ref) => {
       }
     }
   });
-  const tabsContextValue = useMemo(() => ({
-    ...tabPropGetters,
-    tabIndexRef,
-    tabPanelIndexRef
-  }), [tabPropGetters]);
   return React.createElement(TabsContext.Provider, {
     value: tabsContextValue
   }, React.createElement(StyledTabs, _extends({

package/dist/typings/utils/toTabs.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 { ReactNode } from 'react';
+/**
+ * Converts an array of `Tab` children to a valid `tabs` data structure for `useTabs`.
+ *
+ * @param children The `children` prop from `Tabs`.
+ *
+ * @returns A valid `IUseTabsProps['tabs']` data structure.
+ */
+export declare const toTabs: (children: ReactNode) => import("@zendeskgarden/container-tabs").ITab<any>[];

package/dist/typings/utils/useTabsContext.d.ts

@@ -4,12 +4,7 @@
  * 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 { MutableRefObject } from 'react';
+/// <reference types="react" />
 import { IUseTabsReturnValue } from '@zendeskgarden/container-tabs';
-interface ITabsContext extends IUseTabsReturnValue<any> {
-    tabIndexRef: MutableRefObject<number>;
-    tabPanelIndexRef: MutableRefObject<number>;
-}
-export declare const TabsContext: import("react").Context<ITabsContext | undefined>;
-export declare const useTabsContext: () => ITabsContext | undefined;
-export {};
+export declare const TabsContext: import("react").Context<IUseTabsReturnValue<any> | undefined>;
+export declare const useTabsContext: () => IUseTabsReturnValue<any> | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-tabs",
-  "version": "8.69.3",
+  "version": "8.69.5",
   "description": "Components and render prop containers relating to the Garden Design System.",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -21,7 +21,7 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "@zendeskgarden/container-tabs": "^1.0.0",
+    "@zendeskgarden/container-tabs": "^2.0.1",
     "@zendeskgarden/container-utilities": "^1.0.0",
     "polished": "^4.0.0",
     "prop-types": "^15.5.7",
@@ -34,7 +34,7 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.69.3"
+    "@zendeskgarden/react-theming": "^8.69.5"
   },
   "keywords": [
     "components",
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "c861fbeb70120b66b05d2ce3a26ccf3047659aa0"
+  "gitHead": "610a2e79728debaa8ea03de256d81b83cf4e595f"
 }