@zendeskgarden/react-tabs 8.53.1 → 8.53.2

package/dist/index.cjs.js

@@ -198,7 +198,7 @@ var sizeStyles = function sizeStyles(_ref2) {
 var StyledTab = styled__default["default"].div.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$3,
-    'data-garden-version': '8.53.1',
+    'data-garden-version': '8.53.2',
     'aria-disabled': props.disabled
   };
 }).withConfig({
@@ -228,7 +228,7 @@ StyledTab.defaultProps = {
 var COMPONENT_ID$2 = 'tabs.tablist';
 var StyledTabList = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledTabList",
   componentId: "sc-wa5aaj-0"
@@ -256,7 +256,7 @@ StyledTabList.defaultProps = {
 var COMPONENT_ID$1 = 'tabs.tabpanel';
 var StyledTabPanel = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledTabPanel",
   componentId: "sc-7lhrmp-0"
@@ -274,7 +274,7 @@ var verticalStyling = function verticalStyling(_ref) {
 };
 var StyledTabs = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledTabs",
   componentId: "sc-1qaor65-0"
@@ -300,21 +300,23 @@ var Tab = React__default["default"].forwardRef(function (_ref, ref) {
       item = _ref.item,
       otherProps = _objectWithoutProperties(_ref, _excluded$2);
   var tabsPropGetters = useTabsContext();
-  var tabRef = React.useRef();
+  var tabRef = React__default["default"].createRef();
   if (disabled || !tabsPropGetters) {
     return React__default["default"].createElement(StyledTab, _extends({
       disabled: disabled,
       ref: mergeRefs__default["default"]([tabRef, ref])
     }, otherProps));
   }
-  return React__default["default"].createElement(StyledTab, _extends({
-    ref: mergeRefs__default["default"]([tabRef, ref])
-  }, tabsPropGetters.getTabProps(_objectSpread2({
+  var tabProps = tabsPropGetters.getTabProps({
     item: item,
     focusRef: tabRef,
-    index: tabsPropGetters.tabIndexRef.current++,
+    index: tabsPropGetters.tabIndexRef.current++
+  });
+  return React__default["default"].createElement(StyledTab, _extends({
     isSelected: item === tabsPropGetters.selectedItem
-  }, otherProps))));
+  }, tabProps, otherProps, {
+    ref: mergeRefs__default["default"]([tabRef, ref])
+  }));
 });
 Tab.displayName = 'Tab';
 Tab.propTypes = {
@@ -329,9 +331,10 @@ var TabList = React__default["default"].forwardRef(function (props, ref) {
       ref: ref
     }, props));
   }
-  return React__default["default"].createElement(StyledTabList, tabsPropGetters.getTabListProps(_objectSpread2({
+  var tabListProps = tabsPropGetters.getTabListProps();
+  return React__default["default"].createElement(StyledTabList, _extends({}, tabListProps, props, {
     ref: ref
-  }, props)));
+  }));
 });
 TabList.displayName = 'TabList';
 
@@ -345,12 +348,15 @@ var TabPanel = React__default["default"].forwardRef(function (_ref, ref) {
       ref: ref
     }, otherProps));
   }
-  return React__default["default"].createElement(StyledTabPanel, tabsPropGetters.getTabPanelProps(_objectSpread2({
+  var tabPanelProps = tabsPropGetters.getTabPanelProps({
     item: item,
-    ref: ref,
-    index: tabsPropGetters.tabPanelIndexRef.current++,
-    'aria-hidden': tabsPropGetters.selectedItem !== item
-  }, otherProps)));
+    index: tabsPropGetters.tabPanelIndexRef.current++
+  });
+  return React__default["default"].createElement(StyledTabPanel, _extends({
+    "aria-hidden": tabsPropGetters.selectedItem !== item
+  }, tabPanelProps, otherProps, {
+    ref: ref
+  }));
 });
 TabPanel.displayName = 'TabPanel';
 TabPanel.propTypes = {
@@ -374,7 +380,7 @@ var Tabs = React.forwardRef(function (_ref, ref) {
   var selectedItem = containerUtilities.getControlledValue(controlledSelectedItem, internalSelectedItem);
   var tabPropGetters = containerTabs.useTabs({
     rtl: theme.rtl,
-    vertical: isVertical,
+    orientation: isVertical ? 'vertical' : 'horizontal',
     selectedItem: selectedItem,
     defaultSelectedIndex: 0,
     onSelect: function onSelect(item) {

package/dist/index.esm.js

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { createContext, useContext, useRef, forwardRef, useState, useMemo } from 'react';
+import React, { createContext, useContext, forwardRef, useState, useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import mergeRefs from 'react-merge-refs';
 import styled, { css, ThemeContext } from 'styled-components';
@@ -187,7 +187,7 @@ var sizeStyles = function sizeStyles(_ref2) {
 var StyledTab = styled.div.attrs(function (props) {
   return {
     'data-garden-id': COMPONENT_ID$3,
-    'data-garden-version': '8.53.1',
+    'data-garden-version': '8.53.2',
     'aria-disabled': props.disabled
   };
 }).withConfig({
@@ -217,7 +217,7 @@ StyledTab.defaultProps = {
 var COMPONENT_ID$2 = 'tabs.tablist';
 var StyledTabList = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledTabList",
   componentId: "sc-wa5aaj-0"
@@ -245,7 +245,7 @@ StyledTabList.defaultProps = {
 var COMPONENT_ID$1 = 'tabs.tabpanel';
 var StyledTabPanel = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledTabPanel",
   componentId: "sc-7lhrmp-0"
@@ -263,7 +263,7 @@ var verticalStyling = function verticalStyling(_ref) {
 };
 var StyledTabs = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledTabs",
   componentId: "sc-1qaor65-0"
@@ -289,21 +289,23 @@ var Tab = React.forwardRef(function (_ref, ref) {
       item = _ref.item,
       otherProps = _objectWithoutProperties(_ref, _excluded$2);
   var tabsPropGetters = useTabsContext();
-  var tabRef = useRef();
+  var tabRef = React.createRef();
   if (disabled || !tabsPropGetters) {
     return React.createElement(StyledTab, _extends({
       disabled: disabled,
       ref: mergeRefs([tabRef, ref])
     }, otherProps));
   }
-  return React.createElement(StyledTab, _extends({
-    ref: mergeRefs([tabRef, ref])
-  }, tabsPropGetters.getTabProps(_objectSpread2({
+  var tabProps = tabsPropGetters.getTabProps({
     item: item,
     focusRef: tabRef,
-    index: tabsPropGetters.tabIndexRef.current++,
+    index: tabsPropGetters.tabIndexRef.current++
+  });
+  return React.createElement(StyledTab, _extends({
     isSelected: item === tabsPropGetters.selectedItem
-  }, otherProps))));
+  }, tabProps, otherProps, {
+    ref: mergeRefs([tabRef, ref])
+  }));
 });
 Tab.displayName = 'Tab';
 Tab.propTypes = {
@@ -318,9 +320,10 @@ var TabList = React.forwardRef(function (props, ref) {
       ref: ref
     }, props));
   }
-  return React.createElement(StyledTabList, tabsPropGetters.getTabListProps(_objectSpread2({
+  var tabListProps = tabsPropGetters.getTabListProps();
+  return React.createElement(StyledTabList, _extends({}, tabListProps, props, {
     ref: ref
-  }, props)));
+  }));
 });
 TabList.displayName = 'TabList';
 
@@ -334,12 +337,15 @@ var TabPanel = React.forwardRef(function (_ref, ref) {
       ref: ref
     }, otherProps));
   }
-  return React.createElement(StyledTabPanel, tabsPropGetters.getTabPanelProps(_objectSpread2({
+  var tabPanelProps = tabsPropGetters.getTabPanelProps({
     item: item,
-    ref: ref,
-    index: tabsPropGetters.tabPanelIndexRef.current++,
-    'aria-hidden': tabsPropGetters.selectedItem !== item
-  }, otherProps)));
+    index: tabsPropGetters.tabPanelIndexRef.current++
+  });
+  return React.createElement(StyledTabPanel, _extends({
+    "aria-hidden": tabsPropGetters.selectedItem !== item
+  }, tabPanelProps, otherProps, {
+    ref: ref
+  }));
 });
 TabPanel.displayName = 'TabPanel';
 TabPanel.propTypes = {
@@ -363,7 +369,7 @@ var Tabs = forwardRef(function (_ref, ref) {
   var selectedItem = getControlledValue(controlledSelectedItem, internalSelectedItem);
   var tabPropGetters = useTabs({
     rtl: theme.rtl,
-    vertical: isVertical,
+    orientation: isVertical ? 'vertical' : 'horizontal',
     selectedItem: selectedItem,
     defaultSelectedIndex: 0,
     onSelect: function onSelect(item) {

package/package.json

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