@zendeskgarden/react-tabs 8.57.1 → 8.58.0

package/dist/index.cjs.js

@@ -25,281 +25,106 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-  }
-
-  return target;
-}
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-
-  var _s, _e;
-
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-var COMPONENT_ID$3 = 'tabs.tab';
-var colorStyles = function colorStyles(_ref) {
-  var theme = _ref.theme,
-      isSelected = _ref.isSelected;
-  var selectedColor = reactTheming.getColor('primaryHue', 600, theme);
-  return styled.css(["border-color:", ";color:", ";&:hover{color:", ";}&:active{border-color:currentColor;color:", ";}&[data-garden-focus-visible]{color:", ";}&[data-garden-focus-visible]::before{box-shadow:inset ", ";}&[aria-disabled='true']{border-color:transparent;color:", ";}"], isSelected && 'currentColor !important', isSelected ? selectedColor : 'inherit', selectedColor, selectedColor, selectedColor, theme.shadows.sm(reactTheming.getColor('primaryHue', 600, theme, 0.35)), function (props) {
-    return reactTheming.getColor('neutralHue', 400, props.theme);
-  });
+const COMPONENT_ID$3 = 'tabs.tab';
+const colorStyles = _ref => {
+  let {
+    theme,
+    isSelected
+  } = _ref;
+  const selectedColor = reactTheming.getColor('primaryHue', 600, theme);
+  return styled.css(["border-color:", ";color:", ";&:hover{color:", ";}&:active{border-color:currentColor;color:", ";}&[data-garden-focus-visible]{color:", ";}&[data-garden-focus-visible]::before{box-shadow:inset ", ";}&[aria-disabled='true']{border-color:transparent;color:", ";}"], isSelected && 'currentColor !important', isSelected ? selectedColor : 'inherit', selectedColor, selectedColor, selectedColor, theme.shadows.sm(reactTheming.getColor('primaryHue', 600, theme, 0.35)), props => reactTheming.getColor('neutralHue', 400, props.theme));
 };
-var sizeStyles = function sizeStyles(_ref2) {
-  var theme = _ref2.theme;
-  var paddingTop = theme.space.base * 2.5;
-  var paddingHorizontal = theme.space.base * 7;
-  var paddingBottom = paddingTop - polished.stripUnit(theme.borderWidths.md) - polished.stripUnit(theme.borderWidths.sm);
+const sizeStyles = _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  const paddingTop = theme.space.base * 2.5;
+  const paddingHorizontal = theme.space.base * 7;
+  const paddingBottom = paddingTop - polished.stripUnit(theme.borderWidths.md) - polished.stripUnit(theme.borderWidths.sm);
   return styled.css(["padding:", "px ", "px ", "px;"], paddingTop, paddingHorizontal, paddingBottom);
 };
-var StyledTab = styled__default["default"].div.attrs(function (props) {
-  return {
-    'data-garden-id': COMPONENT_ID$3,
-    'data-garden-version': '8.57.1',
-    'aria-disabled': props.disabled
-  };
-}).withConfig({
+const StyledTab = styled__default["default"].div.attrs(props => ({
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '8.58.0',
+  'aria-disabled': props.disabled
+})).withConfig({
   displayName: "StyledTab",
   componentId: "sc-x2pbow-0"
-})(["display:inline-block;position:relative;transition:color 0.25s ease-in-out;border-bottom:", " transparent;border-width:", ";cursor:pointer;overflow:hidden;vertical-align:top;user-select:none;text-align:center;text-decoration:none;text-overflow:ellipsis;", " ", " &:focus{outline:none;text-decoration:none;}&[data-garden-focus-visible]::before{position:absolute;top:", "px;right:", "px;left:", "px;border-radius:", ";height:", "px;pointer-events:none;}&::before{transition:box-shadow 0.1s ease-in-out;content:'';}&:active::before{box-shadow:none;}&[aria-disabled='true']{cursor:default;}", ";"], function (props) {
-  return props.theme.borderStyles.solid;
-}, function (props) {
-  return props.theme.borderWidths.md;
-}, sizeStyles, colorStyles, function (props) {
-  return props.theme.space.base * 2.5;
-}, function (props) {
-  return props.theme.space.base * 6;
-}, function (props) {
-  return props.theme.space.base * 6;
-}, function (props) {
-  return props.theme.borderRadii.md;
-}, function (props) {
-  return props.theme.space.base * 5;
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props);
-});
+})(["display:inline-block;position:relative;transition:color 0.25s ease-in-out;border-bottom:", " transparent;border-width:", ";cursor:pointer;overflow:hidden;vertical-align:top;user-select:none;text-align:center;text-decoration:none;text-overflow:ellipsis;", " ", " &:focus{outline:none;text-decoration:none;}&[data-garden-focus-visible]::before{position:absolute;top:", "px;right:", "px;left:", "px;border-radius:", ";height:", "px;pointer-events:none;}&::before{transition:box-shadow 0.1s ease-in-out;content:'';}&:active::before{box-shadow:none;}&[aria-disabled='true']{cursor:default;}", ";"], props => props.theme.borderStyles.solid, props => props.theme.borderWidths.md, sizeStyles, colorStyles, props => props.theme.space.base * 2.5, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.theme.borderRadii.md, props => props.theme.space.base * 5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledTab.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$2 = 'tabs.tablist';
-var StyledTabList = styled__default["default"].div.attrs({
+const COMPONENT_ID$2 = 'tabs.tablist';
+const StyledTabList = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).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:", ";", ";"], function (props) {
-  return props.theme.space.base * 5;
-}, function (props) {
-  return props.theme.borderWidths.sm;
-}, function (props) {
-  return props.theme.borderStyles.solid;
-}, function (props) {
-  return reactTheming.getColor('neutralHue', 300, props.theme);
-}, function (props) {
-  return props.theme.space.base * 5;
-}, function (props) {
-  return reactTheming.getColor('neutralHue', 600, props.theme);
-}, function (props) {
-  return props.theme.fontSizes.md;
-}, function (props) {
-  return 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.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));
 StyledTabList.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$1 = 'tabs.tabpanel';
-var StyledTabPanel = styled__default["default"].div.attrs({
+const COMPONENT_ID$1 = 'tabs.tabpanel';
+const StyledTabPanel = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledTabPanel",
   componentId: "sc-7lhrmp-0"
-})(["display:block;&[aria-hidden='true']{display:none;}", ";"], function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props);
-});
+})(["display:block;&[aria-hidden='true']{display:none;}", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledTabPanel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID = 'tabs.tabs';
-var verticalStyling = function verticalStyling(_ref) {
-  var theme = _ref.theme;
+const COMPONENT_ID = 'tabs.tabs';
+const verticalStyling = _ref => {
+  let {
+    theme
+  } = _ref;
   return styled.css(["display:table;", "{display:table-cell;margin-bottom:0;border-bottom:none;vertical-align:top;}", "{display:block;margin-bottom:", "px;margin-left:", ";border-left:", ";border-bottom-style:none;border-", "-style:", ";border-", "-color:transparent;padding:", "px ", "px;text-align:", ";&:last-of-type{margin-bottom:0;}&[data-garden-focus-visible]::before{top:", "px;right:", "px;left:", "px;}}", "{margin-", ":", "px;vertical-align:top;}"], StyledTabList, StyledTab, theme.space.base * 5, theme.rtl && '0', theme.rtl && '0', theme.rtl ? 'right' : 'left', theme.borderStyles.solid, theme.rtl ? 'right' : 'left', theme.space.base, theme.space.base * 2, theme.rtl ? 'right' : 'left', theme.space.base, theme.space.base, theme.space.base, StyledTabPanel, theme.rtl ? 'right' : 'left', theme.space.base * 8);
 };
-var StyledTabs = styled__default["default"].div.attrs({
+const StyledTabs = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledTabs",
   componentId: "sc-1qaor65-0"
-})(["display:block;overflow:hidden;direction:", ";", ";", ";"], function (props) {
-  return props.theme.rtl && 'rtl';
-}, function (props) {
-  return props.isVertical && verticalStyling(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID, props);
-});
+})(["display:block;overflow:hidden;direction:", ";", ";", ";"], props => props.theme.rtl && 'rtl', props => props.isVertical && verticalStyling(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 StyledTabs.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var TabsContext = React.createContext(undefined);
-var useTabsContext = function useTabsContext() {
+const TabsContext = React.createContext(undefined);
+const useTabsContext = () => {
   return React.useContext(TabsContext);
 };
 
-var _excluded$2 = ["disabled", "item"];
-var Tab = React__default["default"].forwardRef(function (_ref, ref) {
-  var disabled = _ref.disabled,
-      item = _ref.item,
-      otherProps = _objectWithoutProperties(_ref, _excluded$2);
-  var tabsPropGetters = useTabsContext();
-  var tabRef = React__default["default"].createRef();
+const Tab = React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    disabled,
+    item,
+    ...otherProps
+  } = _ref;
+  const tabsPropGetters = useTabsContext();
+  const tabRef = React__default["default"].createRef();
   if (disabled || !tabsPropGetters) {
     return React__default["default"].createElement(StyledTab, _extends({
       role: "tab",
@@ -307,8 +132,8 @@ var Tab = React__default["default"].forwardRef(function (_ref, ref) {
       ref: mergeRefs__default["default"]([tabRef, ref])
     }, otherProps));
   }
-  var tabProps = tabsPropGetters.getTabProps({
-    item: item,
+  const tabProps = tabsPropGetters.getTabProps({
+    item,
     focusRef: tabRef,
     index: tabsPropGetters.tabIndexRef.current++
   });
@@ -324,32 +149,33 @@ Tab.propTypes = {
   item: PropTypes__default["default"].any
 };
 
-var TabList = React__default["default"].forwardRef(function (props, ref) {
-  var tabsPropGetters = useTabsContext();
+const TabList = React__default["default"].forwardRef((props, ref) => {
+  const tabsPropGetters = useTabsContext();
   if (!tabsPropGetters) {
     return React__default["default"].createElement(StyledTabList, _extends({
       ref: ref
     }, props));
   }
-  var tabListProps = tabsPropGetters.getTabListProps();
+  const tabListProps = tabsPropGetters.getTabListProps();
   return React__default["default"].createElement(StyledTabList, _extends({}, tabListProps, props, {
     ref: ref
   }));
 });
 TabList.displayName = 'TabList';
 
-var _excluded$1 = ["item"];
-var TabPanel = React__default["default"].forwardRef(function (_ref, ref) {
-  var item = _ref.item,
-      otherProps = _objectWithoutProperties(_ref, _excluded$1);
-  var tabsPropGetters = useTabsContext();
+const TabPanel = React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    item,
+    ...otherProps
+  } = _ref;
+  const tabsPropGetters = useTabsContext();
   if (!tabsPropGetters) {
     return React__default["default"].createElement(StyledTabPanel, _extends({
       ref: ref
     }, otherProps));
   }
-  var tabPanelProps = tabsPropGetters.getTabPanelProps({
-    item: item,
+  const tabPanelProps = tabsPropGetters.getTabPanelProps({
+    item,
     index: tabsPropGetters.tabPanelIndexRef.current++
   });
   return React__default["default"].createElement(StyledTabPanel, _extends({
@@ -363,27 +189,25 @@ TabPanel.propTypes = {
   item: PropTypes__default["default"].any
 };
 
-var _excluded = ["isVertical", "children", "onChange", "selectedItem"];
-var Tabs = React.forwardRef(function (_ref, ref) {
-  var isVertical = _ref.isVertical,
-      children = _ref.children,
-      onChange = _ref.onChange,
-      controlledSelectedItem = _ref.selectedItem,
-      otherProps = _objectWithoutProperties(_ref, _excluded);
-  var theme = React.useContext(styled.ThemeContext) || reactTheming.DEFAULT_THEME;
-  var _useState = React.useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      internalSelectedItem = _useState2[0],
-      setInternalSelectedItem = _useState2[1];
-  var tabIndexRef = React.useRef(0);
-  var tabPanelIndexRef = React.useRef(0);
-  var selectedItem = containerUtilities.getControlledValue(controlledSelectedItem, internalSelectedItem);
-  var tabPropGetters = containerTabs.useTabs({
+const Tabs = React.forwardRef((_ref, ref) => {
+  let {
+    isVertical,
+    children,
+    onChange,
+    selectedItem: controlledSelectedItem,
+    ...otherProps
+  } = _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({
     rtl: theme.rtl,
     orientation: isVertical ? 'vertical' : 'horizontal',
-    selectedItem: selectedItem,
+    selectedItem,
     defaultSelectedIndex: 0,
-    onSelect: function onSelect(item) {
+    onSelect: item => {
       if (onChange) {
         onChange(item);
       } else {
@@ -391,12 +215,11 @@ var Tabs = React.forwardRef(function (_ref, ref) {
       }
     }
   });
-  var tabsContextValue = React.useMemo(function () {
-    return _objectSpread2(_objectSpread2({}, tabPropGetters), {}, {
-      tabIndexRef: tabIndexRef,
-      tabPanelIndexRef: tabPanelIndexRef
-    });
-  }, [tabPropGetters]);
+  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

@@ -14,281 +14,106 @@ import { stripUnit } from 'polished';
 import { useTabs } from '@zendeskgarden/container-tabs';
 import { getControlledValue } from '@zendeskgarden/container-utilities';
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-  }
-
-  return target;
-}
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-
-  var _s, _e;
-
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-var COMPONENT_ID$3 = 'tabs.tab';
-var colorStyles = function colorStyles(_ref) {
-  var theme = _ref.theme,
-      isSelected = _ref.isSelected;
-  var selectedColor = getColor('primaryHue', 600, theme);
-  return css(["border-color:", ";color:", ";&:hover{color:", ";}&:active{border-color:currentColor;color:", ";}&[data-garden-focus-visible]{color:", ";}&[data-garden-focus-visible]::before{box-shadow:inset ", ";}&[aria-disabled='true']{border-color:transparent;color:", ";}"], isSelected && 'currentColor !important', isSelected ? selectedColor : 'inherit', selectedColor, selectedColor, selectedColor, theme.shadows.sm(getColor('primaryHue', 600, theme, 0.35)), function (props) {
-    return getColor('neutralHue', 400, props.theme);
-  });
+const COMPONENT_ID$3 = 'tabs.tab';
+const colorStyles = _ref => {
+  let {
+    theme,
+    isSelected
+  } = _ref;
+  const selectedColor = getColor('primaryHue', 600, theme);
+  return css(["border-color:", ";color:", ";&:hover{color:", ";}&:active{border-color:currentColor;color:", ";}&[data-garden-focus-visible]{color:", ";}&[data-garden-focus-visible]::before{box-shadow:inset ", ";}&[aria-disabled='true']{border-color:transparent;color:", ";}"], isSelected && 'currentColor !important', isSelected ? selectedColor : 'inherit', selectedColor, selectedColor, selectedColor, theme.shadows.sm(getColor('primaryHue', 600, theme, 0.35)), props => getColor('neutralHue', 400, props.theme));
 };
-var sizeStyles = function sizeStyles(_ref2) {
-  var theme = _ref2.theme;
-  var paddingTop = theme.space.base * 2.5;
-  var paddingHorizontal = theme.space.base * 7;
-  var paddingBottom = paddingTop - stripUnit(theme.borderWidths.md) - stripUnit(theme.borderWidths.sm);
+const sizeStyles = _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  const paddingTop = theme.space.base * 2.5;
+  const paddingHorizontal = theme.space.base * 7;
+  const paddingBottom = paddingTop - stripUnit(theme.borderWidths.md) - stripUnit(theme.borderWidths.sm);
   return css(["padding:", "px ", "px ", "px;"], paddingTop, paddingHorizontal, paddingBottom);
 };
-var StyledTab = styled.div.attrs(function (props) {
-  return {
-    'data-garden-id': COMPONENT_ID$3,
-    'data-garden-version': '8.57.1',
-    'aria-disabled': props.disabled
-  };
-}).withConfig({
+const StyledTab = styled.div.attrs(props => ({
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '8.58.0',
+  'aria-disabled': props.disabled
+})).withConfig({
   displayName: "StyledTab",
   componentId: "sc-x2pbow-0"
-})(["display:inline-block;position:relative;transition:color 0.25s ease-in-out;border-bottom:", " transparent;border-width:", ";cursor:pointer;overflow:hidden;vertical-align:top;user-select:none;text-align:center;text-decoration:none;text-overflow:ellipsis;", " ", " &:focus{outline:none;text-decoration:none;}&[data-garden-focus-visible]::before{position:absolute;top:", "px;right:", "px;left:", "px;border-radius:", ";height:", "px;pointer-events:none;}&::before{transition:box-shadow 0.1s ease-in-out;content:'';}&:active::before{box-shadow:none;}&[aria-disabled='true']{cursor:default;}", ";"], function (props) {
-  return props.theme.borderStyles.solid;
-}, function (props) {
-  return props.theme.borderWidths.md;
-}, sizeStyles, colorStyles, function (props) {
-  return props.theme.space.base * 2.5;
-}, function (props) {
-  return props.theme.space.base * 6;
-}, function (props) {
-  return props.theme.space.base * 6;
-}, function (props) {
-  return props.theme.borderRadii.md;
-}, function (props) {
-  return props.theme.space.base * 5;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$3, props);
-});
+})(["display:inline-block;position:relative;transition:color 0.25s ease-in-out;border-bottom:", " transparent;border-width:", ";cursor:pointer;overflow:hidden;vertical-align:top;user-select:none;text-align:center;text-decoration:none;text-overflow:ellipsis;", " ", " &:focus{outline:none;text-decoration:none;}&[data-garden-focus-visible]::before{position:absolute;top:", "px;right:", "px;left:", "px;border-radius:", ";height:", "px;pointer-events:none;}&::before{transition:box-shadow 0.1s ease-in-out;content:'';}&:active::before{box-shadow:none;}&[aria-disabled='true']{cursor:default;}", ";"], props => props.theme.borderStyles.solid, props => props.theme.borderWidths.md, sizeStyles, colorStyles, props => props.theme.space.base * 2.5, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.theme.borderRadii.md, props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledTab.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$2 = 'tabs.tablist';
-var StyledTabList = styled.div.attrs({
+const COMPONENT_ID$2 = 'tabs.tablist';
+const StyledTabList = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).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:", ";", ";"], function (props) {
-  return props.theme.space.base * 5;
-}, function (props) {
-  return props.theme.borderWidths.sm;
-}, function (props) {
-  return props.theme.borderStyles.solid;
-}, function (props) {
-  return getColor('neutralHue', 300, props.theme);
-}, function (props) {
-  return props.theme.space.base * 5;
-}, function (props) {
-  return getColor('neutralHue', 600, props.theme);
-}, function (props) {
-  return props.theme.fontSizes.md;
-}, function (props) {
-  return 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 => 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));
 StyledTabList.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$1 = 'tabs.tabpanel';
-var StyledTabPanel = styled.div.attrs({
+const COMPONENT_ID$1 = 'tabs.tabpanel';
+const StyledTabPanel = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledTabPanel",
   componentId: "sc-7lhrmp-0"
-})(["display:block;&[aria-hidden='true']{display:none;}", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$1, props);
-});
+})(["display:block;&[aria-hidden='true']{display:none;}", ";"], props => retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledTabPanel.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID = 'tabs.tabs';
-var verticalStyling = function verticalStyling(_ref) {
-  var theme = _ref.theme;
+const COMPONENT_ID = 'tabs.tabs';
+const verticalStyling = _ref => {
+  let {
+    theme
+  } = _ref;
   return css(["display:table;", "{display:table-cell;margin-bottom:0;border-bottom:none;vertical-align:top;}", "{display:block;margin-bottom:", "px;margin-left:", ";border-left:", ";border-bottom-style:none;border-", "-style:", ";border-", "-color:transparent;padding:", "px ", "px;text-align:", ";&:last-of-type{margin-bottom:0;}&[data-garden-focus-visible]::before{top:", "px;right:", "px;left:", "px;}}", "{margin-", ":", "px;vertical-align:top;}"], StyledTabList, StyledTab, theme.space.base * 5, theme.rtl && '0', theme.rtl && '0', theme.rtl ? 'right' : 'left', theme.borderStyles.solid, theme.rtl ? 'right' : 'left', theme.space.base, theme.space.base * 2, theme.rtl ? 'right' : 'left', theme.space.base, theme.space.base, theme.space.base, StyledTabPanel, theme.rtl ? 'right' : 'left', theme.space.base * 8);
 };
-var StyledTabs = styled.div.attrs({
+const StyledTabs = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledTabs",
   componentId: "sc-1qaor65-0"
-})(["display:block;overflow:hidden;direction:", ";", ";", ";"], function (props) {
-  return props.theme.rtl && 'rtl';
-}, function (props) {
-  return props.isVertical && verticalStyling(props);
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID, props);
-});
+})(["display:block;overflow:hidden;direction:", ";", ";", ";"], props => props.theme.rtl && 'rtl', props => props.isVertical && verticalStyling(props), props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledTabs.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var TabsContext = createContext(undefined);
-var useTabsContext = function useTabsContext() {
+const TabsContext = createContext(undefined);
+const useTabsContext = () => {
   return useContext(TabsContext);
 };
 
-var _excluded$2 = ["disabled", "item"];
-var Tab = React.forwardRef(function (_ref, ref) {
-  var disabled = _ref.disabled,
-      item = _ref.item,
-      otherProps = _objectWithoutProperties(_ref, _excluded$2);
-  var tabsPropGetters = useTabsContext();
-  var tabRef = React.createRef();
+const Tab = React.forwardRef((_ref, ref) => {
+  let {
+    disabled,
+    item,
+    ...otherProps
+  } = _ref;
+  const tabsPropGetters = useTabsContext();
+  const tabRef = React.createRef();
   if (disabled || !tabsPropGetters) {
     return React.createElement(StyledTab, _extends({
       role: "tab",
@@ -296,8 +121,8 @@ var Tab = React.forwardRef(function (_ref, ref) {
       ref: mergeRefs([tabRef, ref])
     }, otherProps));
   }
-  var tabProps = tabsPropGetters.getTabProps({
-    item: item,
+  const tabProps = tabsPropGetters.getTabProps({
+    item,
     focusRef: tabRef,
     index: tabsPropGetters.tabIndexRef.current++
   });
@@ -313,32 +138,33 @@ Tab.propTypes = {
   item: PropTypes.any
 };
 
-var TabList = React.forwardRef(function (props, ref) {
-  var tabsPropGetters = useTabsContext();
+const TabList = React.forwardRef((props, ref) => {
+  const tabsPropGetters = useTabsContext();
   if (!tabsPropGetters) {
     return React.createElement(StyledTabList, _extends({
       ref: ref
     }, props));
   }
-  var tabListProps = tabsPropGetters.getTabListProps();
+  const tabListProps = tabsPropGetters.getTabListProps();
   return React.createElement(StyledTabList, _extends({}, tabListProps, props, {
     ref: ref
   }));
 });
 TabList.displayName = 'TabList';
 
-var _excluded$1 = ["item"];
-var TabPanel = React.forwardRef(function (_ref, ref) {
-  var item = _ref.item,
-      otherProps = _objectWithoutProperties(_ref, _excluded$1);
-  var tabsPropGetters = useTabsContext();
+const TabPanel = React.forwardRef((_ref, ref) => {
+  let {
+    item,
+    ...otherProps
+  } = _ref;
+  const tabsPropGetters = useTabsContext();
   if (!tabsPropGetters) {
     return React.createElement(StyledTabPanel, _extends({
       ref: ref
     }, otherProps));
   }
-  var tabPanelProps = tabsPropGetters.getTabPanelProps({
-    item: item,
+  const tabPanelProps = tabsPropGetters.getTabPanelProps({
+    item,
     index: tabsPropGetters.tabPanelIndexRef.current++
   });
   return React.createElement(StyledTabPanel, _extends({
@@ -352,27 +178,25 @@ TabPanel.propTypes = {
   item: PropTypes.any
 };
 
-var _excluded = ["isVertical", "children", "onChange", "selectedItem"];
-var Tabs = forwardRef(function (_ref, ref) {
-  var isVertical = _ref.isVertical,
-      children = _ref.children,
-      onChange = _ref.onChange,
-      controlledSelectedItem = _ref.selectedItem,
-      otherProps = _objectWithoutProperties(_ref, _excluded);
-  var theme = useContext(ThemeContext) || DEFAULT_THEME;
-  var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      internalSelectedItem = _useState2[0],
-      setInternalSelectedItem = _useState2[1];
-  var tabIndexRef = useRef(0);
-  var tabPanelIndexRef = useRef(0);
-  var selectedItem = getControlledValue(controlledSelectedItem, internalSelectedItem);
-  var tabPropGetters = useTabs({
+const Tabs = forwardRef((_ref, ref) => {
+  let {
+    isVertical,
+    children,
+    onChange,
+    selectedItem: controlledSelectedItem,
+    ...otherProps
+  } = _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({
     rtl: theme.rtl,
     orientation: isVertical ? 'vertical' : 'horizontal',
-    selectedItem: selectedItem,
+    selectedItem,
     defaultSelectedIndex: 0,
-    onSelect: function onSelect(item) {
+    onSelect: item => {
       if (onChange) {
         onChange(item);
       } else {
@@ -380,12 +204,11 @@ var Tabs = forwardRef(function (_ref, ref) {
       }
     }
   });
-  var tabsContextValue = useMemo(function () {
-    return _objectSpread2(_objectSpread2({}, tabPropGetters), {}, {
-      tabIndexRef: tabIndexRef,
-      tabPanelIndexRef: tabPanelIndexRef
-    });
-  }, [tabPropGetters]);
+  const tabsContextValue = useMemo(() => ({
+    ...tabPropGetters,
+    tabIndexRef,
+    tabPanelIndexRef
+  }), [tabPropGetters]);
   return React.createElement(TabsContext.Provider, {
     value: tabsContextValue
   }, React.createElement(StyledTabs, _extends({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-tabs",
-  "version": "8.57.1",
+  "version": "8.58.0",
   "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": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.57.1"
+    "@zendeskgarden/react-theming": "^8.58.0"
   },
   "keywords": [
     "components",
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "3e903f3c7013221ef01d3f81a50489505490be7b"
+  "gitHead": "07760a92573b619860e1252f6931467b9123f1b6"
 }