carbon-react 111.3.2 → 111.3.3

package/esm/components/tabs/tab/tab.component.js

@@ -21,6 +21,7 @@ const Tab = ({
   updateWarnings,
   updateInfos,
   href,
+  title,
   ...rest
 }) => {
   const [tabErrors, setTabErrors] = useState({});

package/esm/components/tabs/tabs.component.js

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign || 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); }
 
-import React, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, createRef, cloneElement, Children } from "react";
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState, createRef, cloneElement, Children } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
 import Tab from "./tab";
@@ -40,7 +40,7 @@ const Tabs = ({
     length: filteredChildren.length
   }).map(() => /*#__PURE__*/createRef()), [filteredChildren.length]);
   const previousSelectedTabId = useRef(selectedTabId);
-  const [selectedTabIdState, setSelectedTabIdState] = useState();
+  const [selectedTabIdState, setSelectedTabIdState] = useState(selectedTabId || filteredChildren[0].props.tabId);
   const [tabStopId, setTabStopId] = useState();
   const {
     isInSidebar
@@ -48,17 +48,6 @@ const Tabs = ({
   const [tabsErrors, setTabsErrors] = useState({});
   const [tabsWarnings, setTabsWarnings] = useState({});
   const [tabsInfos, setTabsInfos] = useState({});
-  useLayoutEffect(() => {
-    const selectedTab = selectedTabId || Children.toArray(children)[0].props.tabId;
-
-    if (!tabIds.includes(selectedTabId)) {
-      setTabStopId(React.Children.toArray(children)[0].props.tabId);
-    } else {
-      setTabStopId(selectedTab);
-    }
-
-    setSelectedTabIdState(selectedTab);
-  }, [children, selectedTabId, tabIds]);
   const updateErrors = useCallback((id, hasError) => {
     if (tabsErrors[id] !== hasError) {
       setTabsErrors({ ...tabsErrors,
@@ -249,13 +238,8 @@ const Tabs = ({
 
 
   const visibleTab = () => {
-    let tab;
-    filteredChildren.forEach(child => {
-      if (isTabSelected(child.props.tabId)) {
-        tab = child;
-      }
-    });
-    return tab ? /*#__PURE__*/cloneElement(tab, { ...tab.props,
+    const tab = filteredChildren.find(child => isTabSelected(child.props.tabId));
+    return tab && /*#__PURE__*/cloneElement(tab, { ...tab.props,
       role: "tabpanel",
       position,
       isTabSelected: isTabSelected(tab.props.tabId),
@@ -264,7 +248,7 @@ const Tabs = ({
       updateErrors,
       updateWarnings,
       updateInfos
-    }) : null;
+    });
   };
   /** Builds all tabs where non selected tabs have class of hidden */
 

package/lib/components/tabs/tab/tab.component.js

@@ -42,6 +42,7 @@ const Tab = ({
   updateWarnings,
   updateInfos,
   href,
+  title,
   ...rest
 }) => {
   const [tabErrors, setTabErrors] = (0, _react.useState)({});

package/lib/components/tabs/tabs.component.js

@@ -70,7 +70,7 @@ const Tabs = ({
     length: filteredChildren.length
   }).map(() => /*#__PURE__*/(0, _react.createRef)()), [filteredChildren.length]);
   const previousSelectedTabId = (0, _react.useRef)(selectedTabId);
-  const [selectedTabIdState, setSelectedTabIdState] = (0, _react.useState)();
+  const [selectedTabIdState, setSelectedTabIdState] = (0, _react.useState)(selectedTabId || filteredChildren[0].props.tabId);
   const [tabStopId, setTabStopId] = (0, _react.useState)();
   const {
     isInSidebar
@@ -78,17 +78,6 @@ const Tabs = ({
   const [tabsErrors, setTabsErrors] = (0, _react.useState)({});
   const [tabsWarnings, setTabsWarnings] = (0, _react.useState)({});
   const [tabsInfos, setTabsInfos] = (0, _react.useState)({});
-  (0, _react.useLayoutEffect)(() => {
-    const selectedTab = selectedTabId || _react.Children.toArray(children)[0].props.tabId;
-
-    if (!tabIds.includes(selectedTabId)) {
-      setTabStopId(_react.default.Children.toArray(children)[0].props.tabId);
-    } else {
-      setTabStopId(selectedTab);
-    }
-
-    setSelectedTabIdState(selectedTab);
-  }, [children, selectedTabId, tabIds]);
   const updateErrors = (0, _react.useCallback)((id, hasError) => {
     if (tabsErrors[id] !== hasError) {
       setTabsErrors({ ...tabsErrors,
@@ -285,13 +274,8 @@ const Tabs = ({
 
 
   const visibleTab = () => {
-    let tab;
-    filteredChildren.forEach(child => {
-      if (isTabSelected(child.props.tabId)) {
-        tab = child;
-      }
-    });
-    return tab ? /*#__PURE__*/(0, _react.cloneElement)(tab, { ...tab.props,
+    const tab = filteredChildren.find(child => isTabSelected(child.props.tabId));
+    return tab && /*#__PURE__*/(0, _react.cloneElement)(tab, { ...tab.props,
       role: "tabpanel",
       position,
       isTabSelected: isTabSelected(tab.props.tabId),
@@ -300,7 +284,7 @@ const Tabs = ({
       updateErrors,
       updateWarnings,
       updateInfos
-    }) : null;
+    });
   };
   /** Builds all tabs where non selected tabs have class of hidden */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "111.3.2",
+  "version": "111.3.3",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",