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

package/lib/cjs/components/NavBar/NavBar.js

@@ -20,8 +20,6 @@ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
 
 var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
 
-var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -56,21 +54,21 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  *
  */
 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 = (0, _react.useState)(new _set["default"](defaultExpandedKeys)),
+  var _useState = (0, _react.useState)(defaultExpandedKeys),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
       expandedKeys = _useState2[0],
       setExpandedKeys = _useState2[1];
 
-  var _useProgressiveState = (0, _useProgressiveState3["default"])(selectedKeysProp, defaultSelectedKeys),
+  var _useProgressiveState = (0, _useProgressiveState3["default"])(selectedKeyProp, defaultSelectedKey),
       _useProgressiveState2 = (0, _slicedToArray2["default"])(_useProgressiveState, 2),
-      selectedKeys = _useProgressiveState2[0],
-      setSelectedKeys = _useProgressiveState2[1];
+      selectedKey = _useProgressiveState2[0],
+      setSelectedKey = _useProgressiveState2[1];
 
   var items = (0, _react.useMemo)(function () {
     return (0, _isArray["default"])(children) ? (0, _map["default"])(children).call(children, function (child) {
@@ -82,14 +80,15 @@ var NavBar = function NavBar(props) {
       item: children,
       key: (0, _uuid.v4)()
     }];
-  }, [children]);
+  }, []);
+  var contextValue = {
+    selectedKey: selectedKey,
+    setSelectedKey: setSelectedKeyProp || setSelectedKey,
+    expandedKeys: expandedKeys,
+    setExpandedKeys: setExpandedKeys
+  };
   return (0, _react2.jsx)(_NavBarContext.NavBarContext.Provider, {
-    value: {
-      selectedKey: selectedKeys,
-      setSelectedKey: setSelectedKeysProp || setSelectedKeys,
-      expandedKeys: expandedKeys,
-      setExpandedKeys: setExpandedKeys
-    }
+    value: contextValue
   }, (0, _react2.jsx)(_Box["default"], {
     variant: "navBar.container",
     role: "navigation",
@@ -136,15 +135,24 @@ var FocusableItem = function FocusableItem(props) {
 
 NavBar.propTypes = {
   /** The initial selected key in the collection (uncontrolled). */
-  defaultSelectedKeys: _isIterable.isIterableProp,
+  defaultSelectedKey: _propTypes["default"].string,
 
   /** The initial expanded keys in the collection (uncontrolled). */
   defaultExpandedKeys: _isIterable.isIterableProp,
-  selectedKeys: _isIterable.isIterableProp,
-  setSelectedKeys: _propTypes["default"].func
+
+  /** The selected key in the collection (controlled). */
+  selectedKey: _isIterable.isIterableProp,
+
+  /**
+  * Callback function that fires when the selected key changes.
+  *
+  * `(selectedKey: String) => void`
+  */
+  setSelectedKey: _propTypes["default"].func
 };
 NavBar.defaultProps = {
-  defaultSelectedKeys: []
+  defaultSelectedKey: '',
+  defaultExpandedKeys: []
 };
 var _default = NavBar;
 exports["default"] = _default;

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

@@ -2,17 +2,25 @@
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.Default = exports.Controlled = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _AccountMultipleIcon = _interopRequireDefault(require("mdi-react/AccountMultipleIcon"));
 
@@ -34,6 +42,10 @@ var _index = require("../../index");
 
 var _react2 = require("@emotion/react");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var _default = {
   component: _index.NavBar,
   subcomponents: {
@@ -137,10 +149,9 @@ var data = [{
     id: "Dashboard Link Group",
     variant: "buttons.navItemButton",
     href: "https://pingidentity.com/"
-  }, "Group"), (0, _react2.jsx)(_index.NavBarItemLink, {
+  }, "Group"), (0, _react2.jsx)(_index.NavBarItemButton, {
     key: "Dashboard Link Populations",
-    id: "Dashboard Link Populations",
-    href: "https://pingidentity.com/"
+    id: "Dashboard Link Populations"
   }, "Populations")]
 }, {
   'data-id': 'identities-data-id',
@@ -163,10 +174,9 @@ var data = [{
     key: "Identities Link Attributes",
     id: "Identities Link Attributes",
     href: "https://pingidentity.com/"
-  }, "Attributes"), (0, _react2.jsx)(_index.NavBarItemLink, {
+  }, "Attributes"), (0, _react2.jsx)(_index.NavBarItemButton, {
     key: "Identities Link Roles",
-    id: "Identities Link Roles",
-    href: "https://pingidentity.com/"
+    id: "Identities Link Roles"
   }, "Roles")]
 }, {
   'data-id': 'connections-data-id',
@@ -222,10 +232,9 @@ var data = [{
     key: "Connections Certificates & Key Pairs",
     id: "Connections Certificates & Key Pairs",
     href: "https://pingidentity.com/"
-  }, "Certificates & Key Pairs"), (0, _react2.jsx)(_index.NavBarItemLink, {
+  }, "Certificates & Key Pairs"), (0, _react2.jsx)(_index.NavBarItemButton, {
     key: "Connections Resources",
-    id: "Connections Resources",
-    href: "https://pingidentity.com/"
+    id: "Connections Resources"
   }, "Resources")]
 }, {
   'data-id': 'experiences-data-id',
@@ -281,10 +290,9 @@ var data = [{
     key: "Experiences Vanity Domains",
     id: "Experiences Vanity Domains",
     href: "https://pingidentity.com/"
-  }, "Vanity Domains"), (0, _react2.jsx)(_index.NavBarItemLink, {
+  }, "Vanity Domains"), (0, _react2.jsx)(_index.NavBarItemButton, {
     key: "Experiences Sender",
-    id: "Experiences Sender",
-    href: "https://pingidentity.com/"
+    id: "Experiences Sender"
   }, "Sender")]
 }];
 var secondData = [{
@@ -363,9 +371,7 @@ var thirdData = [{
 }];
 
 var Default = function Default() {
-  return (0, _react2.jsx)(_index.NavBar, {
-    defaultSelectedKey: "Dashboard Link Group"
-  }, (0, _react2.jsx)(_index.Box, {
+  return (0, _react2.jsx)(_index.NavBar, null, (0, _react2.jsx)(_index.Box, {
     padding: "md"
   }, (0, _react2.jsx)(_index.Link, {
     "aria-label": "home link",
@@ -399,4 +405,64 @@ var Default = function Default() {
   })));
 };
 
-exports.Default = Default;
+exports.Default = Default;
+
+var Controlled = function Controlled() {
+  var _useState = (0, _react.useState)('Dashboard Link Group'),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      selectedKey = _useState2[0],
+      setSelectedKey = _useState2[1];
+
+  var customData = [{
+    icon: _EarthIcon["default"],
+    key: 'Environment',
+    heading: 'Nested redirect is in here',
+    children: [(0, _react2.jsx)(_index.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"), (0, _react2.jsx)(_index.NavBarItemButton, {
+      key: "Earth Button Group",
+      id: "Earth Button Group"
+    }, "Group")]
+  }];
+  return (0, _react2.jsx)(_index.NavBar, {
+    setSelectedKey: setSelectedKey,
+    selectedKey: selectedKey
+  }, (0, _react2.jsx)(_index.Box, {
+    padding: "md"
+  }, (0, _react2.jsx)(_index.Link, {
+    "aria-label": "home link",
+    href: "https://pingidentity.com",
+    target: "_blank"
+  }, logo)), (0, _react2.jsx)(_index.Separator, {
+    marginTop: "lg",
+    marginBottom: "0px",
+    backgroundColor: "neutral.60"
+  }), (0, _react2.jsx)(_index.Box, {
+    variant: "navBar.sectionContainer",
+    paddingBottom: "xl"
+  }, (0, _react2.jsx)(_index.NavBarItem, {
+    "data-id": "nav-bar-item",
+    icon: _GlobeIcon["default"],
+    id: "Overview",
+    key: "Overview",
+    text: "Overview"
+  }), (0, _react2.jsx)(_index.NavBarSection, {
+    items: data,
+    hasSeparator: true,
+    "data-id": "first-nav-bar-section"
+  }), (0, _react2.jsx)(_index.NavBarSection, {
+    items: secondData,
+    hasSeparator: true,
+    title: "PingOne Services",
+    "data-id": "second-nav-bar-section"
+  }), (0, _react2.jsx)(_index.NavBarSection, {
+    items: customData,
+    "data-id": "third-nav-bar-section"
+  })));
+};
+
+exports.Controlled = Controlled;

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

@@ -2,9 +2,19 @@
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
@@ -34,6 +44,10 @@ var _testWrapper = require("../../utils/testUtils/testWrapper");
 
 var _react2 = require("@emotion/react");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var DATA_ID = 'data-id';
 var SECTION_BUTTON_DATA_ID = 'section-data-id';
 var data = [{
@@ -117,6 +131,58 @@ var getComponent = function getComponent() {
   }))));
 };
 
+var ControlledComponent = function ControlledComponent() {
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      selectedKey = _useState2[0],
+      setSelectedKey = _useState2[1];
+
+  var setKeys = function setKeys(e) {
+    setSelectedKey(e);
+  };
+
+  var customData = [{
+    icon: _GlobeIcon["default"],
+    key: 'Environment',
+    heading: 'Environment title that is so long, it wraps',
+    children: [(0, _react2.jsx)(_.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"), (0, _react2.jsx)(_.NavBarItemButton, {
+      key: "Earth Button Group",
+      id: "Earth Button Group"
+    }, "Group")]
+  }];
+  return (0, _react2.jsx)(_NavBar["default"], {
+    setSelectedKey: setKeys,
+    selectedKey: selectedKey
+  }, (0, _react2.jsx)(_.Box, {
+    variant: "navBar.sectionContainer",
+    paddingBottom: "xl"
+  }, (0, _react2.jsx)(_.NavBarItem, {
+    id: "Overview",
+    key: "Overview",
+    text: "Overview",
+    icon: _ViewDashboardIcon["default"],
+    "data-testid": "navItem"
+  }), (0, _react2.jsx)(_.NavBarSection, {
+    items: data,
+    hasSeparator: true,
+    "data-id": "nav-bar-section"
+  }), (0, _react2.jsx)(_.NavBarSection, {
+    items: secondData,
+    hasSeparator: true,
+    title: "PingOne Services",
+    "data-id": "second-nav-bar-section"
+  }), (0, _react2.jsx)(_.NavBarSection, {
+    items: customData,
+    "data-id": "third-nav-bar-section"
+  })));
+};
+
 var getComponentWithMultipleChildren = function getComponentWithMultipleChildren() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react2.jsx)(_NavBar["default"], props, (0, _react2.jsx)(_.Box, null, (0, _react2.jsx)(_.Link, {
@@ -142,6 +208,10 @@ test('should render basic nav with children', function () {
   getComponent();
   expect(_testWrapper.screen.queryByRole('navigation')).toBeInTheDocument();
 });
+test('controlled: should render basic nav with children', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(ControlledComponent, null));
+  expect(_testWrapper.screen.queryByRole('navigation')).toBeInTheDocument();
+});
 test('should render title for sections that have titles', function () {
   getComponent();
   expect(_testWrapper.screen.getByText('test_title')).toBeInTheDocument();
@@ -163,6 +233,18 @@ test('should select NavItemLink', function () {
 
   expect(link).toHaveClass('is-selected');
 });
+test('controlled: should select NavItemLink', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(ControlledComponent, null));
+  var link;
+  clickHeaderButtons();
+  link = _testWrapper.screen.queryByTestId('navItemLink');
+  expect(link).toBeInTheDocument();
+
+  _userEvent["default"].click(link);
+
+  link = _testWrapper.screen.queryByTestId('navItemLink');
+  expect(link).toHaveClass('is-selected');
+});
 test('should select NavItemLink on space key press', function () {
   getComponent();
   clickHeaderButtons();
@@ -178,6 +260,37 @@ test('should select NavItemLink on space key press', function () {
 
   expect(link).toHaveClass('is-selected');
 });
+test('controlled: should select NavItemLink on space key press', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(ControlledComponent, null));
+  var link;
+  clickHeaderButtons();
+  link = _testWrapper.screen.queryByTestId('navItemLink');
+  expect(link).toBeInTheDocument();
+
+  _testWrapper.fireEvent.keyDown(link, {
+    key: 'Space',
+    keyCode: 32
+  });
+
+  _testWrapper.fireEvent.keyUp(link, {
+    key: 'Space',
+    keyCode: 32
+  });
+
+  link = _testWrapper.screen.queryByTestId('navItemLink');
+  expect(link).toHaveClass('is-selected');
+});
+test('should select NavItem', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(ControlledComponent, null));
+  var item;
+  item = _testWrapper.screen.queryByTestId('navItem');
+  expect(item).toBeInTheDocument();
+
+  _userEvent["default"].click(item);
+
+  item = _testWrapper.screen.queryByTestId('navItem');
+  expect(item).toHaveClass('is-selected');
+});
 test('should select NavItem', function () {
   getComponent();
 
@@ -189,6 +302,17 @@ test('should select NavItem', function () {
 
   expect(item).toHaveClass('is-selected');
 });
+test('controlled: should select NavItem', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(ControlledComponent, null));
+  var item;
+  item = _testWrapper.screen.queryByTestId('navItem');
+  expect(item).toBeInTheDocument();
+
+  _userEvent["default"].click(item);
+
+  item = _testWrapper.screen.queryByTestId('navItem');
+  expect(item).toHaveClass('is-selected');
+});
 test('should select NavItemButton', function () {
   getComponent();
   clickHeaderButtons();
@@ -201,6 +325,18 @@ test('should select NavItemButton', function () {
 
   expect(button).toHaveClass('is-selected');
 });
+test('controlled: should select NavItemButton', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(ControlledComponent, null));
+  var button;
+  clickHeaderButtons();
+  button = _testWrapper.screen.queryByTestId('navItemButton');
+  expect(button).toBeInTheDocument();
+
+  _userEvent["default"].click(button);
+
+  button = _testWrapper.screen.queryByTestId('navItemButton');
+  expect(button).toHaveClass('is-selected');
+});
 test('should collapse NavItemBody', function () {
   getComponent();
   expect(_testWrapper.screen.queryByText('Users')).not.toBeInTheDocument();
@@ -368,4 +504,34 @@ test('should render NavBarSection with data-id', function () {
 test('should render NavBarSection button with data-id', function () {
   getComponent();
   expect(_testWrapper.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 = _testWrapper.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 = _testWrapper.screen.getByTestId('navItemButton');
+
+  expect(child).toBeInTheDocument();
+  expect(child).toHaveClass('is-selected');
+
+  var parent = _testWrapper.screen.queryByTestId(SECTION_BUTTON_DATA_ID);
+
+  expect(parent).not.toHaveClass('is-selected');
+
+  _userEvent["default"].click(parent);
+
+  var parentDiv = _testWrapper.screen.queryByTestId('Overview');
+
+  expect(parentDiv).toHaveClass('is-selected');
 });

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

@@ -18,8 +18,6 @@ exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
-var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -47,8 +45,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _context;
-
   var icon = props.icon,
       text = props.text,
       className = props.className,
@@ -76,7 +72,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       isFocusVisible = _useFocusRing2.isFocusVisible;
 
   var state = (0, _NavBarContext.useNavBarContext)();
-  var isSelected = (0, _includes["default"])(_context = state.selectedKey).call(_context, key);
+  var isSelected = state.selectedKey === key;
 
   var _useNavBarPress = (0, _hooks.useNavBarPress)({
     key: key,

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

@@ -28,8 +28,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -48,18 +46,16 @@ 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) { (0, _defineProperty2["default"])(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) { (0, _defineProperty2["default"])(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; }
 
 var NavBarItemButton = function NavBarItemButton(props) {
-  var _context;
-
   var className = props.className,
       key = props.id,
       onPressCallback = props.onPress,
       sx = props.sx,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var state = (0, _NavBarContext.useNavBarContext)();
-  var isSelected = (0, _includes["default"])(_context = state.selectedKey).call(_context, key);
+  var isSelected = state.selectedKey === key;
 
   var _useNavBarPress = (0, _hooks.useNavBarPress)({
     key: key,

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

@@ -2,19 +2,27 @@
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
 exports["default"] = void 0;
 
-var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
-var _react = _interopRequireDefault(require("react"));
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -30,8 +38,12 @@ var _hooks = require("../../hooks");
 
 var _react2 = require("@emotion/react");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var NavBarItemHeader = function NavBarItemHeader(props) {
-  var _navBarState$expanded, _context;
+  var _context;
 
   var item = props.item;
   var icon = item.icon,
@@ -39,11 +51,21 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
       className = item.className,
       heading = item.heading;
   var navBarState = (0, _NavBarContext.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 = (0, _includes["default"])(expandedKeys).call(expandedKeys, key);
   var array = (0, _map["default"])(_context = item.children).call(_context, function (i) {
     return i.key;
   });
   var childSelected = (0, _includes["default"])(array).call(array, navBarState.selectedKey);
+  (0, _react.useEffect)(function () {
+    if (childSelected && isExpanded === false) {
+      var _context2;
+
+      setExpandedKeys((0, _concat["default"])(_context2 = []).call(_context2, expandedKeys, [key]));
+    }
+  }, [selectedKey]);
 
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
     isSelected: childSelected && !isExpanded
@@ -53,7 +75,8 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
   return (0, _react2.jsx)(_index.Box, {
     variant: "navBar.itemHeaderContainer",
     className: classNames,
-    isRow: true
+    isRow: true,
+    "data-testid": heading
   }, icon && (0, _react2.jsx)(_index.Icon, {
     icon: icon,
     size: 20,

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

@@ -28,8 +28,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -48,17 +46,15 @@ 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) { (0, _defineProperty2["default"])(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) { (0, _defineProperty2["default"])(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; }
 
 var NavBarItemLink = function NavBarItemLink(props) {
-  var _context;
-
   var className = props.className,
       key = props.id,
       onPressCallback = props.onPress,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var state = (0, _NavBarContext.useNavBarContext)();
-  var isSelected = (0, _includes["default"])(_context = state.selectedKey).call(_context, key);
+  var isSelected = state.selectedKey === key;
 
   var _useNavBarPress = (0, _hooks.useNavBarPress)({
     key: key,