@pingux/astro 1.30.0-alpha.3 → 1.30.0-alpha.5

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

@@ -16,12 +16,22 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports["default"] = void 0;
 
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+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"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _uuid = require("uuid");
+
+var _focus = require("@react-aria/focus");
+
 var _NavBarContext = require("../../context/NavBarContext");
 
 var _isIterable = require("../../utils/devUtils/props/isIterable");
@@ -41,18 +51,18 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  *
  * This component is built to have the NavBarSection component passed into it.
  *
- * NavBarSection is an iterative component that
- * will build an AccordionGridGroup using
- * the array of objects that is passed into it.
+ * NavBarSection is an iterative component that using
+ * an array of objects that is passed into it.
  *
  */
 var NavBar = function NavBar(props) {
   var defaultSelectedKeys = props.defaultSelectedKeys,
       selectedKeysProp = props.selectedKeys,
       setSelectedKeysProp = props.setSelectedKeys,
-      defaultExpandedKeys = props.defaultExpandedKeys;
+      defaultExpandedKeys = props.defaultExpandedKeys,
+      children = props.children;
 
-  var _useState = (0, _react.useState)(defaultExpandedKeys),
+  var _useState = (0, _react.useState)(new _set["default"](defaultExpandedKeys)),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
       expandedKeys = _useState2[0],
       setExpandedKeys = _useState2[1];
@@ -62,6 +72,17 @@ var NavBar = function NavBar(props) {
       selectedKeys = _useProgressiveState2[0],
       setSelectedKeys = _useProgressiveState2[1];
 
+  var items = (0, _react.useMemo)(function () {
+    return (0, _isArray["default"])(children) ? (0, _map["default"])(children).call(children, function (child) {
+      return {
+        item: child,
+        key: (0, _uuid.v4)()
+      };
+    }) : [{
+      item: children,
+      key: (0, _uuid.v4)()
+    }];
+  }, [children]);
   return (0, _react2.jsx)(_NavBarContext.NavBarContext.Provider, {
     value: {
       selectedKey: selectedKeys,
@@ -73,7 +94,45 @@ var NavBar = function NavBar(props) {
     variant: "navBar.container",
     role: "navigation",
     as: "nav"
-  }, props.children));
+  }, items.length ? (0, _react2.jsx)(_focus.FocusScope, {
+    restoreFocus: true,
+    autoFocus: true
+  }, (0, _map["default"])(items).call(items, function (_ref) {
+    var item = _ref.item,
+        key = _ref.key;
+    return (0, _react2.jsx)(FocusableItem, {
+      key: key
+    }, item);
+  })) : null));
+};
+
+var FocusableItem = function FocusableItem(props) {
+  var focusManager = (0, _focus.useFocusManager)();
+
+  var onKeyDown = function onKeyDown(e) {
+    switch (e.key) {
+      case 'ArrowRight':
+      case 'ArrowDown':
+        e.preventDefault();
+        focusManager.focusNext();
+        break;
+
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        e.preventDefault();
+        focusManager.focusPrevious();
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  var childWithFocusHandle = /*#__PURE__*/_react["default"].cloneElement(props.children, {
+    onKeyDown: onKeyDown
+  });
+
+  return childWithFocusHandle;
 };
 
 NavBar.propTypes = {

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

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
@@ -109,6 +111,26 @@ var getComponent = function getComponent() {
   }))));
 };
 
+var getComponentWithMultipleChildrens = function getComponentWithMultipleChildrens() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_NavBar["default"], props, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, {
+    href: "https://pingidentity.com",
+    target: "_blank",
+    "aria-label": "home link",
+    "data-testid": "navLink"
+  }, "home")), (0, _react2.jsx)(_index.Button, {
+    "data-testid": "navButton"
+  }, "test button")));
+};
+
+var clickHeaderButtons = function clickHeaderButtons() {
+  var headerButtons = _testWrapper.screen.getAllByRole('button');
+
+  (0, _map["default"])(headerButtons).call(headerButtons, function (button) {
+    return _userEvent["default"].click(button);
+  });
+};
+
 (0, _testAxe["default"])(getComponent);
 test('should render basic nav with children', function () {
   getComponent();
@@ -126,13 +148,15 @@ test('should render title for sections that have titles', function () {
 });
 test('should render title for itemBodies that have subTitles', function () {
   getComponent();
+  clickHeaderButtons();
 
   var subTitle = _testWrapper.screen.getByText('PingOne Services');
 
   expect(subTitle).toBeInTheDocument();
 });
-test('should select NavIemLink', function () {
+test('should select NavItemLink', function () {
   getComponent();
+  clickHeaderButtons();
 
   var link = _testWrapper.screen.getByTestId('navItemLink');
 
@@ -142,7 +166,22 @@ test('should select NavIemLink', function () {
 
   expect(link).toHaveClass('is-selected');
 });
-test('should select NavIem', function () {
+test('should select NavItemLink on space key press', function () {
+  getComponent();
+  clickHeaderButtons();
+
+  var link = _testWrapper.screen.getByTestId('navItemLink');
+
+  expect(link).toBeInTheDocument();
+
+  _testWrapper.fireEvent.keyDown(link, {
+    key: 'Space',
+    keyCode: 32
+  });
+
+  expect(link).toHaveClass('is-selected');
+});
+test('should select NavItem', function () {
   getComponent();
 
   var item = _testWrapper.screen.getByTestId('navItem');
@@ -153,8 +192,9 @@ test('should select NavIem', function () {
 
   expect(item).toHaveClass('is-selected');
 });
-test('should select NavIemButton', function () {
+test('should select NavItemButton', function () {
   getComponent();
+  clickHeaderButtons();
 
   var button = _testWrapper.screen.getByTestId('navItemButton');
 
@@ -163,4 +203,167 @@ test('should select NavIemButton', function () {
   _userEvent["default"].click(button);
 
   expect(button).toHaveClass('is-selected');
+});
+test('should collapse NavItemBody', function () {
+  getComponent();
+  expect(_testWrapper.screen.queryByText('Users')).not.toBeInTheDocument();
+  clickHeaderButtons();
+  expect(_testWrapper.screen.getByTestId('navItemButton')).toBeInTheDocument();
+  clickHeaderButtons();
+  expect(_testWrapper.screen.queryByText('Users')).not.toBeInTheDocument();
+});
+test('should collapse NavItemBody on Escape key press', function () {
+  getComponent();
+  clickHeaderButtons();
+  expect(_testWrapper.screen.getByTestId('navItemButton')).toBeInTheDocument();
+
+  var headerButtons = _testWrapper.screen.getAllByRole('button');
+
+  (0, _map["default"])(headerButtons).call(headerButtons, function (headerButton) {
+    return _testWrapper.fireEvent.keyDown(headerButton, {
+      key: 'Escape',
+      keyCode: 27
+    });
+  });
+  expect(_testWrapper.screen.queryByText('Users')).not.toBeInTheDocument();
+});
+test('should change focus between NavBarItemHeader on arrow key press', function () {
+  getComponent();
+
+  var headerButtons = _testWrapper.screen.getAllByRole('button');
+
+  expect(headerButtons[0]).toBeInTheDocument();
+  headerButtons[0].focus();
+  expect(headerButtons[0]).toHaveClass('is-focused');
+
+  _testWrapper.fireEvent.keyDown(headerButtons[0], {
+    key: 'ArrowDown',
+    keyCode: 40
+  });
+
+  expect(headerButtons[1]).toHaveClass('is-focused');
+
+  _testWrapper.fireEvent.keyDown(headerButtons[0], {
+    key: 'ArrowRight',
+    keyCode: 39
+  });
+
+  expect(headerButtons[2]).toHaveClass('is-focused');
+
+  _testWrapper.fireEvent.keyDown(headerButtons[0], {
+    key: 'ArrowLeft',
+    keyCode: 37
+  });
+
+  expect(headerButtons[1]).toHaveClass('is-focused');
+
+  _testWrapper.fireEvent.keyDown(headerButtons[0], {
+    key: 'ArrowUp',
+    keyCode: 38
+  });
+
+  expect(headerButtons[0]).toHaveClass('is-focused');
+
+  _testWrapper.fireEvent.keyDown(headerButtons[0], {
+    key: 'Shift',
+    keyCode: 16
+  });
+
+  expect(headerButtons[0]).toHaveClass('is-focused');
+});
+test('should not change focus from NavItemBody to NavBarItemHeader on arrow key press', function () {
+  getComponent();
+
+  var headerButtons = _testWrapper.screen.getAllByRole('button');
+
+  expect(headerButtons[0]).toBeInTheDocument();
+  headerButtons[0].click();
+
+  _testWrapper.fireEvent.keyDown(headerButtons[0], {
+    key: 'ArrowDown',
+    keyCode: 40
+  });
+
+  expect(_testWrapper.screen.getByTestId('navItemButton')).toHaveClass('is-focused');
+
+  _testWrapper.fireEvent.keyDown(_testWrapper.screen.getByTestId('navItemButton'), {
+    key: 'ArrowUp',
+    keyCode: 38
+  });
+
+  expect(_testWrapper.screen.getByTestId('navItemButton')).toHaveClass('is-focused');
+
+  _testWrapper.fireEvent.keyDown(_testWrapper.screen.getByTestId('navItemButton'), {
+    key: 'ArrowDown',
+    keyCode: 40
+  });
+
+  expect(_testWrapper.screen.getByTestId('navItemLink')).toHaveClass('is-focused');
+
+  _testWrapper.fireEvent.keyDown(_testWrapper.screen.getByTestId('navItemLink'), {
+    key: 'ArrowDown',
+    keyCode: 40
+  });
+
+  expect(_testWrapper.screen.getByTestId('navItemLink')).toHaveClass('is-focused');
+});
+test('should render nav with multiple childrens', function () {
+  getComponentWithMultipleChildrens();
+
+  var nav = _testWrapper.screen.queryByRole('navigation');
+
+  expect(nav).toBeInTheDocument();
+});
+test('should change focus between nav childrens on arrow key press', function () {
+  getComponentWithMultipleChildrens();
+
+  var link = _testWrapper.screen.getByTestId('navLink');
+
+  var button = _testWrapper.screen.getByTestId('navButton');
+
+  expect(link).toBeInTheDocument();
+  link.focus();
+  expect(link).toHaveClass('is-focused');
+
+  _testWrapper.fireEvent.keyDown(link, {
+    key: 'ArrowDown',
+    keyCode: 40
+  });
+
+  expect(button).toHaveClass('is-focused');
+
+  _testWrapper.fireEvent.keyDown(button, {
+    key: 'ArrowUp',
+    keyCode: 38
+  });
+
+  expect(link).toHaveClass('is-focused');
+
+  _testWrapper.fireEvent.keyDown(link, {
+    key: 'ArrowRight',
+    keyCode: 39
+  });
+
+  expect(button).toHaveClass('is-focused');
+
+  _testWrapper.fireEvent.keyDown(button, {
+    key: 'ArrowLeft',
+    keyCode: 37
+  });
+
+  expect(link).toHaveClass('is-focused');
+
+  _testWrapper.fireEvent.keyDown(link, {
+    key: 'Shift',
+    keyCode: 16
+  });
+
+  expect(link).toHaveClass('is-focused');
+
+  _testWrapper.fireEvent.keyDown(link, {
+    key: 'Space',
+    keyCode: 32
+  });
+
+  expect(link).toHaveClass('is-focused');
 });

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

@@ -103,8 +103,9 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     id: key,
-    variant: "accordion.accordionGridNavItem",
+    variant: "navBar.navItem",
     isRow: true,
+    tabIndex: 0,
     className: classNames,
     ref: navItemRef
   }, mergedProps, {
@@ -118,6 +119,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   }, icon && (0, _react2.jsx)(_index.Icon, {
     icon: icon,
+    "aria-label": text,
     size: 20,
     sx: {
       mr: '10px',

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

@@ -16,10 +16,14 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports["default"] = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _interactions = require("@react-aria/interactions");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _index = require("../../index");
@@ -33,12 +37,14 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var NavBarItemBody = function NavBarItemBody(props) {
   var _context;
 
+  var item = props.item,
+      onKeyDown = props.onKeyDown;
   return (0, _react2.jsx)(_index.Box, {
     sx: {
       alignItems: 'flex-start',
       mb: '15px'
     }
-  }, (0, _map["default"])(_context = props.item.children).call(_context, function (child) {
+  }, (0, _map["default"])(_context = item.children).call(_context, function (child) {
     return child.subTitle ? (0, _react2.jsx)(_react.Fragment, {
       key: "fragment".concat(child.subTitle)
     }, (0, _react2.jsx)(_index.Separator, {
@@ -51,14 +57,39 @@ var NavBarItemBody = function NavBarItemBody(props) {
         mb: '10px',
         ml: '45px'
       }
-    }, child.subTitle)) : child;
+    }, child.subTitle)) : (0, _react2.jsx)(ChildItemWrapper, {
+      onKeyDown: onKeyDown,
+      key: "item".concat(child.key || child)
+    }, child);
   }));
 };
 
+var ChildItemWrapper = function ChildItemWrapper(props) {
+  var children = props.children,
+      _onKeyDown = props.onKeyDown;
+  var childrenKey = children.key || children;
+
+  var _useKeyboard = (0, _interactions.useKeyboard)({
+    onKeyDown: function onKeyDown(e) {
+      return _onKeyDown(e, childrenKey);
+    }
+  }),
+      keyboardProps = _useKeyboard.keyboardProps;
+
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    width: "100%"
+  }, keyboardProps), children);
+};
+
 NavBarItemBody.propTypes = {
   item: _propTypes["default"].shape({
-    children: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]))
-  })
+    children: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object])),
+    key: _propTypes["default"].string
+  }),
+  onKeyDown: _propTypes["default"].func
+};
+ChildItemWrapper.propTypes = {
+  onKeyDown: _propTypes["default"].func
 };
 var _default = NavBarItemBody;
 exports["default"] = _default;

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

@@ -2,14 +2,8 @@
 
 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
 });
@@ -20,7 +14,7 @@ var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-s
 
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -30,35 +24,26 @@ var _MenuUpIcon = _interopRequireDefault(require("mdi-react/MenuUpIcon"));
 
 var _index = require("../../index");
 
-var _AccordionGridContext = require("../../context/AccordionGridContext");
-
 var _NavBarContext = require("../../context/NavBarContext");
 
 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 _state$selectionManag, _context;
+  var _navBarState$expanded, _context;
 
   var item = props.item;
   var icon = item.icon,
       key = item.key,
-      className = item.className;
-
-  var _useContext = (0, _react.useContext)(_AccordionGridContext.AccordionGridContext),
-      state = _useContext.state;
-
-  var navState = (0, _react.useContext)(_NavBarContext.NavBarContext);
-  var isExpanded = (_state$selectionManag = state.selectionManager.selectedKeys) === null || _state$selectionManag === void 0 ? void 0 : _state$selectionManag.has(key);
+      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 array = (0, _map["default"])(_context = item.children).call(_context, function (i) {
     return i.key;
   });
-  var childSelected = (0, _includes["default"])(array).call(array, navState.selectedKey);
+  var childSelected = (0, _includes["default"])(array).call(array, navBarState.selectedKey);
 
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
     isSelected: childSelected && !isExpanded
@@ -76,10 +61,11 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
       mr: '10px',
       color: 'white',
       fill: 'white'
-    }
+    },
+    "aria-hidden": "true"
   }), (0, _react2.jsx)(_index.Text, {
     variant: "navBarHeaderText"
-  }, props.item.heading), (0, _react2.jsx)(_index.Box, {
+  }, heading), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center",
     sx: {
@@ -87,7 +73,12 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     }
   }, (0, _react2.jsx)(_index.Icon, {
     icon: isExpanded ? _MenuUpIcon["default"] : _MenuDownIcon["default"],
-    size: 20
+    size: 20,
+    sx: {
+      color: 'white',
+      fill: 'white'
+    },
+    "aria-label": isExpanded ? 'Menu up' : 'Menu down'
   })));
 };