carbon-addons-iot-react 2.147.0 → 2.147.3

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/SideNav/SideNav.js

@@ -203,6 +203,11 @@ var SideNav = function SideNav(_ref) {
 
 SideNav.propTypes = SideNavPropTypes;
 SideNav.defaultProps = defaultProps;
+SideNav$1.displayName = 'SideNav';
+SideNavItems.displayName = 'SideNavItems';
+SideNavLink.displayName = 'SideNavLink';
+SideNavMenu.displayName = 'SideNavMenu';
+SideNavMenuItem.displayName = 'SideNavMenuItem';
 SideNav.__docgenInfo = {
   "description": "Side Navigation. part of UI shell",
   "methods": [],

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/es/components/Table/TableToolbar/TableToolbar.js

@@ -251,24 +251,16 @@ var TableToolbar = function TableToolbar(_ref) {
       setIsOpen = _useDynamicOverflowMe2[1],
       renderToolbarOverflowActions = _useDynamicOverflowMe2[2];
 
-  var hasToolbarOverflowActions = typeof toolbarActions === 'function' || (toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.length) > 0 && toolbarActions.some(function (action) {
-    return action.isOverflow;
-  });
-  var visibleToolbarActions = useMemo(function () {
-    var _toolbarActions$filte;
-
-    if (typeof toolbarActions === 'function') {
-      return toolbarActions().filter(function (_ref2) {
-        var isOverflow = _ref2.isOverflow;
-        return !isOverflow;
-      });
-    }
-
-    return (_toolbarActions$filte = toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.filter(function (_ref3) {
-      var isOverflow = _ref3.isOverflow;
-      return !isOverflow;
-    })) !== null && _toolbarActions$filte !== void 0 ? _toolbarActions$filte : [];
+  var actions = useMemo(function () {
+    var renderedActions = typeof toolbarActions === 'function' ? toolbarActions() : toolbarActions;
+    return renderedActions !== null && renderedActions !== void 0 && renderedActions.length ? renderedActions : [];
   }, [toolbarActions]);
+  var hasToolbarOverflowActions = actions.filter(function (action) {
+    return action.isOverflow && action.hidden !== true;
+  }).length > 0;
+  var visibleToolbarActions = actions.filter(function (action) {
+    return !action.isOverflow && action.hidden !== true;
+  });
   return /*#__PURE__*/React__default.createElement(CarbonTableToolbar // TODO: remove deprecated 'testID' in v3
   , {
     "data-testid": testID || testId,
@@ -288,10 +280,10 @@ var TableToolbar = function TableToolbar(_ref) {
 
       return tableTranslateWithId.apply(void 0, [i18n].concat(args));
     }
-  }, batchActions.map(function (_ref4) {
-    var id = _ref4.id,
-        labelText = _ref4.labelText,
-        others = _objectWithoutProperties(_ref4, ["id", "labelText"]);
+  }, batchActions.map(function (_ref2) {
+    var id = _ref2.id,
+        labelText = _ref2.labelText,
+        others = _objectWithoutProperties(_ref2, ["id", "labelText"]);
 
     return /*#__PURE__*/React__default.createElement(TableBatchAction, _extends({
       key: id,

package/es/components/Table/tableUtilities.js

@@ -1,8 +1,10 @@
 import 'core-js/modules/web.dom-collections.for-each.js';
 import 'core-js/modules/es.array.find.js';
 import React__default from 'react';
+import { settings } from '../../constants/Settings.js';
 import icons from '../../utils/bundledIcons.js';
 
+var prefix = settings.prefix;
 /**
  * Use this function to traverse the tree structure of a set of table rows using Depth-first search (DFS)
  * and apply some function on each row. The function is applied once the recursion starts back-tracking.
@@ -92,7 +94,9 @@ var renderTableOverflowItemText = function renderTableOverflowItemText(_ref) {
     title: action.labelText
   }, typeof action.renderIcon === 'string' ? renderBundledIconUsingName(action.renderIcon, action.labelText) : /*#__PURE__*/React__default.createElement(action.renderIcon, {
     description: action.labelText
-  }), action.labelText) : action.labelText;
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--overflow-menu-options__option-content")
+  }, action.labelText)) : action.labelText;
 };
 renderBundledIconUsingName.__docgenInfo = {
   "description": "",

package/es/hooks/useDynamicOverflowMenuItems.js

@@ -62,7 +62,8 @@ var useDynamicOverflowMenuItems = function useDynamicOverflowMenuItems(_ref) {
         requireTitle: !action.renderIcon,
         disabled: isDisabled || action.disabled,
         hasDivider: action.hasDivider,
-        isDelete: action.isDelete
+        isDelete: action.isDelete,
+        "aria-label": action.labelText
       });
     });
   }, [actions, className, isDisabled, _onClick, testId]);

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/SideNav/SideNav.js

@@ -216,6 +216,11 @@ var SideNav = function SideNav(_ref) {
 
 SideNav.propTypes = SideNavPropTypes;
 SideNav.defaultProps = defaultProps;
+SideNav$1.displayName = 'SideNav';
+SideNavItems.displayName = 'SideNavItems';
+SideNavLink.displayName = 'SideNavLink';
+index.SideNavMenu.displayName = 'SideNavMenu';
+SideNavMenuItem.displayName = 'SideNavMenuItem';
 SideNav.__docgenInfo = {
   "description": "Side Navigation. part of UI shell",
   "methods": [],

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/lib/components/Table/TableToolbar/TableToolbar.js

@@ -263,24 +263,16 @@ var TableToolbar = function TableToolbar(_ref) {
       setIsOpen = _useDynamicOverflowMe2[1],
       renderToolbarOverflowActions = _useDynamicOverflowMe2[2];
 
-  var hasToolbarOverflowActions = typeof toolbarActions === 'function' || (toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.length) > 0 && toolbarActions.some(function (action) {
-    return action.isOverflow;
-  });
-  var visibleToolbarActions = React.useMemo(function () {
-    var _toolbarActions$filte;
-
-    if (typeof toolbarActions === 'function') {
-      return toolbarActions().filter(function (_ref2) {
-        var isOverflow = _ref2.isOverflow;
-        return !isOverflow;
-      });
-    }
-
-    return (_toolbarActions$filte = toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.filter(function (_ref3) {
-      var isOverflow = _ref3.isOverflow;
-      return !isOverflow;
-    })) !== null && _toolbarActions$filte !== void 0 ? _toolbarActions$filte : [];
+  var actions = React.useMemo(function () {
+    var renderedActions = typeof toolbarActions === 'function' ? toolbarActions() : toolbarActions;
+    return renderedActions !== null && renderedActions !== void 0 && renderedActions.length ? renderedActions : [];
   }, [toolbarActions]);
+  var hasToolbarOverflowActions = actions.filter(function (action) {
+    return action.isOverflow && action.hidden !== true;
+  }).length > 0;
+  var visibleToolbarActions = actions.filter(function (action) {
+    return !action.isOverflow && action.hidden !== true;
+  });
   return /*#__PURE__*/React__default['default'].createElement(CarbonTableToolbar // TODO: remove deprecated 'testID' in v3
   , {
     "data-testid": testID || testId,
@@ -300,10 +292,10 @@ var TableToolbar = function TableToolbar(_ref) {
 
       return componentUtilityFunctions.tableTranslateWithId.apply(void 0, [i18n].concat(args));
     }
-  }, batchActions.map(function (_ref4) {
-    var id = _ref4.id,
-        labelText = _ref4.labelText,
-        others = _objectWithoutProperties__default['default'](_ref4, ["id", "labelText"]);
+  }, batchActions.map(function (_ref2) {
+    var id = _ref2.id,
+        labelText = _ref2.labelText,
+        others = _objectWithoutProperties__default['default'](_ref2, ["id", "labelText"]);
 
     return /*#__PURE__*/React__default['default'].createElement(TableBatchAction, _extends__default['default']({
       key: id,

package/lib/components/Table/tableUtilities.js

@@ -5,12 +5,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('core-js/modules/web.dom-collections.for-each.js');
 require('core-js/modules/es.array.find.js');
 var React = require('react');
+var Settings = require('../../constants/Settings.js');
 var bundledIcons = require('../../utils/bundledIcons.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+var prefix = Settings.settings.prefix;
 /**
  * Use this function to traverse the tree structure of a set of table rows using Depth-first search (DFS)
  * and apply some function on each row. The function is applied once the recursion starts back-tracking.
@@ -100,7 +102,9 @@ var renderTableOverflowItemText = function renderTableOverflowItemText(_ref) {
     title: action.labelText
   }, typeof action.renderIcon === 'string' ? renderBundledIconUsingName(action.renderIcon, action.labelText) : /*#__PURE__*/React__default['default'].createElement(action.renderIcon, {
     description: action.labelText
-  }), action.labelText) : action.labelText;
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "".concat(prefix, "--overflow-menu-options__option-content")
+  }, action.labelText)) : action.labelText;
 };
 renderBundledIconUsingName.__docgenInfo = {
   "description": "",

package/lib/css/carbon-addons-iot-react.css

@@ -35757,12 +35757,14 @@ html[dir=rtl] .iot--table-batch-actions .bx--btn--primary.bx--batch-summary__can
   display: flex;
   align-items: center;
   text-align: left;
+  min-width: 0;
 }
 [dir=rtl] .iot--table-toolbar-aggregations__overflow-menu-content {
   text-align: right;
 }
 .iot--table-toolbar-aggregations__overflow-menu-content svg {
   margin-right: 0.5rem;
+  flex-shrink: 0;
 }
 [dir=rtl] .iot--table-toolbar-aggregations__overflow-menu-content svg {
   margin-right: 0;