@pingux/astro 1.36.3-alpha.1 → 1.37.0-alpha.1

package/lib/cjs/components/NavBarSection/NavBarSection.js

@@ -16,7 +16,9 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports["default"] = void 0;
 
-var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
@@ -103,18 +105,24 @@ var SectionItem = function SectionItem(_ref2) {
   var navBarState = (0, _NavBarContext.useNavBarContext)();
   var expandedKeys = navBarState.expandedKeys,
       setExpandedKeys = navBarState.setExpandedKeys;
-  var isExpanded = expandedKeys === null || expandedKeys === void 0 ? void 0 : expandedKeys.has(key);
+  var isExpanded = (0, _includes["default"])(expandedKeys).call(expandedKeys, key);
   var firstChildKey = children.length ? children[0].key : null;
   var lastChildKey = children.length ? children[children.length - 1].key : null;
 
   var onExpandedChange = function onExpandedChange(isOpen) {
+    var newArray;
+
     if (isOpen) {
-      expandedKeys.add(key);
+      var _context;
+
+      newArray = (0, _concat["default"])(_context = []).call(_context, expandedKeys, [key]);
     } else {
-      expandedKeys["delete"](key);
+      newArray = (0, _filter["default"])(expandedKeys).call(expandedKeys, function (thiskey) {
+        return thiskey !== key;
+      });
     }
 
-    setExpandedKeys(new _set["default"](expandedKeys));
+    setExpandedKeys(newArray);
   };
 
   var focusManager = (0, _focus.useFocusManager)();

package/lib/cjs/templates/Nav/Nav.stories.js

@@ -49,11 +49,11 @@ var _default = {
 exports["default"] = _default;
 
 var SideNav = function SideNav(_ref) {
-  var setSelectedKeys = _ref.setSelectedKeys,
-      selectedKeys = _ref.selectedKeys;
+  var setSelectedKey = _ref.setSelectedKey,
+      selectedKey = _ref.selectedKey;
   return (0, _react2.jsx)(_index.NavBar, {
-    setSelectedKeys: setSelectedKeys,
-    selectedKeys: selectedKeys
+    setSelectedKey: setSelectedKey,
+    selectedKey: selectedKey
   }, (0, _react2.jsx)(_index.Box, {
     padding: "md"
   }, (0, _react2.jsx)(_index.Link, {
@@ -86,15 +86,15 @@ var SideNav = function SideNav(_ref) {
 var Default = function Default() {
   var _useState = (0, _react.useState)('Overview'),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      selectedKeys = _useState2[0],
-      setSelectedKeys = _useState2[1];
+      selectedKey = _useState2[0],
+      setSelectedKey = _useState2[1];
 
   return (0, _react2.jsx)(_index.Box, {
     bg: "accent.99",
     height: "100vh"
   }, (0, _react2.jsx)(SideNav, {
-    setSelectedKeys: setSelectedKeys,
-    selectedKeys: selectedKeys
+    setSelectedKey: setSelectedKey,
+    selectedKey: selectedKey
   }), (0, _react2.jsx)(_HeaderBar["default"], null), (0, _react2.jsx)(_index.Box, {
     ml: 255,
     mt: 25
@@ -104,7 +104,7 @@ var Default = function Default() {
     sx: {
       fontWeight: 3
     }
-  }, selectedKeys)));
+  }, selectedKey)));
 };
 
 exports.Default = Default;

package/lib/components/NavBar/NavBar.js

@@ -1,6 +1,5 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
-import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
@@ -23,21 +22,21 @@ import useProgressiveState from '../../hooks/useProgressiveState';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var NavBar = function NavBar(props) {
-  var defaultSelectedKeys = props.defaultSelectedKeys,
-      selectedKeysProp = props.selectedKeys,
-      setSelectedKeysProp = props.setSelectedKeys,
+  var defaultSelectedKey = props.defaultSelectedKey,
+      selectedKeyProp = props.selectedKey,
+      setSelectedKeyProp = props.setSelectedKey,
       defaultExpandedKeys = props.defaultExpandedKeys,
       children = props.children;
 
-  var _useState = useState(new _Set(defaultExpandedKeys)),
+  var _useState = useState(defaultExpandedKeys),
       _useState2 = _slicedToArray(_useState, 2),
       expandedKeys = _useState2[0],
       setExpandedKeys = _useState2[1];
 
-  var _useProgressiveState = useProgressiveState(selectedKeysProp, defaultSelectedKeys),
+  var _useProgressiveState = useProgressiveState(selectedKeyProp, defaultSelectedKey),
       _useProgressiveState2 = _slicedToArray(_useProgressiveState, 2),
-      selectedKeys = _useProgressiveState2[0],
-      setSelectedKeys = _useProgressiveState2[1];
+      selectedKey = _useProgressiveState2[0],
+      setSelectedKey = _useProgressiveState2[1];
 
   var items = useMemo(function () {
     return _Array$isArray(children) ? _mapInstanceProperty(children).call(children, function (child) {
@@ -49,14 +48,15 @@ var NavBar = function NavBar(props) {
       item: children,
       key: uuid()
     }];
-  }, [children]);
+  }, []);
+  var contextValue = {
+    selectedKey: selectedKey,
+    setSelectedKey: setSelectedKeyProp || setSelectedKey,
+    expandedKeys: expandedKeys,
+    setExpandedKeys: setExpandedKeys
+  };
   return ___EmotionJSX(NavBarContext.Provider, {
-    value: {
-      selectedKey: selectedKeys,
-      setSelectedKey: setSelectedKeysProp || setSelectedKeys,
-      expandedKeys: expandedKeys,
-      setExpandedKeys: setExpandedKeys
-    }
+    value: contextValue
   }, ___EmotionJSX(Box, {
     variant: "navBar.container",
     role: "navigation",
@@ -102,14 +102,23 @@ var FocusableItem = function FocusableItem(props) {
 
 NavBar.propTypes = {
   /** The initial selected key in the collection (uncontrolled). */
-  defaultSelectedKeys: isIterableProp,
+  defaultSelectedKey: PropTypes.string,
 
   /** The initial expanded keys in the collection (uncontrolled). */
   defaultExpandedKeys: isIterableProp,
-  selectedKeys: isIterableProp,
-  setSelectedKeys: PropTypes.func
+
+  /** The selected key in the collection (controlled). */
+  selectedKey: isIterableProp,
+
+  /**
+  * Callback function that fires when the selected key changes.
+  *
+  * `(selectedKey: String) => void`
+  */
+  setSelectedKey: PropTypes.func
 };
 NavBar.defaultProps = {
-  defaultSelectedKeys: []
+  defaultSelectedKey: '',
+  defaultExpandedKeys: []
 };
 export default NavBar;

package/lib/components/NavBar/NavBar.stories.js

@@ -1,5 +1,6 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import React from 'react';
+import React, { useState } from 'react';
 import AccountMultiple from 'mdi-react/AccountMultipleIcon';
 import Earth from 'mdi-react/EarthIcon';
 import EmoticonHappy from 'mdi-react/EmoticonHappyOutlineIcon';
@@ -113,10 +114,9 @@ var data = [{
     id: "Dashboard Link Group",
     variant: "buttons.navItemButton",
     href: "https://pingidentity.com/"
-  }, "Group"), ___EmotionJSX(NavBarItemLink, {
+  }, "Group"), ___EmotionJSX(NavBarItemButton, {
     key: "Dashboard Link Populations",
-    id: "Dashboard Link Populations",
-    href: "https://pingidentity.com/"
+    id: "Dashboard Link Populations"
   }, "Populations")]
 }, {
   'data-id': 'identities-data-id',
@@ -139,10 +139,9 @@ var data = [{
     key: "Identities Link Attributes",
     id: "Identities Link Attributes",
     href: "https://pingidentity.com/"
-  }, "Attributes"), ___EmotionJSX(NavBarItemLink, {
+  }, "Attributes"), ___EmotionJSX(NavBarItemButton, {
     key: "Identities Link Roles",
-    id: "Identities Link Roles",
-    href: "https://pingidentity.com/"
+    id: "Identities Link Roles"
   }, "Roles")]
 }, {
   'data-id': 'connections-data-id',
@@ -198,10 +197,9 @@ var data = [{
     key: "Connections Certificates & Key Pairs",
     id: "Connections Certificates & Key Pairs",
     href: "https://pingidentity.com/"
-  }, "Certificates & Key Pairs"), ___EmotionJSX(NavBarItemLink, {
+  }, "Certificates & Key Pairs"), ___EmotionJSX(NavBarItemButton, {
     key: "Connections Resources",
-    id: "Connections Resources",
-    href: "https://pingidentity.com/"
+    id: "Connections Resources"
   }, "Resources")]
 }, {
   'data-id': 'experiences-data-id',
@@ -257,10 +255,9 @@ var data = [{
     key: "Experiences Vanity Domains",
     id: "Experiences Vanity Domains",
     href: "https://pingidentity.com/"
-  }, "Vanity Domains"), ___EmotionJSX(NavBarItemLink, {
+  }, "Vanity Domains"), ___EmotionJSX(NavBarItemButton, {
     key: "Experiences Sender",
-    id: "Experiences Sender",
-    href: "https://pingidentity.com/"
+    id: "Experiences Sender"
   }, "Sender")]
 }];
 var secondData = [{
@@ -338,9 +335,7 @@ var thirdData = [{
   }, "Group")]
 }];
 export var Default = function Default() {
-  return ___EmotionJSX(NavBar, {
-    defaultSelectedKey: "Dashboard Link Group"
-  }, ___EmotionJSX(Box, {
+  return ___EmotionJSX(NavBar, null, ___EmotionJSX(Box, {
     padding: "md"
   }, ___EmotionJSX(Link, {
     "aria-label": "home link",
@@ -372,4 +367,61 @@ export var Default = function Default() {
     items: thirdData,
     "data-id": "third-nav-bar-section"
   })));
+};
+export var Controlled = function Controlled() {
+  var _useState = useState('Dashboard Link Group'),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedKey = _useState2[0],
+      setSelectedKey = _useState2[1];
+
+  var customData = [{
+    icon: Earth,
+    key: 'Environment',
+    heading: 'Nested redirect is in here',
+    children: [___EmotionJSX(NavBarItemButton, {
+      key: "Click me for MFA Users",
+      id: "Click me for MFA Users",
+      onPress: function onPress() {
+        setSelectedKey('MFA Button Users');
+      }
+    }, "Click me for MFA Users"), ___EmotionJSX(NavBarItemButton, {
+      key: "Earth Button Group",
+      id: "Earth Button Group"
+    }, "Group")]
+  }];
+  return ___EmotionJSX(NavBar, {
+    setSelectedKey: setSelectedKey,
+    selectedKey: selectedKey
+  }, ___EmotionJSX(Box, {
+    padding: "md"
+  }, ___EmotionJSX(Link, {
+    "aria-label": "home link",
+    href: "https://pingidentity.com",
+    target: "_blank"
+  }, logo)), ___EmotionJSX(Separator, {
+    marginTop: "lg",
+    marginBottom: "0px",
+    backgroundColor: "neutral.60"
+  }), ___EmotionJSX(Box, {
+    variant: "navBar.sectionContainer",
+    paddingBottom: "xl"
+  }, ___EmotionJSX(NavBarItem, {
+    "data-id": "nav-bar-item",
+    icon: GlobeIcon,
+    id: "Overview",
+    key: "Overview",
+    text: "Overview"
+  }), ___EmotionJSX(NavBarSection, {
+    items: data,
+    hasSeparator: true,
+    "data-id": "first-nav-bar-section"
+  }), ___EmotionJSX(NavBarSection, {
+    items: secondData,
+    hasSeparator: true,
+    title: "PingOne Services",
+    "data-id": "second-nav-bar-section"
+  }), ___EmotionJSX(NavBarSection, {
+    items: customData,
+    "data-id": "third-nav-bar-section"
+  })));
 };

package/lib/components/NavBar/NavBar.test.js

@@ -1,5 +1,6 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React from 'react';
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
 import userEvent from '@testing-library/user-event';
 import GlobeIcon from 'mdi-react/GlobeIcon';
 import ViewDashboard from 'mdi-react/ViewDashboardIcon';
@@ -97,6 +98,58 @@ var getComponent = function getComponent() {
   }))));
 };
 
+var ControlledComponent = function ControlledComponent() {
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedKey = _useState2[0],
+      setSelectedKey = _useState2[1];
+
+  var setKeys = function setKeys(e) {
+    setSelectedKey(e);
+  };
+
+  var customData = [{
+    icon: GlobeIcon,
+    key: 'Environment',
+    heading: 'Environment title that is so long, it wraps',
+    children: [___EmotionJSX(NavBarItemButton, {
+      key: "Click me for MFA Users",
+      id: "Click me for MFA Users",
+      onPress: function onPress() {
+        setSelectedKey('MFA Button Users');
+      }
+    }, "Click me for MFA Users"), ___EmotionJSX(NavBarItemButton, {
+      key: "Earth Button Group",
+      id: "Earth Button Group"
+    }, "Group")]
+  }];
+  return ___EmotionJSX(NavBar, {
+    setSelectedKey: setKeys,
+    selectedKey: selectedKey
+  }, ___EmotionJSX(Box, {
+    variant: "navBar.sectionContainer",
+    paddingBottom: "xl"
+  }, ___EmotionJSX(NavBarItem, {
+    id: "Overview",
+    key: "Overview",
+    text: "Overview",
+    icon: ViewDashboard,
+    "data-testid": "navItem"
+  }), ___EmotionJSX(NavBarSection, {
+    items: data,
+    hasSeparator: true,
+    "data-id": "nav-bar-section"
+  }), ___EmotionJSX(NavBarSection, {
+    items: secondData,
+    hasSeparator: true,
+    title: "PingOne Services",
+    "data-id": "second-nav-bar-section"
+  }), ___EmotionJSX(NavBarSection, {
+    items: customData,
+    "data-id": "third-nav-bar-section"
+  })));
+};
+
 var getComponentWithMultipleChildren = function getComponentWithMultipleChildren() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(NavBar, props, ___EmotionJSX(Box, null, ___EmotionJSX(Link, {
@@ -122,6 +175,10 @@ test('should render basic nav with children', function () {
   getComponent();
   expect(screen.queryByRole('navigation')).toBeInTheDocument();
 });
+test('controlled: should render basic nav with children', function () {
+  render(___EmotionJSX(ControlledComponent, null));
+  expect(screen.queryByRole('navigation')).toBeInTheDocument();
+});
 test('should render title for sections that have titles', function () {
   getComponent();
   expect(screen.getByText('test_title')).toBeInTheDocument();
@@ -139,6 +196,16 @@ test('should select NavItemLink', function () {
   userEvent.click(link);
   expect(link).toHaveClass('is-selected');
 });
+test('controlled: should select NavItemLink', function () {
+  render(___EmotionJSX(ControlledComponent, null));
+  var link;
+  clickHeaderButtons();
+  link = screen.queryByTestId('navItemLink');
+  expect(link).toBeInTheDocument();
+  userEvent.click(link);
+  link = screen.queryByTestId('navItemLink');
+  expect(link).toHaveClass('is-selected');
+});
 test('should select NavItemLink on space key press', function () {
   getComponent();
   clickHeaderButtons();
@@ -150,6 +217,32 @@ test('should select NavItemLink on space key press', function () {
   });
   expect(link).toHaveClass('is-selected');
 });
+test('controlled: should select NavItemLink on space key press', function () {
+  render(___EmotionJSX(ControlledComponent, null));
+  var link;
+  clickHeaderButtons();
+  link = screen.queryByTestId('navItemLink');
+  expect(link).toBeInTheDocument();
+  fireEvent.keyDown(link, {
+    key: 'Space',
+    keyCode: 32
+  });
+  fireEvent.keyUp(link, {
+    key: 'Space',
+    keyCode: 32
+  });
+  link = screen.queryByTestId('navItemLink');
+  expect(link).toHaveClass('is-selected');
+});
+test('should select NavItem', function () {
+  render(___EmotionJSX(ControlledComponent, null));
+  var item;
+  item = screen.queryByTestId('navItem');
+  expect(item).toBeInTheDocument();
+  userEvent.click(item);
+  item = screen.queryByTestId('navItem');
+  expect(item).toHaveClass('is-selected');
+});
 test('should select NavItem', function () {
   getComponent();
   var item = screen.getByTestId('navItem');
@@ -157,6 +250,15 @@ test('should select NavItem', function () {
   userEvent.click(item);
   expect(item).toHaveClass('is-selected');
 });
+test('controlled: should select NavItem', function () {
+  render(___EmotionJSX(ControlledComponent, null));
+  var item;
+  item = screen.queryByTestId('navItem');
+  expect(item).toBeInTheDocument();
+  userEvent.click(item);
+  item = screen.queryByTestId('navItem');
+  expect(item).toHaveClass('is-selected');
+});
 test('should select NavItemButton', function () {
   getComponent();
   clickHeaderButtons();
@@ -165,6 +267,16 @@ test('should select NavItemButton', function () {
   userEvent.click(button);
   expect(button).toHaveClass('is-selected');
 });
+test('controlled: should select NavItemButton', function () {
+  render(___EmotionJSX(ControlledComponent, null));
+  var button;
+  clickHeaderButtons();
+  button = screen.queryByTestId('navItemButton');
+  expect(button).toBeInTheDocument();
+  userEvent.click(button);
+  button = screen.queryByTestId('navItemButton');
+  expect(button).toHaveClass('is-selected');
+});
 test('should collapse NavItemBody', function () {
   getComponent();
   expect(screen.queryByText('Users')).not.toBeInTheDocument();
@@ -295,4 +407,25 @@ test('should render NavBarSection with data-id', function () {
 test('should render NavBarSection button with data-id', function () {
   getComponent();
   expect(screen.getByTestId(SECTION_BUTTON_DATA_ID)).toHaveAttribute(DATA_ID);
+});
+test('passing in a string into defaultSelectedKeys makes the key selected by default, and the parent expanded by default ', function () {
+  getComponent({
+    defaultSelectedKey: 'Credentials Button Users'
+  });
+  var child = screen.getByTestId('navItemButton');
+  expect(child).toBeInTheDocument();
+  expect(child).toHaveClass('is-selected');
+});
+test('when a child is selected, and the parent is collapsed, the parent has the is-selected class', function () {
+  getComponent({
+    defaultSelectedKey: 'Credentials Button Users'
+  });
+  var child = screen.getByTestId('navItemButton');
+  expect(child).toBeInTheDocument();
+  expect(child).toHaveClass('is-selected');
+  var parent = screen.queryByTestId(SECTION_BUTTON_DATA_ID);
+  expect(parent).not.toHaveClass('is-selected');
+  userEvent.click(parent);
+  var parentDiv = screen.queryByTestId('Overview');
+  expect(parentDiv).toHaveClass('is-selected');
 });

package/lib/components/NavBarSection/NavBarItem.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["icon", "text", "className", "id", "onPress"];
 import React, { useRef, forwardRef, useImperativeHandle } from 'react';
@@ -12,8 +11,6 @@ import { useStatusClasses, useNavBarPress } from '../../hooks';
 import { useNavBarContext } from '../../context/NavBarContext';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _context;
-
   var icon = props.icon,
       text = props.text,
       className = props.className,
@@ -42,8 +39,7 @@ var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
       isFocusVisible = _useFocusRing2.isFocusVisible;
 
   var state = useNavBarContext();
-
-  var isSelected = _includesInstanceProperty(_context = state.selectedKey).call(_context, key);
+  var isSelected = state.selectedKey === key;
 
   var _useNavBarPress = useNavBarPress({
     key: key,

package/lib/components/NavBarSection/NavBarItemButton.js

@@ -8,13 +8,12 @@ import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "id", "onPress", "sx"];
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -24,8 +23,6 @@ import { Button } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var NavBarItemButton = function NavBarItemButton(props) {
-  var _context;
-
   var className = props.className,
       key = props.id,
       onPressCallback = props.onPress,
@@ -33,8 +30,7 @@ var NavBarItemButton = function NavBarItemButton(props) {
       others = _objectWithoutProperties(props, _excluded);
 
   var state = useNavBarContext();
-
-  var isSelected = _includesInstanceProperty(_context = state.selectedKey).call(_context, key);
+  var isSelected = state.selectedKey === key;
 
   var _useNavBarPress = useNavBarPress({
     key: key,

package/lib/components/NavBarSection/NavBarItemHeader.js

@@ -1,6 +1,7 @@
-import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React from 'react';
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import MenuDown from 'mdi-react/MenuDownIcon';
 import MenuUp from 'mdi-react/MenuUpIcon';
@@ -10,7 +11,7 @@ import { useStatusClasses } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var NavBarItemHeader = function NavBarItemHeader(props) {
-  var _navBarState$expanded, _context;
+  var _context;
 
   var item = props.item;
   var icon = item.icon,
@@ -18,7 +19,11 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
       className = item.className,
       heading = item.heading;
   var navBarState = useNavBarContext();
-  var isExpanded = (_navBarState$expanded = navBarState.expandedKeys) === null || _navBarState$expanded === void 0 ? void 0 : _navBarState$expanded.has(key);
+  var selectedKey = navBarState.selectedKey,
+      setExpandedKeys = navBarState.setExpandedKeys,
+      expandedKeys = navBarState.expandedKeys;
+
+  var isExpanded = _includesInstanceProperty(expandedKeys).call(expandedKeys, key);
 
   var array = _mapInstanceProperty(_context = item.children).call(_context, function (i) {
     return i.key;
@@ -26,6 +31,14 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
 
   var childSelected = _includesInstanceProperty(array).call(array, navBarState.selectedKey);
 
+  useEffect(function () {
+    if (childSelected && isExpanded === false) {
+      var _context2;
+
+      setExpandedKeys(_concatInstanceProperty(_context2 = []).call(_context2, expandedKeys, [key]));
+    }
+  }, [selectedKey]);
+
   var _useStatusClasses = useStatusClasses(className, {
     isSelected: childSelected && !isExpanded
   }),
@@ -34,7 +47,8 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
   return ___EmotionJSX(Box, {
     variant: "navBar.itemHeaderContainer",
     className: classNames,
-    isRow: true
+    isRow: true,
+    "data-testid": heading
   }, icon && ___EmotionJSX(Icon, {
     icon: icon,
     size: 20,

package/lib/components/NavBarSection/NavBarItemLink.js

@@ -8,13 +8,12 @@ import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "id", "onPress"];
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -24,16 +23,13 @@ import { useStatusClasses, useNavBarPress } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var NavBarItemLink = function NavBarItemLink(props) {
-  var _context;
-
   var className = props.className,
       key = props.id,
       onPressCallback = props.onPress,
       others = _objectWithoutProperties(props, _excluded);
 
   var state = useNavBarContext();
-
-  var isSelected = _includesInstanceProperty(_context = state.selectedKey).call(_context, key);
+  var isSelected = state.selectedKey === key;
 
   var _useNavBarPress = useNavBarPress({
     key: key,