@zendeskgarden/react-tabs 9.12.2 → 9.12.4

package/dist/esm/elements/Tab.js

@@ -13,12 +13,11 @@ 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 Tab = React.forwardRef(({
+  disabled,
+  item,
+  ...otherProps
+}, ref) => {
   const tabsPropGetters = useTabsContext();
   if (disabled || !tabsPropGetters) {
     return React.createElement(StyledTab, Object.assign({

package/dist/esm/elements/TabPanel.js

@@ -12,11 +12,10 @@ 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 TabPanel = React.forwardRef(({
+  item,
+  ...otherProps
+}, ref) => {
   const tabsPropGetters = useTabsContext();
   if (!tabsPropGetters) {
     return React.createElement(StyledTabPanel, Object.assign({

package/dist/esm/elements/Tabs.js

@@ -17,14 +17,13 @@ import { Tab } from './Tab.js';
 import { TabList } from './TabList.js';
 import { TabPanel } from './TabPanel.js';
 
-const TabsComponent = forwardRef((_ref, ref) => {
-  let {
-    isVertical = false,
-    children,
-    onChange,
-    selectedItem: controlledSelectedItem,
-    ...otherProps
-  } = _ref;
+const TabsComponent = forwardRef(({
+  isVertical = false,
+  children,
+  onChange,
+  selectedItem: controlledSelectedItem,
+  ...otherProps
+}, ref) => {
   const theme = useContext(ThemeContext) || DEFAULT_THEME;
   const [internalSelectedItem, setInternalSelectedItem] = useState();
   const selectedItem = getControlledValue(controlledSelectedItem, internalSelectedItem);

package/dist/esm/styled/StyledTab.js

@@ -8,12 +8,11 @@ import styled, { css } from 'styled-components';
 import { componentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
 import { stripUnit } from 'polished';
 
-const COMPONENT_ID = 'tabs.tab';
-const colorStyles = _ref => {
-  let {
-    theme,
-    $isSelected
-  } = _ref;
+const COMPONENT_ID$3 = 'tabs.tab';
+const colorStyles$1 = ({
+  theme,
+  $isSelected
+}) => {
   const borderColor = $isSelected ? getColor({
     theme,
     variable: 'border.primaryEmphasis'
@@ -38,11 +37,10 @@ const colorStyles = _ref => {
     }
   }), selectedColor, disabledColor);
 };
-const sizeStyles = _ref2 => {
-  let {
-    theme,
-    $isVertical
-  } = _ref2;
+const sizeStyles$2 = ({
+  theme,
+  $isVertical
+}) => {
   const borderWidth = theme.borderWidths.md;
   const focusHeight = `calc(100% - ${theme.space.base * ($isVertical ? 2 : 4)}px);`;
   let marginBottom;
@@ -59,8 +57,8 @@ const sizeStyles = _ref2 => {
   return css(["margin-bottom:", ";border-width:", ";padding:", ";&:focus-visible::before,&[data-garden-focus-visible]::before{height:", ";}&:last-of-type{margin-bottom:0;}"], marginBottom, borderWidth, padding, focusHeight);
 };
 const StyledTab = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTab",
   componentId: "sc-x2pbow-0"
@@ -69,6 +67,6 @@ const StyledTab = styled.div.attrs({
     return props.theme.rtl ? 'right' : 'left';
   }
   return 'center';
-}, sizeStyles, colorStyles, props => props.theme.space.base * (props.$isVertical ? 1 : 2.5), props => props.theme.space.base * (props.$isVertical ? 1 : 6), props => props.theme.space.base * (props.$isVertical ? 1 : 6), props => props.theme.borderRadii.md, componentStyles);
+}, sizeStyles$2, colorStyles$1, props => props.theme.space.base * (props.$isVertical ? 1 : 2.5), props => props.theme.space.base * (props.$isVertical ? 1 : 6), props => props.theme.space.base * (props.$isVertical ? 1 : 6), props => props.theme.borderRadii.md, componentStyles);
 
 export { StyledTab };

package/dist/esm/styled/StyledTabList.js

@@ -5,13 +5,12 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { componentStyles, getColor, getLineHeight } from '@zendeskgarden/react-theming';
+import { componentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'tabs.tablist';
-const colorStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const COMPONENT_ID$2 = 'tabs.tablist';
+const colorStyles = ({
+  theme
+}) => {
   const borderColor = getColor({
     theme,
     variable: 'border.default'
@@ -22,11 +21,10 @@ const colorStyles = _ref => {
   });
   return css(["transition:border-color 0.25s ease-in-out;color-scheme:only ", ";border-bottom-color:", ";color:", ";"], p => p.theme.colors.base, borderColor, foregroundColor);
 };
-const sizeStyles = _ref2 => {
-  let {
-    theme,
-    $isVertical
-  } = _ref2;
+const sizeStyles$1 = ({
+  theme,
+  $isVertical
+}) => {
   const marginBottom = $isVertical ? 0 : `${theme.space.base * 5}px`;
   const borderBottom = $isVertical ? undefined : theme.borderWidths.sm;
   const fontSize = theme.fontSizes.md;
@@ -34,11 +32,11 @@ const sizeStyles = _ref2 => {
   return css(["margin-top:0;margin-bottom:", ";border-bottom-width:", ";padding:0;line-height:", ";font-size:", ";"], marginBottom, borderBottom, lineHeight, fontSize);
 };
 const StyledTabList = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTabList",
   componentId: "sc-wa5aaj-0"
-})(["display:", ";border-bottom:", ";vertical-align:", ";white-space:nowrap;", ";", ";", ";"], props => props.$isVertical ? 'table-cell' : 'block', props => props.$isVertical ? 'none' : props.theme.borderStyles.solid, props => props.$isVertical ? 'top' : undefined, sizeStyles, colorStyles, componentStyles);
+})(["display:", ";border-bottom:", ";vertical-align:", ";white-space:nowrap;", ";", ";", ";"], props => props.$isVertical ? 'table-cell' : 'block', props => props.$isVertical ? 'none' : props.theme.borderStyles.solid, props => props.$isVertical ? 'top' : undefined, sizeStyles$1, colorStyles, componentStyles);
 
 export { StyledTabList };

package/dist/esm/styled/StyledTabPanel.js

@@ -7,18 +7,17 @@
 import styled, { css } from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'tabs.tabpanel';
-const sizeStyles = _ref => {
-  let {
-    theme,
-    $isVertical
-  } = _ref;
+const COMPONENT_ID$1 = 'tabs.tabpanel';
+const sizeStyles = ({
+  theme,
+  $isVertical
+}) => {
   const margin = $isVertical ? `${theme.space.base * 8}px` : undefined;
   return css(["margin-", ":", ";"], theme.rtl ? 'right' : 'left', margin);
 };
 const StyledTabPanel = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$1,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTabPanel",
   componentId: "sc-7lhrmp-0"

package/dist/esm/styled/StyledTabs.js

@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'tabs.tabs';
 const StyledTabs = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTabs",
   componentId: "sc-1qaor65-0"

package/dist/index.cjs.js

@@ -22,11 +22,10 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 const COMPONENT_ID$3 = 'tabs.tab';
-const colorStyles$1 = _ref => {
-  let {
-    theme,
-    $isSelected
-  } = _ref;
+const colorStyles$1 = ({
+  theme,
+  $isSelected
+}) => {
   const borderColor = $isSelected ? reactTheming.getColor({
     theme,
     variable: 'border.primaryEmphasis'
@@ -51,11 +50,10 @@ const colorStyles$1 = _ref => {
     }
   }), selectedColor, disabledColor);
 };
-const sizeStyles$2 = _ref2 => {
-  let {
-    theme,
-    $isVertical
-  } = _ref2;
+const sizeStyles$2 = ({
+  theme,
+  $isVertical
+}) => {
   const borderWidth = theme.borderWidths.md;
   const focusHeight = `calc(100% - ${theme.space.base * ($isVertical ? 2 : 4)}px);`;
   let marginBottom;
@@ -73,7 +71,7 @@ const sizeStyles$2 = _ref2 => {
 };
 const StyledTab = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTab",
   componentId: "sc-x2pbow-0"
@@ -85,10 +83,9 @@ const StyledTab = styled__default.default.div.attrs({
 }, sizeStyles$2, colorStyles$1, props => props.theme.space.base * (props.$isVertical ? 1 : 2.5), props => props.theme.space.base * (props.$isVertical ? 1 : 6), props => props.theme.space.base * (props.$isVertical ? 1 : 6), props => props.theme.borderRadii.md, reactTheming.componentStyles);
 
 const COMPONENT_ID$2 = 'tabs.tablist';
-const colorStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const colorStyles = ({
+  theme
+}) => {
   const borderColor = reactTheming.getColor({
     theme,
     variable: 'border.default'
@@ -99,11 +96,10 @@ const colorStyles = _ref => {
   });
   return styled.css(["transition:border-color 0.25s ease-in-out;color-scheme:only ", ";border-bottom-color:", ";color:", ";"], p => p.theme.colors.base, borderColor, foregroundColor);
 };
-const sizeStyles$1 = _ref2 => {
-  let {
-    theme,
-    $isVertical
-  } = _ref2;
+const sizeStyles$1 = ({
+  theme,
+  $isVertical
+}) => {
   const marginBottom = $isVertical ? 0 : `${theme.space.base * 5}px`;
   const borderBottom = $isVertical ? undefined : theme.borderWidths.sm;
   const fontSize = theme.fontSizes.md;
@@ -112,24 +108,23 @@ const sizeStyles$1 = _ref2 => {
 };
 const StyledTabList = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTabList",
   componentId: "sc-wa5aaj-0"
 })(["display:", ";border-bottom:", ";vertical-align:", ";white-space:nowrap;", ";", ";", ";"], props => props.$isVertical ? 'table-cell' : 'block', props => props.$isVertical ? 'none' : props.theme.borderStyles.solid, props => props.$isVertical ? 'top' : undefined, sizeStyles$1, colorStyles, reactTheming.componentStyles);
 
 const COMPONENT_ID$1 = 'tabs.tabpanel';
-const sizeStyles = _ref => {
-  let {
-    theme,
-    $isVertical
-  } = _ref;
+const sizeStyles = ({
+  theme,
+  $isVertical
+}) => {
   const margin = $isVertical ? `${theme.space.base * 8}px` : undefined;
   return styled.css(["margin-", ":", ";"], theme.rtl ? 'right' : 'left', margin);
 };
 const StyledTabPanel = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTabPanel",
   componentId: "sc-7lhrmp-0"
@@ -138,7 +133,7 @@ const StyledTabPanel = styled__default.default.div.attrs({
 const COMPONENT_ID = 'tabs.tabs';
 const StyledTabs = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTabs",
   componentId: "sc-1qaor65-0"
@@ -149,12 +144,11 @@ const useTabsContext = () => {
   return React.useContext(TabsContext);
 };
 
-const Tab = React__default.default.forwardRef((_ref, ref) => {
-  let {
-    disabled,
-    item,
-    ...otherProps
-  } = _ref;
+const Tab = React__default.default.forwardRef(({
+  disabled,
+  item,
+  ...otherProps
+}, ref) => {
   const tabsPropGetters = useTabsContext();
   if (disabled || !tabsPropGetters) {
     return React__default.default.createElement(StyledTab, Object.assign({
@@ -199,11 +193,10 @@ const TabList = React__default.default.forwardRef((props, ref) => {
 });
 TabList.displayName = 'Tabs.TabList';
 
-const TabPanel = React__default.default.forwardRef((_ref, ref) => {
-  let {
-    item,
-    ...otherProps
-  } = _ref;
+const TabPanel = React__default.default.forwardRef(({
+  item,
+  ...otherProps
+}, ref) => {
   const tabsPropGetters = useTabsContext();
   if (!tabsPropGetters) {
     return React__default.default.createElement(StyledTabPanel, Object.assign({
@@ -242,14 +235,13 @@ const toTabs = children => React.Children.toArray(children).reduce((_items, chil
   return retVal;
 }, []);
 
-const TabsComponent = React.forwardRef((_ref, ref) => {
-  let {
-    isVertical = false,
-    children,
-    onChange,
-    selectedItem: controlledSelectedItem,
-    ...otherProps
-  } = _ref;
+const TabsComponent = React.forwardRef(({
+  isVertical = false,
+  children,
+  onChange,
+  selectedItem: controlledSelectedItem,
+  ...otherProps
+}, ref) => {
   const theme = React.useContext(styled.ThemeContext) || reactTheming.DEFAULT_THEME;
   const [internalSelectedItem, setInternalSelectedItem] = React.useState();
   const selectedItem = containerUtilities.getControlledValue(controlledSelectedItem, internalSelectedItem);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-tabs",
-  "version": "9.12.2",
+  "version": "9.12.4",
   "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": "^2.0.10",
-    "@zendeskgarden/container-utilities": "^2.0.0",
+    "@zendeskgarden/container-tabs": "^2.0.16",
+    "@zendeskgarden/container-utilities": "^2.0.4",
     "polished": "^4.3.1",
     "prop-types": "^15.5.7",
     "react-merge-refs": "^2.0.0"
@@ -34,7 +34,7 @@
     "styled-components": "^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.12.2"
+    "@zendeskgarden/react-theming": "^9.12.4"
   },
   "keywords": [
     "components",
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "9b6f34bf0eda4bee3b47f97a437aa9b7f3008af4"
+  "gitHead": "e79e9687e6bcbd097c059add2938cdae59a5173b"
 }