carbon-react 95.0.0 → 95.0.1

package/lib/components/tabs/__internal__/tab-title/tab-title.style.js

@@ -344,10 +344,6 @@ const StyledTabTitle = _styledComponents.default.li`
         padding-bottom: 0px;
       `}
 
-    &:focus {
-      outline: ${isInSidebar ? "none;" : `2px solid ${theme.colors.focus};`}
-    }
-
     &:hover {
       background-color: ${theme.colors.white};
       border-bottom-color: ${alternateStyling ? `${theme.tab.background};` : `${theme.colors.primary};`}
@@ -355,6 +351,16 @@ const StyledTabTitle = _styledComponents.default.li`
       cursor: default;
     }
   `}
+
+  ${({
+  theme,
+  isInSidebar
+}) => `
+    &:focus {
+      outline: ${isInSidebar ? "none;" : `2px solid ${theme.colors.focus};`}
+      z-index: 1;
+    }
+  `}
   
   ${({
   position,

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

@@ -59,9 +59,22 @@ const Tabs = ({
   headerWidth,
   ...rest
 }) => {
-  const tabRefs = (0, _react.useRef)([]);
+  /** The children nodes converted into an Array */
+  const filteredChildren = (0, _react.useMemo)(() => _react.Children.toArray(children).filter(child => child), [children]);
+  /** Array of the tabIds for the child nodes */
+
+  const tabIds = () => {
+    return filteredChildren.map(child => child.props.tabId);
+  };
+  /** Array of refs to the TabTitle nodes */
+
+
+  const tabRefs = (0, _react.useMemo)(() => Array.from({
+    length: filteredChildren.length
+  }).map(() => /*#__PURE__*/(0, _react.createRef)()), [filteredChildren.length]);
   const previousSelectedTabId = (0, _react.useRef)(selectedTabId);
   const [selectedTabIdState, setSelectedTabIdState] = (0, _react.useState)();
+  const [tabStopId, setTabStopId] = (0, _react.useState)();
   const {
     isInSidebar
   } = (0, _react.useContext)(_drawer.DrawerSidebarContext);
@@ -69,7 +82,13 @@ const Tabs = ({
   const [tabsWarnings, setTabsWarnings] = (0, _react.useState)({});
   const [tabsInfos, setTabsInfos] = (0, _react.useState)({});
   (0, _react.useLayoutEffect)(() => {
-    const selectedTab = selectedTabId || _react.default.Children.toArray(children)[0].props.tabId;
+    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); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -94,15 +113,25 @@ const Tabs = ({
       });
     }
   }, [tabsInfos]);
+  /** Returns true/false for if the given tab id is selected. */
+
+  const isTabSelected = (0, _react.useCallback)(tabId => tabId === selectedTabIdState, [selectedTabIdState]);
+  const hasTabStop = (0, _react.useCallback)(tabId => tabId === tabStopId, [tabStopId]);
   /** Updates the currently visible tab */
 
   const updateVisibleTab = (0, _react.useCallback)(tabid => {
-    setSelectedTabIdState(tabid);
+    if (!isTabSelected(tabid)) {
+      setSelectedTabIdState(tabid);
+    }
+
+    if (!hasTabStop(tabid)) {
+      setTabStopId(tabid);
+    }
 
     if (onTabChange) {
       onTabChange(tabid);
     }
-  }, [onTabChange]);
+  }, [onTabChange, isTabSelected, hasTabStop]);
   /** Determines if the tab titles are in a vertical format. */
 
   const isVertical = currentPosition => currentPosition === "left";
@@ -122,17 +151,7 @@ const Tabs = ({
   /** Focuses the tab for the reference specified */
 
 
-  const focusTab = ref => ref.focus();
-  /** The children nodes converted into an Array */
-
-
-  const filteredChildren = _react.default.useMemo(() => _react.default.Children.toArray(children).filter(child => child), [children]);
-  /** Array of the tabIds for the child nodes */
-
-
-  const tabIds = () => {
-    return filteredChildren.map(child => child.props.tabId);
-  };
+  const focusTab = ref => ref.current.focus();
   /** Will trigger the tab at the given index. */
 
 
@@ -148,7 +167,7 @@ const Tabs = ({
     }
 
     const nextTabId = ids[newIndex];
-    const nextRef = tabRefs.current[newIndex];
+    const nextRef = tabRefs[newIndex];
     updateVisibleTab(nextTabId);
     focusTab(nextRef);
   };
@@ -174,16 +193,6 @@ const Tabs = ({
       }
     };
   };
-  /** Returns true/false for if the given tab id is selected. */
-
-
-  const isTabSelected = tabId => tabId === selectedTabIdState;
-
-  const addRef = ref => {
-    if (ref && !tabRefs.current.includes(ref)) {
-      tabRefs.current.push(ref);
-    }
-  };
   /** Build the headers for the tab component */
 
 
@@ -220,8 +229,8 @@ const Tabs = ({
         key: tabId,
         onClick: handleTabClick,
         onKeyDown: handleKeyDown(index),
-        ref: node => addRef(node),
-        tabIndex: isTabSelected(tabId) ? "0" : "-1",
+        ref: tabRefs[index],
+        tabIndex: isTabSelected(tabId) || hasTabStop(tabId) ? "0" : "-1",
         title: title,
         href: href,
         isTabSelected: isTabSelected(tabId),
@@ -239,7 +248,16 @@ const Tabs = ({
         noLeftBorder: ["no left side", "no sides"].includes(borders),
         noRightBorder: ["no right side", "no sides"].includes(borders),
         customLayout: customLayout,
-        isInSidebar: isInSidebar
+        isInSidebar: isInSidebar,
+        onFocus: () => {
+          if (!hasTabStop(tabId)) {
+            setTabStopId(tabId);
+          }
+
+          if (!isTabSelected(tabId)) {
+            updateVisibleTab(tabId);
+          }
+        }
       });
 
       return tabTitle;
@@ -264,7 +282,7 @@ const Tabs = ({
         tab = child;
       }
     });
-    return tab ? /*#__PURE__*/_react.default.cloneElement(tab, {
+    return tab ? /*#__PURE__*/(0, _react.cloneElement)(tab, {
       isTabSelected: isTabSelected(tab.props.tabId)
     }) : null;
   };
@@ -279,7 +297,7 @@ const Tabs = ({
     }
 
     const tabs = filteredChildren.map(child => {
-      return /*#__PURE__*/_react.default.cloneElement(child, { ...child.props,
+      return /*#__PURE__*/(0, _react.cloneElement)(child, { ...child.props,
         role: "tabpanel",
         position,
         isTabSelected: isTabSelected(child.props.tabId),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "95.0.0",
+  "version": "95.0.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {