carbon-addons-iot-react 5.2.3 → 5.3.0

package/es/components/SideNav/SideNav.js

@@ -22,7 +22,7 @@ import 'core-js/modules/es.string.replace.js';
 import 'core-js/modules/web.dom-collections.for-each.js';
 import { Search, SideNavItems, SideNav as SideNav$2, SideNavLink, SideNavMenu, SideNavMenuItem } from '@carbon/react';
 import PropTypes from 'prop-types';
-import React__default, { useState } from 'react';
+import React__default, { useState, useEffect } from 'react';
 import classnames from 'classnames';
 import { settings } from '../../constants/Settings.js';
 import { CarbonIconPropType } from '../../constants/SharedPropTypes.js';
@@ -30,7 +30,7 @@ import { handleSpecificKeyDown } from '../../utils/componentUtilityFunctions.js'
 import { SideNavMetaDataPropType } from './sideNavPropTypes.js';
 import FilterableSideNavMenu from './FilterableSideNavMenu.js';
 
-var _excluded = ["links", "defaultExpanded", "hasSearch", "isSideNavExpanded", "i18n", "testId", "recentLinks"];
+var _excluded = ["links", "defaultExpanded", "hasSearch", "isSideNavExpanded", "i18n", "testId", "recentLinks", "onFilterItems"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var iotPrefix = settings.iotPrefix,
@@ -161,7 +161,8 @@ var SideNavPropTypes = {
     searchPlaceholder: PropTypes.string,
     searchLabelText: PropTypes.string
   }),
-  testId: PropTypes.string
+  testId: PropTypes.string,
+  onFilterItems: PropTypes.func
 };
 var defaultProps = {
   defaultExpanded: false,
@@ -178,7 +179,8 @@ var defaultProps = {
     searchLabelText: 'Find navigation item'
   },
   testId: 'side-nav',
-  recentLinks: []
+  recentLinks: [],
+  onFilterItems: function onFilterItems() {}
 };
 
 /**
@@ -210,6 +212,7 @@ var SideNav = function SideNav(_ref) {
     i18n = _ref.i18n,
     testId = _ref.testId,
     recentLinks = _ref.recentLinks,
+    onFilterItems = _ref.onFilterItems,
     props = _objectWithoutProperties(_ref, _excluded);
   /**
    * Recursive function for rendering all the nested children nav items
@@ -220,11 +223,12 @@ var SideNav = function SideNav(_ref) {
    * @returns ReactElement
    */
   var renderLinkMenu = function renderLinkMenu(link, index) {
-    var _link$metaData;
+    var _link$metaData, _link$metaData2;
     var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
     var searchValue = arguments.length > 3 ? arguments[3] : undefined;
     var isFiltering = searchValue !== undefined;
     var parentActive = false;
+    var tabIndex = searchValue && (_link$metaData = link.metaData) !== null && _link$metaData !== void 0 && _link$metaData.getTabIndexBasedOnSearch ? link.metaData.getTabIndexBasedOnSearch(link, index) : (_link$metaData2 = link.metaData) === null || _link$metaData2 === void 0 ? void 0 : _link$metaData2.tabIndex;
     var children = link.childContent.map(function (childLink, childIndex) {
       if (isAnyChildActive(childLink)) {
         parentActive = true;
@@ -253,10 +257,13 @@ var SideNav = function SideNav(_ref) {
       title: link.linkContent,
       testId: "".concat(testId, "-menu-").concat(index),
       className: "".concat(iotPrefix, "--side-nav__item--depth-").concat(level)
-    }, (_link$metaData = link.metaData) !== null && _link$metaData !== void 0 ? _link$metaData : {}), children);
+    }, link.metaData ? _objectSpread(_objectSpread({}, link.metaData), {}, {
+      tabIndex: tabIndex
+    }) : {}), children);
   };
   var renderLinks = function renderLinks(linkConfigurations, searchValue) {
     return linkConfigurations.map(function (link, index) {
+      var _link$metaData3, _link$metaData4;
       if (!link.isEnabled) {
         return null;
       }
@@ -265,6 +272,7 @@ var SideNav = function SideNav(_ref) {
       }
       var isFiltering = searchValue !== undefined;
       var content = searchValue ? markText(link.linkContent, searchValue) : link.linkContent;
+      var tabIndex = searchValue && (_link$metaData3 = link.metaData) !== null && _link$metaData3 !== void 0 && _link$metaData3.getTabIndexBasedOnSearch ? link.metaData.getTabIndexBasedOnSearch(link, index) : (_link$metaData4 = link.metaData) === null || _link$metaData4 === void 0 ? void 0 : _link$metaData4.tabIndex;
       return /*#__PURE__*/React__default.createElement(SideNavLink, _extends({
         key: "menu-link-".concat(link.metaData.label.replace(/\s/g, ''), "-global"),
         "aria-label": link.metaData.label,
@@ -274,7 +282,9 @@ var SideNav = function SideNav(_ref) {
         isActive: link.isActive,
         "data-testid": "".concat(testId, "-link-").concat(index),
         className: classnames(link.metaData.className, _defineProperty({}, "".concat(iotPrefix, "--side-nav__item--is-filtering"), isFiltering))
-      }, link.metaData), content);
+      }, link.metaData ? _objectSpread(_objectSpread({}, link.metaData), {}, {
+        tabIndex: tabIndex
+      }) : {}), content);
     }).filter(function (i) {
       return i;
     });
@@ -302,6 +312,9 @@ var SideNav = function SideNav(_ref) {
     var linksToRender = isSearching ? filterLinks(filterableLinks, newSearchValue) : filterableLinks;
     setRenderedFilterableLinks(renderLinks(linksToRender, newSearchValue));
   };
+  useEffect(function () {
+    onFilterItems(renderedFilterableLinks);
+  }, [onFilterItems, renderedFilterableLinks]);
   var search = hasSearch ? [/*#__PURE__*/React__default.createElement(Search, {
     key: "sidenav-search",
     id: "sidenav-search",
@@ -531,6 +544,17 @@ SideNav.__docgenInfo = {
       },
       "required": false
     },
+    "onFilterItems": {
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
     "links": {
       "description": "array of link item objects",
       "type": {

package/lib/components/SideNav/SideNav.js

@@ -45,7 +45,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
-var _excluded = ["links", "defaultExpanded", "hasSearch", "isSideNavExpanded", "i18n", "testId", "recentLinks"];
+var _excluded = ["links", "defaultExpanded", "hasSearch", "isSideNavExpanded", "i18n", "testId", "recentLinks", "onFilterItems"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var iotPrefix = Settings.settings.iotPrefix,
@@ -176,7 +176,8 @@ var SideNavPropTypes = {
     searchPlaceholder: PropTypes__default.default.string,
     searchLabelText: PropTypes__default.default.string
   }),
-  testId: PropTypes__default.default.string
+  testId: PropTypes__default.default.string,
+  onFilterItems: PropTypes__default.default.func
 };
 var defaultProps = {
   defaultExpanded: false,
@@ -193,7 +194,8 @@ var defaultProps = {
     searchLabelText: 'Find navigation item'
   },
   testId: 'side-nav',
-  recentLinks: []
+  recentLinks: [],
+  onFilterItems: function onFilterItems() {}
 };
 
 /**
@@ -225,6 +227,7 @@ var SideNav = function SideNav(_ref) {
     i18n = _ref.i18n,
     testId = _ref.testId,
     recentLinks = _ref.recentLinks,
+    onFilterItems = _ref.onFilterItems,
     props = _objectWithoutProperties__default.default(_ref, _excluded);
   /**
    * Recursive function for rendering all the nested children nav items
@@ -235,11 +238,12 @@ var SideNav = function SideNav(_ref) {
    * @returns ReactElement
    */
   var renderLinkMenu = function renderLinkMenu(link, index) {
-    var _link$metaData;
+    var _link$metaData, _link$metaData2;
     var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
     var searchValue = arguments.length > 3 ? arguments[3] : undefined;
     var isFiltering = searchValue !== undefined;
     var parentActive = false;
+    var tabIndex = searchValue && (_link$metaData = link.metaData) !== null && _link$metaData !== void 0 && _link$metaData.getTabIndexBasedOnSearch ? link.metaData.getTabIndexBasedOnSearch(link, index) : (_link$metaData2 = link.metaData) === null || _link$metaData2 === void 0 ? void 0 : _link$metaData2.tabIndex;
     var children = link.childContent.map(function (childLink, childIndex) {
       if (isAnyChildActive(childLink)) {
         parentActive = true;
@@ -268,10 +272,13 @@ var SideNav = function SideNav(_ref) {
       title: link.linkContent,
       testId: "".concat(testId, "-menu-").concat(index),
       className: "".concat(iotPrefix, "--side-nav__item--depth-").concat(level)
-    }, (_link$metaData = link.metaData) !== null && _link$metaData !== void 0 ? _link$metaData : {}), children);
+    }, link.metaData ? _objectSpread(_objectSpread({}, link.metaData), {}, {
+      tabIndex: tabIndex
+    }) : {}), children);
   };
   var renderLinks = function renderLinks(linkConfigurations, searchValue) {
     return linkConfigurations.map(function (link, index) {
+      var _link$metaData3, _link$metaData4;
       if (!link.isEnabled) {
         return null;
       }
@@ -280,6 +287,7 @@ var SideNav = function SideNav(_ref) {
       }
       var isFiltering = searchValue !== undefined;
       var content = searchValue ? markText(link.linkContent, searchValue) : link.linkContent;
+      var tabIndex = searchValue && (_link$metaData3 = link.metaData) !== null && _link$metaData3 !== void 0 && _link$metaData3.getTabIndexBasedOnSearch ? link.metaData.getTabIndexBasedOnSearch(link, index) : (_link$metaData4 = link.metaData) === null || _link$metaData4 === void 0 ? void 0 : _link$metaData4.tabIndex;
       return /*#__PURE__*/React__default.default.createElement(react.SideNavLink, _extends__default.default({
         key: "menu-link-".concat(link.metaData.label.replace(/\s/g, ''), "-global"),
         "aria-label": link.metaData.label,
@@ -289,7 +297,9 @@ var SideNav = function SideNav(_ref) {
         isActive: link.isActive,
         "data-testid": "".concat(testId, "-link-").concat(index),
         className: classnames__default.default(link.metaData.className, _defineProperty__default.default({}, "".concat(iotPrefix, "--side-nav__item--is-filtering"), isFiltering))
-      }, link.metaData), content);
+      }, link.metaData ? _objectSpread(_objectSpread({}, link.metaData), {}, {
+        tabIndex: tabIndex
+      }) : {}), content);
     }).filter(function (i) {
       return i;
     });
@@ -317,6 +327,9 @@ var SideNav = function SideNav(_ref) {
     var linksToRender = isSearching ? filterLinks(filterableLinks, newSearchValue) : filterableLinks;
     setRenderedFilterableLinks(renderLinks(linksToRender, newSearchValue));
   };
+  React.useEffect(function () {
+    onFilterItems(renderedFilterableLinks);
+  }, [onFilterItems, renderedFilterableLinks]);
   var search = hasSearch ? [/*#__PURE__*/React__default.default.createElement(react.Search, {
     key: "sidenav-search",
     id: "sidenav-search",
@@ -546,6 +559,17 @@ SideNav.__docgenInfo = {
       },
       "required": false
     },
+    "onFilterItems": {
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
     "links": {
       "description": "array of link item objects",
       "type": {

package/package.json

@@ -353,11 +353,11 @@
     "whatwg-fetch": "^3.0.0"
   },
   "sideEffects": false,
-  "version": "5.2.3",
+  "version": "5.3.0",
   "resolutions": {
     "chokidar": "3.3.1",
     "react-grid-layout": "1.2.2",
     "got": "11.8.5"
   },
-  "gitHead": "88b39b71a6b7785ea33a6cac05b081d23a4c8e1f"
+  "gitHead": "618cd9183f7cf300a87976a4dfb375de3e82a493"
 }

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

@@ -259111,7 +259111,7 @@ ${formatRule(Codicon.menuSubmenu)}
   };
   var FilterableSideNavMenu$1 = FilterableSideNavMenu;
 
-  var _excluded$u = ["links", "defaultExpanded", "hasSearch", "isSideNavExpanded", "i18n", "testId", "recentLinks"];
+  var _excluded$u = ["links", "defaultExpanded", "hasSearch", "isSideNavExpanded", "i18n", "testId", "recentLinks", "onFilterItems"];
   function ownKeys$1b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
   function _objectSpread$19(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1b(Object(t), !0).forEach(function (r) { _defineProperty$c(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
   var iotPrefix$14 = settings.iotPrefix,
@@ -259242,7 +259242,8 @@ ${formatRule(Codicon.menuSubmenu)}
       searchPlaceholder: PropTypes.string,
       searchLabelText: PropTypes.string
     }),
-    testId: PropTypes.string
+    testId: PropTypes.string,
+    onFilterItems: PropTypes.func
   };
   var defaultProps$1n = {
     defaultExpanded: false,
@@ -259259,7 +259260,8 @@ ${formatRule(Codicon.menuSubmenu)}
       searchLabelText: 'Find navigation item'
     },
     testId: 'side-nav',
-    recentLinks: []
+    recentLinks: [],
+    onFilterItems: function onFilterItems() {}
   };
 
   /**
@@ -259291,6 +259293,7 @@ ${formatRule(Codicon.menuSubmenu)}
       i18n = _ref.i18n,
       testId = _ref.testId,
       recentLinks = _ref.recentLinks,
+      onFilterItems = _ref.onFilterItems,
       props = _objectWithoutProperties$3(_ref, _excluded$u);
     /**
      * Recursive function for rendering all the nested children nav items
@@ -259301,11 +259304,12 @@ ${formatRule(Codicon.menuSubmenu)}
      * @returns ReactElement
      */
     var renderLinkMenu = function renderLinkMenu(link, index) {
-      var _link$metaData;
+      var _link$metaData, _link$metaData2;
       var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
       var searchValue = arguments.length > 3 ? arguments[3] : undefined;
       var isFiltering = searchValue !== undefined;
       var parentActive = false;
+      var tabIndex = searchValue && (_link$metaData = link.metaData) !== null && _link$metaData !== void 0 && _link$metaData.getTabIndexBasedOnSearch ? link.metaData.getTabIndexBasedOnSearch(link, index) : (_link$metaData2 = link.metaData) === null || _link$metaData2 === void 0 ? void 0 : _link$metaData2.tabIndex;
       var children = link.childContent.map(function (childLink, childIndex) {
         if (isAnyChildActive(childLink)) {
           parentActive = true;
@@ -259334,10 +259338,13 @@ ${formatRule(Codicon.menuSubmenu)}
         title: link.linkContent,
         testId: "".concat(testId, "-menu-").concat(index),
         className: "".concat(iotPrefix$14, "--side-nav__item--depth-").concat(level)
-      }, (_link$metaData = link.metaData) !== null && _link$metaData !== void 0 ? _link$metaData : {}), children);
+      }, link.metaData ? _objectSpread$19(_objectSpread$19({}, link.metaData), {}, {
+        tabIndex: tabIndex
+      }) : {}), children);
     };
     var renderLinks = function renderLinks(linkConfigurations, searchValue) {
       return linkConfigurations.map(function (link, index) {
+        var _link$metaData3, _link$metaData4;
         if (!link.isEnabled) {
           return null;
         }
@@ -259346,6 +259353,7 @@ ${formatRule(Codicon.menuSubmenu)}
         }
         var isFiltering = searchValue !== undefined;
         var content = searchValue ? markText(link.linkContent, searchValue) : link.linkContent;
+        var tabIndex = searchValue && (_link$metaData3 = link.metaData) !== null && _link$metaData3 !== void 0 && _link$metaData3.getTabIndexBasedOnSearch ? link.metaData.getTabIndexBasedOnSearch(link, index) : (_link$metaData4 = link.metaData) === null || _link$metaData4 === void 0 ? void 0 : _link$metaData4.tabIndex;
         return /*#__PURE__*/React$1.createElement(react.SideNavLink, _extends$3({
           key: "menu-link-".concat(link.metaData.label.replace(/\s/g, ''), "-global"),
           "aria-label": link.metaData.label,
@@ -259355,7 +259363,9 @@ ${formatRule(Codicon.menuSubmenu)}
           isActive: link.isActive,
           "data-testid": "".concat(testId, "-link-").concat(index),
           className: classnames(link.metaData.className, _defineProperty$c({}, "".concat(iotPrefix$14, "--side-nav__item--is-filtering"), isFiltering))
-        }, link.metaData), content);
+        }, link.metaData ? _objectSpread$19(_objectSpread$19({}, link.metaData), {}, {
+          tabIndex: tabIndex
+        }) : {}), content);
       }).filter(function (i) {
         return i;
       });
@@ -259383,6 +259393,9 @@ ${formatRule(Codicon.menuSubmenu)}
       var linksToRender = isSearching ? filterLinks(filterableLinks, newSearchValue) : filterableLinks;
       setRenderedFilterableLinks(renderLinks(linksToRender, newSearchValue));
     };
+    React$1.useEffect(function () {
+      onFilterItems(renderedFilterableLinks);
+    }, [onFilterItems, renderedFilterableLinks]);
     var search = hasSearch ? [/*#__PURE__*/React$1.createElement(react.Search, {
       key: "sidenav-search",
       id: "sidenav-search",
@@ -259612,6 +259625,17 @@ ${formatRule(Codicon.menuSubmenu)}
         },
         "required": false
       },
+      "onFilterItems": {
+        "defaultValue": {
+          "value": "() => {}",
+          "computed": false
+        },
+        "description": "",
+        "type": {
+          "name": "func"
+        },
+        "required": false
+      },
       "links": {
         "description": "array of link item objects",
         "type": {