carbon-addons-iot-react 2.147.2 → 2.147.3

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.147.3](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.147.2...v2.147.3) (2022-01-27)
+
+
+### Bug Fixes
+
+* **suite-header:** do not allow tabbing to closed app switcher panel ([7ac17ba](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/7ac17ba151eee24a3f71df0679e69cacf5287f58))
+
+
+
+
+
 ## [2.147.2](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.147.1...v2.147.2) (2022-01-26)
 
 

package/es/components/Header/HeaderAction/HeaderActionPanel.js

@@ -119,7 +119,13 @@ var HeaderActionPanel = function HeaderActionPanel(_ref) {
     }, metaData, {
       onClick: onClick,
       onKeyDown: handleSpecificKeyDown(['Enter', ' '], onKeyDown)
-    }), childItem.content));
+    }), // if we're working with an actual react component (not an html element) pass
+    // the isExpanded prop, so we can control tab-navigation on the closed AppSwitcher
+
+    /*#__PURE__*/
+    React__default.isValidElement(childItem.content) && typeof childItem.content.type !== 'string' ? /*#__PURE__*/React__default.cloneElement(childItem.content, {
+      isExpanded: isExpanded
+    }) : childItem.content));
   }))));
 };
 

package/es/components/Header/HeaderActionGroup.js

@@ -160,7 +160,7 @@ var HeaderActionGroup = function HeaderActionGroup(_ref) {
            * know whether the OverflowMenu is open and adjust the icons accordingly. This double-click
            * only occurs when changing the icon. If the same icon is always used it works as expected.
            * My guess is this is because of the outsideClickClosing that the overflow menu does. WHen the
-           * icon is change it is "outside" of the element for a momemnt and causes a close--that or a re-render that
+           * icon is change it is "outside" of the element for a moment and causes a close--that or a re-render that
            * is triggered when the icon changes.
            */
           var button = target.closest('button');

package/es/components/SuiteHeader/SuiteHeader.js

@@ -357,8 +357,11 @@ var SuiteHeader = function SuiteHeader(_ref) {
       handleSideNavButtonClick(evt);
     },
     headerPanel: {
-      content: /*#__PURE__*/React__default.forwardRef(function () {
+      // eslint-disable-next-line react/prop-types
+      content: /*#__PURE__*/React__default.forwardRef(function (_ref5, ref) {
+        var isExpanded = _ref5.isExpanded;
         return /*#__PURE__*/React__default.createElement(SuiteHeaderAppSwitcher, {
+          ref: ref,
           applications: applications,
           customApplications: customApplications,
           allApplicationsLink: routes === null || routes === void 0 ? void 0 : routes.navigator,
@@ -370,7 +373,8 @@ var SuiteHeader = function SuiteHeader(_ref) {
             requestAccess: mergedI18N.switcherRequestAccess,
             learnMoreLink: mergedI18N.switcherLearnMoreLink
           },
-          testId: "".concat(testId, "-app-switcher")
+          testId: "".concat(testId, "-app-switcher"),
+          isExpanded: isExpanded
         });
       })
     },

package/es/components/SuiteHeader/SuiteHeaderAppSwitcher/SuiteHeaderAppSwitcher.js

@@ -57,7 +57,8 @@ var defaultProps = {
     requestAccess: 'Contact your administrator to request application access.',
     learnMoreLink: 'Learn more'
   },
-  testId: 'suite-header-app-switcher'
+  testId: 'suite-header-app-switcher',
+  isExpanded: false
 };
 var propTypes = {
   applications: PropTypes.arrayOf(PropTypes.shape(SuiteHeaderApplicationPropTypes)),
@@ -70,7 +71,8 @@ var propTypes = {
     requestAccess: PropTypes.string,
     learnMoreLink: PropTypes.string
   }),
-  testId: PropTypes.string
+  testId: PropTypes.string,
+  isExpanded: PropTypes.bool
 };
 
 var SuiteHeaderAppSwitcher = function SuiteHeaderAppSwitcher(_ref) {
@@ -80,7 +82,8 @@ var SuiteHeaderAppSwitcher = function SuiteHeaderAppSwitcher(_ref) {
       noAccessLink = _ref.noAccessLink,
       i18n = _ref.i18n,
       onRouteChange = _ref.onRouteChange,
-      testId = _ref.testId;
+      testId = _ref.testId,
+      isExpanded = _ref.isExpanded;
 
   var mergedI18n = _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
 
@@ -161,6 +164,7 @@ var SuiteHeaderAppSwitcher = function SuiteHeaderAppSwitcher(_ref) {
       return _ref4.apply(this, arguments);
     };
   }(), [allApplicationsLink, onRouteChange]);
+  var tabIndex = isExpanded ? 0 : -1;
   return /*#__PURE__*/React__default.createElement("ul", {
     "data-testid": testId,
     className: baseClassName
@@ -173,7 +177,8 @@ var SuiteHeaderAppSwitcher = function SuiteHeaderAppSwitcher(_ref) {
     testId: "".concat(testId, "--all-applications"),
     onClick: handleAllApplicationRoute,
     onKeyDown: handleSpecificKeyDown(['Enter', 'Space'], handleAllApplicationRoute),
-    renderIcon: ArrowRight16
+    renderIcon: ArrowRight16,
+    tabIndex: tabIndex
   }, mergedI18n.allApplicationsLink)), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(baseClassName, "--nav-link--separator")
   }), mergedApplications === null ? /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement("div", {
@@ -201,7 +206,8 @@ var SuiteHeaderAppSwitcher = function SuiteHeaderAppSwitcher(_ref) {
       kind: "ghost",
       testId: "".concat(testId, "--").concat(id),
       onClick: eventHandler,
-      onKeyDown: handleSpecificKeyDown(['Enter', 'Space'], eventHandler)
+      onKeyDown: handleSpecificKeyDown(['Enter', 'Space'], eventHandler),
+      tabIndex: tabIndex
     }, name));
   }), (mergedApplications === null || mergedApplications === void 0 ? void 0 : mergedApplications.length) === 0 ? /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(baseClassName, "--no-app")
@@ -234,7 +240,8 @@ var SuiteHeaderAppSwitcher = function SuiteHeaderAppSwitcher(_ref) {
           }
         }
       }, _callee4);
-    }))
+    })),
+    tabIndex: tabIndex
   }, mergedI18n.learnMoreLink)) : null);
 };
 
@@ -335,6 +342,17 @@ SuiteHeaderAppSwitcher.__docgenInfo = {
       "required": false,
       "description": ""
     },
+    "isExpanded": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
     "noAccessLink": {
       "type": {
         "name": "string"

package/lib/components/Header/HeaderAction/HeaderActionPanel.js

@@ -130,7 +130,13 @@ var HeaderActionPanel = function HeaderActionPanel(_ref) {
     }, metaData, {
       onClick: onClick,
       onKeyDown: componentUtilityFunctions.handleSpecificKeyDown(['Enter', ' '], onKeyDown)
-    }), childItem.content));
+    }), // if we're working with an actual react component (not an html element) pass
+    // the isExpanded prop, so we can control tab-navigation on the closed AppSwitcher
+
+    /*#__PURE__*/
+    React__default['default'].isValidElement(childItem.content) && typeof childItem.content.type !== 'string' ? /*#__PURE__*/React__default['default'].cloneElement(childItem.content, {
+      isExpanded: isExpanded
+    }) : childItem.content));
   }))));
 };
 

package/lib/components/Header/HeaderActionGroup.js

@@ -171,7 +171,7 @@ var HeaderActionGroup = function HeaderActionGroup(_ref) {
            * know whether the OverflowMenu is open and adjust the icons accordingly. This double-click
            * only occurs when changing the icon. If the same icon is always used it works as expected.
            * My guess is this is because of the outsideClickClosing that the overflow menu does. WHen the
-           * icon is change it is "outside" of the element for a momemnt and causes a close--that or a re-render that
+           * icon is change it is "outside" of the element for a moment and causes a close--that or a re-render that
            * is triggered when the icon changes.
            */
           var button = target.closest('button');

package/lib/components/SuiteHeader/SuiteHeader.js

@@ -372,8 +372,11 @@ var SuiteHeader = function SuiteHeader(_ref) {
       handleSideNavButtonClick(evt);
     },
     headerPanel: {
-      content: /*#__PURE__*/React__default['default'].forwardRef(function () {
+      // eslint-disable-next-line react/prop-types
+      content: /*#__PURE__*/React__default['default'].forwardRef(function (_ref5, ref) {
+        var isExpanded = _ref5.isExpanded;
         return /*#__PURE__*/React__default['default'].createElement(SuiteHeaderAppSwitcher, {
+          ref: ref,
           applications: applications,
           customApplications: customApplications,
           allApplicationsLink: routes === null || routes === void 0 ? void 0 : routes.navigator,
@@ -385,7 +388,8 @@ var SuiteHeader = function SuiteHeader(_ref) {
             requestAccess: mergedI18N.switcherRequestAccess,
             learnMoreLink: mergedI18N.switcherLearnMoreLink
           },
-          testId: "".concat(testId, "-app-switcher")
+          testId: "".concat(testId, "-app-switcher"),
+          isExpanded: isExpanded
         });
       })
     },

package/lib/components/SuiteHeader/SuiteHeaderAppSwitcher/SuiteHeaderAppSwitcher.js

@@ -68,7 +68,8 @@ var defaultProps = {
     requestAccess: 'Contact your administrator to request application access.',
     learnMoreLink: 'Learn more'
   },
-  testId: 'suite-header-app-switcher'
+  testId: 'suite-header-app-switcher',
+  isExpanded: false
 };
 var propTypes = {
   applications: PropTypes__default['default'].arrayOf(PropTypes__default['default'].shape(SuiteHeaderPropTypes.SuiteHeaderApplicationPropTypes)),
@@ -81,7 +82,8 @@ var propTypes = {
     requestAccess: PropTypes__default['default'].string,
     learnMoreLink: PropTypes__default['default'].string
   }),
-  testId: PropTypes__default['default'].string
+  testId: PropTypes__default['default'].string,
+  isExpanded: PropTypes__default['default'].bool
 };
 
 var SuiteHeaderAppSwitcher = function SuiteHeaderAppSwitcher(_ref) {
@@ -91,7 +93,8 @@ var SuiteHeaderAppSwitcher = function SuiteHeaderAppSwitcher(_ref) {
       noAccessLink = _ref.noAccessLink,
       i18n = _ref.i18n,
       onRouteChange = _ref.onRouteChange,
-      testId = _ref.testId;
+      testId = _ref.testId,
+      isExpanded = _ref.isExpanded;
 
   var mergedI18n = _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
 
@@ -172,6 +175,7 @@ var SuiteHeaderAppSwitcher = function SuiteHeaderAppSwitcher(_ref) {
       return _ref4.apply(this, arguments);
     };
   }(), [allApplicationsLink, onRouteChange]);
+  var tabIndex = isExpanded ? 0 : -1;
   return /*#__PURE__*/React__default['default'].createElement("ul", {
     "data-testid": testId,
     className: baseClassName
@@ -184,7 +188,8 @@ var SuiteHeaderAppSwitcher = function SuiteHeaderAppSwitcher(_ref) {
     testId: "".concat(testId, "--all-applications"),
     onClick: handleAllApplicationRoute,
     onKeyDown: componentUtilityFunctions.handleSpecificKeyDown(['Enter', 'Space'], handleAllApplicationRoute),
-    renderIcon: iconsReact.ArrowRight16
+    renderIcon: iconsReact.ArrowRight16,
+    tabIndex: tabIndex
   }, mergedI18n.allApplicationsLink)), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "".concat(baseClassName, "--nav-link--separator")
   }), mergedApplications === null ? /*#__PURE__*/React__default['default'].createElement("li", null, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -212,7 +217,8 @@ var SuiteHeaderAppSwitcher = function SuiteHeaderAppSwitcher(_ref) {
       kind: "ghost",
       testId: "".concat(testId, "--").concat(id),
       onClick: eventHandler,
-      onKeyDown: componentUtilityFunctions.handleSpecificKeyDown(['Enter', 'Space'], eventHandler)
+      onKeyDown: componentUtilityFunctions.handleSpecificKeyDown(['Enter', 'Space'], eventHandler),
+      tabIndex: tabIndex
     }, name));
   }), (mergedApplications === null || mergedApplications === void 0 ? void 0 : mergedApplications.length) === 0 ? /*#__PURE__*/React__default['default'].createElement("div", {
     className: "".concat(baseClassName, "--no-app")
@@ -245,7 +251,8 @@ var SuiteHeaderAppSwitcher = function SuiteHeaderAppSwitcher(_ref) {
           }
         }
       }, _callee4);
-    }))
+    })),
+    tabIndex: tabIndex
   }, mergedI18n.learnMoreLink)) : null);
 };
 
@@ -346,6 +353,17 @@ SuiteHeaderAppSwitcher.__docgenInfo = {
       "required": false,
       "description": ""
     },
+    "isExpanded": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
     "noAccessLink": {
       "type": {
         "name": "string"

package/package.json

@@ -340,10 +340,10 @@
     "whatwg-fetch": "^3.0.0"
   },
   "sideEffects": false,
-  "version": "2.147.2",
+  "version": "2.147.3",
   "resolutions": {
     "chokidar": "3.3.1",
     "react-grid-layout": "1.2.2"
   },
-  "gitHead": "16a2a7871d2c44bf16dcf97893148cc6413eda9e"
+  "gitHead": "53fa40581e33f8b87ca9baddb05563d62760170e"
 }

package/umd/carbon-addons-iot-react.js

@@ -122317,7 +122317,13 @@
 	    }, metaData, {
 	      onClick: onClick,
 	      onKeyDown: handleSpecificKeyDown(['Enter', ' '], onKeyDown)
-	    }), childItem.content));
+	    }), // if we're working with an actual react component (not an html element) pass
+	    // the isExpanded prop, so we can control tab-navigation on the closed AppSwitcher
+
+	    /*#__PURE__*/
+	    React__default$1['default'].isValidElement(childItem.content) && typeof childItem.content.type !== 'string' ? /*#__PURE__*/React__default$1['default'].cloneElement(childItem.content, {
+	      isExpanded: isExpanded
+	    }) : childItem.content));
 	  }))));
 	};
 
@@ -122668,7 +122674,7 @@
 	           * know whether the OverflowMenu is open and adjust the icons accordingly. This double-click
 	           * only occurs when changing the icon. If the same icon is always used it works as expected.
 	           * My guess is this is because of the outsideClickClosing that the overflow menu does. WHen the
-	           * icon is change it is "outside" of the element for a momemnt and causes a close--that or a re-render that
+	           * icon is change it is "outside" of the element for a moment and causes a close--that or a re-render that
 	           * is triggered when the icon changes.
 	           */
 	          var button = target.closest('button');
@@ -124467,7 +124473,8 @@
 	    requestAccess: 'Contact your administrator to request application access.',
 	    learnMoreLink: 'Learn more'
 	  },
-	  testId: 'suite-header-app-switcher'
+	  testId: 'suite-header-app-switcher',
+	  isExpanded: false
 	};
 	var propTypes$18 = {
 	  applications: PropTypes__default['default'].arrayOf(PropTypes__default['default'].shape(SuiteHeaderApplicationPropTypes)),
@@ -124480,7 +124487,8 @@
 	    requestAccess: PropTypes__default['default'].string,
 	    learnMoreLink: PropTypes__default['default'].string
 	  }),
-	  testId: PropTypes__default['default'].string
+	  testId: PropTypes__default['default'].string,
+	  isExpanded: PropTypes__default['default'].bool
 	};
 
 	var SuiteHeaderAppSwitcher = function SuiteHeaderAppSwitcher(_ref) {
@@ -124490,7 +124498,8 @@
 	      noAccessLink = _ref.noAccessLink,
 	      i18n = _ref.i18n,
 	      onRouteChange = _ref.onRouteChange,
-	      testId = _ref.testId;
+	      testId = _ref.testId,
+	      isExpanded = _ref.isExpanded;
 
 	  var mergedI18n = _objectSpread$Z(_objectSpread$Z({}, defaultProps$1b.i18n), i18n);
 
@@ -124571,6 +124580,7 @@
 	      return _ref4.apply(this, arguments);
 	    };
 	  }(), [allApplicationsLink, onRouteChange]);
+	  var tabIndex = isExpanded ? 0 : -1;
 	  return /*#__PURE__*/React__default$1['default'].createElement("ul", {
 	    "data-testid": testId,
 	    className: baseClassName
@@ -124583,7 +124593,8 @@
 	    testId: "".concat(testId, "--all-applications"),
 	    onClick: handleAllApplicationRoute,
 	    onKeyDown: handleSpecificKeyDown(['Enter', 'Space'], handleAllApplicationRoute),
-	    renderIcon: iconsReact.ArrowRight16
+	    renderIcon: iconsReact.ArrowRight16,
+	    tabIndex: tabIndex
 	  }, mergedI18n.allApplicationsLink)), /*#__PURE__*/React__default$1['default'].createElement("div", {
 	    className: "".concat(baseClassName, "--nav-link--separator")
 	  }), mergedApplications === null ? /*#__PURE__*/React__default$1['default'].createElement("li", null, /*#__PURE__*/React__default$1['default'].createElement("div", {
@@ -124611,7 +124622,8 @@
 	      kind: "ghost",
 	      testId: "".concat(testId, "--").concat(id),
 	      onClick: eventHandler,
-	      onKeyDown: handleSpecificKeyDown(['Enter', 'Space'], eventHandler)
+	      onKeyDown: handleSpecificKeyDown(['Enter', 'Space'], eventHandler),
+	      tabIndex: tabIndex
 	    }, name));
 	  }), (mergedApplications === null || mergedApplications === void 0 ? void 0 : mergedApplications.length) === 0 ? /*#__PURE__*/React__default$1['default'].createElement("div", {
 	    className: "".concat(baseClassName, "--no-app")
@@ -124644,7 +124656,8 @@
 	          }
 	        }
 	      }, _callee4);
-	    }))
+	    })),
+	    tabIndex: tabIndex
 	  }, mergedI18n.learnMoreLink)) : null);
 	};
 
@@ -124745,6 +124758,17 @@
 	      "required": false,
 	      "description": ""
 	    },
+	    "isExpanded": {
+	      "defaultValue": {
+	        "value": "false",
+	        "computed": false
+	      },
+	      "type": {
+	        "name": "bool"
+	      },
+	      "required": false,
+	      "description": ""
+	    },
 	    "noAccessLink": {
 	      "type": {
 	        "name": "string"
@@ -125240,8 +125264,11 @@
 	      handleSideNavButtonClick(evt);
 	    },
 	    headerPanel: {
-	      content: /*#__PURE__*/React__default$1['default'].forwardRef(function () {
+	      // eslint-disable-next-line react/prop-types
+	      content: /*#__PURE__*/React__default$1['default'].forwardRef(function (_ref5, ref) {
+	        var isExpanded = _ref5.isExpanded;
 	        return /*#__PURE__*/React__default$1['default'].createElement(SuiteHeaderAppSwitcher, {
+	          ref: ref,
 	          applications: applications,
 	          customApplications: customApplications,
 	          allApplicationsLink: routes === null || routes === void 0 ? void 0 : routes.navigator,
@@ -125253,7 +125280,8 @@
 	            requestAccess: mergedI18N.switcherRequestAccess,
 	            learnMoreLink: mergedI18N.switcherLearnMoreLink
 	          },
-	          testId: "".concat(testId, "-app-switcher")
+	          testId: "".concat(testId, "-app-switcher"),
+	          isExpanded: isExpanded
 	        });
 	      })
 	    },