carbon-react 107.1.3 → 107.1.4

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

@@ -33,12 +33,9 @@ const Tabs = ({
   const filteredChildren = useMemo(() => 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 tabIds = useMemo(() => filteredChildren.map(child => child.props.tabId), [filteredChildren]);
   /** Array of refs to the TabTitle nodes */
 
-
   const tabRefs = useMemo(() => Array.from({
     length: filteredChildren.length
   }).map(() => /*#__PURE__*/createRef()), [filteredChildren.length]);
@@ -54,14 +51,14 @@ const Tabs = ({
   useLayoutEffect(() => {
     const selectedTab = selectedTabId || Children.toArray(children)[0].props.tabId;
 
-    if (!tabIds().includes(selectedTabId)) {
+    if (!tabIds.includes(selectedTabId)) {
       setTabStopId(React.Children.toArray(children)[0].props.tabId);
     } else {
       setTabStopId(selectedTab);
     }
 
-    setSelectedTabIdState(selectedTab); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    setSelectedTabIdState(selectedTab);
+  }, [children, selectedTabId, tabIds]);
   const updateErrors = useCallback((id, hasError) => {
     if (tabsErrors[id] !== hasError) {
       setTabsErrors({ ...tabsErrors,
@@ -102,6 +99,27 @@ const Tabs = ({
       onTabChange(tabid);
     }
   }, [onTabChange, isTabSelected, hasTabStop]);
+  const blurPreviousSelectedTab = useCallback(() => {
+    const previousTabIndex = tabIds.indexOf(previousSelectedTabId.current);
+    /* istanbul ignore else */
+
+    if (previousTabIndex !== -1) {
+      var _previousTabRef$curre;
+
+      const previousTabRef = tabRefs[previousTabIndex];
+      (_previousTabRef$curre = previousTabRef.current) === null || _previousTabRef$curre === void 0 ? void 0 : _previousTabRef$curre.blur();
+    }
+  }, [tabIds, tabRefs]);
+  useEffect(() => {
+    if (previousSelectedTabId.current !== selectedTabId) {
+      if (selectedTabId !== selectedTabIdState) {
+        setSelectedTabIdState(selectedTabId);
+        blurPreviousSelectedTab();
+      }
+
+      previousSelectedTabId.current = selectedTabId;
+    }
+  }, [blurPreviousSelectedTab, previousSelectedTabId, selectedTabId, selectedTabIdState]);
   /** Determines if the tab titles are in a vertical format. */
 
   const isVertical = currentPosition => currentPosition === "left";
@@ -128,15 +146,14 @@ const Tabs = ({
   const goToTab = (event, index) => {
     event.preventDefault();
     let newIndex = index;
-    const ids = tabIds();
 
     if (index < 0) {
-      newIndex = ids.length - 1;
-    } else if (index === ids.length) {
+      newIndex = tabIds.length - 1;
+    } else if (index === tabIds.length) {
       newIndex = 0;
     }
 
-    const nextTabId = ids[newIndex];
+    const nextTabId = tabIds[newIndex];
     const nextRef = tabRefs[newIndex];
     updateVisibleTab(nextTabId);
     focusTab(nextRef);
@@ -274,15 +291,6 @@ const Tabs = ({
     return tabs;
   };
 
-  useEffect(() => {
-    if (previousSelectedTabId.current !== selectedTabId) {
-      if (selectedTabId !== selectedTabIdState) {
-        setSelectedTabIdState(selectedTabId);
-      }
-
-      previousSelectedTabId.current = selectedTabId;
-    }
-  }, [previousSelectedTabId, selectedTabId, selectedTabIdState]);
   return /*#__PURE__*/React.createElement(StyledTabs, _extends({
     className: className,
     position: isInSidebar ? "left" : position,

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

@@ -63,12 +63,9 @@ const Tabs = ({
   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);
-  };
+  const tabIds = (0, _react.useMemo)(() => filteredChildren.map(child => child.props.tabId), [filteredChildren]);
   /** Array of refs to the TabTitle nodes */
 
-
   const tabRefs = (0, _react.useMemo)(() => Array.from({
     length: filteredChildren.length
   }).map(() => /*#__PURE__*/(0, _react.createRef)()), [filteredChildren.length]);
@@ -84,14 +81,14 @@ const Tabs = ({
   (0, _react.useLayoutEffect)(() => {
     const selectedTab = selectedTabId || _react.Children.toArray(children)[0].props.tabId;
 
-    if (!tabIds().includes(selectedTabId)) {
+    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
-  }, []);
+    setSelectedTabIdState(selectedTab);
+  }, [children, selectedTabId, tabIds]);
   const updateErrors = (0, _react.useCallback)((id, hasError) => {
     if (tabsErrors[id] !== hasError) {
       setTabsErrors({ ...tabsErrors,
@@ -132,6 +129,27 @@ const Tabs = ({
       onTabChange(tabid);
     }
   }, [onTabChange, isTabSelected, hasTabStop]);
+  const blurPreviousSelectedTab = (0, _react.useCallback)(() => {
+    const previousTabIndex = tabIds.indexOf(previousSelectedTabId.current);
+    /* istanbul ignore else */
+
+    if (previousTabIndex !== -1) {
+      var _previousTabRef$curre;
+
+      const previousTabRef = tabRefs[previousTabIndex];
+      (_previousTabRef$curre = previousTabRef.current) === null || _previousTabRef$curre === void 0 ? void 0 : _previousTabRef$curre.blur();
+    }
+  }, [tabIds, tabRefs]);
+  (0, _react.useEffect)(() => {
+    if (previousSelectedTabId.current !== selectedTabId) {
+      if (selectedTabId !== selectedTabIdState) {
+        setSelectedTabIdState(selectedTabId);
+        blurPreviousSelectedTab();
+      }
+
+      previousSelectedTabId.current = selectedTabId;
+    }
+  }, [blurPreviousSelectedTab, previousSelectedTabId, selectedTabId, selectedTabIdState]);
   /** Determines if the tab titles are in a vertical format. */
 
   const isVertical = currentPosition => currentPosition === "left";
@@ -158,15 +176,14 @@ const Tabs = ({
   const goToTab = (event, index) => {
     event.preventDefault();
     let newIndex = index;
-    const ids = tabIds();
 
     if (index < 0) {
-      newIndex = ids.length - 1;
-    } else if (index === ids.length) {
+      newIndex = tabIds.length - 1;
+    } else if (index === tabIds.length) {
       newIndex = 0;
     }
 
-    const nextTabId = ids[newIndex];
+    const nextTabId = tabIds[newIndex];
     const nextRef = tabRefs[newIndex];
     updateVisibleTab(nextTabId);
     focusTab(nextRef);
@@ -310,15 +327,6 @@ const Tabs = ({
     return tabs;
   };
 
-  (0, _react.useEffect)(() => {
-    if (previousSelectedTabId.current !== selectedTabId) {
-      if (selectedTabId !== selectedTabIdState) {
-        setSelectedTabIdState(selectedTabId);
-      }
-
-      previousSelectedTabId.current = selectedTabId;
-    }
-  }, [previousSelectedTabId, selectedTabId, selectedTabIdState]);
   return /*#__PURE__*/_react.default.createElement(_tabs.default, _extends({
     className: className,
     position: isInSidebar ? "left" : position,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "107.1.3",
+  "version": "107.1.4",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -18,8 +18,8 @@
     "start:debug-theme": "cross-env STORYBOOK_DEBUG_THEME=true npm run start",
     "test": "jest --config=./jest.conf.json",
     "test-update": "jest --config=./jest.conf.json --updateSnapshot",
-    "test:cypress": "cypress open",
-    "cypress:react": "npx cypress open-ct",
+    "test:cypress": "npx cypress open --e2e",
+    "cypress:react": "npx cypress open --component",
     "debug": "node --inspect ./node_modules/jest-cli/bin/jest --watch --config=./jest.conf.json",
     "format": "prettier --write './src'",
     "lint": "eslint ./src",
@@ -115,7 +115,7 @@
     "core-js": "^3.20.3",
     "cross-env": "^5.2.0",
     "css-loader": "4.0.0",
-    "cypress": "^9.6.0",
+    "cypress": "^10.1.0",
     "cypress-axe": "^0.14.0",
     "cypress-cucumber-preprocessor": "^4.3.1",
     "cypress-each": "^1.11.0",