@pingux/astro 1.39.1 → 1.39.2-alpha.1

package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.js

@@ -58,6 +58,8 @@ var _Box = _interopRequireDefault(require("../Box"));
 
 var _isIterable = require("../../utils/devUtils/props/isIterable");
 
+var _useDevelopmentWarning = _interopRequireDefault(require("../../hooks/useDevelopmentWarning"));
+
 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); }
@@ -89,13 +91,18 @@ var AccordionGridGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
   var _context2;
 
   var disabledKeys = props.disabledKeys,
-      containerProps = props.containerProps;
+      containerProps = props.containerProps,
+      navigationMode = props.navigationMode;
   var accordionGridRef = (0, _react.useRef)();
   /* istanbul ignore next */
 
   (0, _react.useImperativeHandle)(ref, function () {
     return accordionGridRef.current;
   });
+  (0, _useDevelopmentWarning["default"])({
+    message: 'Use navigationMode prop for AccordionGridGroup',
+    shouldTrigger: !navigationMode
+  });
 
   var _useListState = (0, _list.useListState)(props),
       collection = _useListState.collection;
@@ -166,6 +173,12 @@ var AccordionGridGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
       gridProps = _useGrid.gridProps;
 
   delete gridProps.onMouseDown;
+
+  if (navigationMode === 'native') {
+    delete gridProps.onKeyDown;
+    delete gridProps.onKeyDownCapture;
+  }
+
   return (0, _react2.jsx)(_AccordionGridContext.AccordionGridContext.Provider, {
     value: {
       state: state,
@@ -177,7 +190,8 @@ var AccordionGridGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
   }), (0, _map["default"])(_context2 = (0, _from["default"])(state.collection)).call(_context2, function (item) {
     return (0, _react2.jsx)(_AccordionGridItem["default"], (0, _extends2["default"])({
       key: item.key,
-      item: item
+      item: item,
+      navigationMode: navigationMode
     }, item.props), item.props.children);
   })));
 });
@@ -203,6 +217,13 @@ AccordionGridGroup.propTypes = {
    */
   onSelectionChange: _propTypes["default"].func,
 
+  /**
+   * Defines a type of navigation mode.
+   * "native" - navigation via "tab" key.
+   *  "arrows" - navigation via arrow keys.
+   */
+  navigationMode: _propTypes["default"].string,
+
   /**
    * The item keys that are disabled. These items cannot be selected, focused, or otherwise
    * interacted with.

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

@@ -327,7 +327,8 @@ exports.Controlled = Controlled;
 var AccordionWithInputs = function AccordionWithInputs() {
   return (0, _react2.jsx)(_AccordionGridGroup["default"], {
     items: data,
-    defaultSelectedKeys: ['Organization']
+    defaultSelectedKeys: ['Organization'],
+    navigationMode: "native"
   }, function (item) {
     return (0, _react2.jsx)(_collections.Item, {
       key: item.key

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

@@ -61,7 +61,9 @@ var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
 
 var getComponentWithTextFields = function getComponentWithTextFields() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_AccordionGridGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_collections.Item, {
+  return (0, _testWrapper.render)((0, _react2.jsx)(_AccordionGridGroup["default"], (0, _extends2["default"])({}, defaultProps, props, {
+    navigationMode: "native"
+  }), (0, _react2.jsx)(_collections.Item, {
     key: "first",
     textValue: "Duplicate"
   }, (0, _react2.jsx)(_index.Text, null, "Header"), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.TextField, {
@@ -300,4 +302,32 @@ test('adds focus to input on a single click after onBlur', function () {
   _userEvent["default"].click(secondInput);
 
   expect(secondInput).toHaveFocus();
+});
+test('native keyboard navigation mode toggle open/close item body', function () {
+  getComponentWithTextFields();
+
+  var firstItemHeader = _testWrapper.screen.getAllByRole('gridcell')[0];
+
+  expect(firstItemHeader).not.toHaveFocus();
+
+  _userEvent["default"].tab();
+
+  expect(firstItemHeader).toHaveFocus();
+  expect(firstItemHeader).not.toHaveClass('is-selected');
+
+  _userEvent["default"].type(firstItemHeader, '{Enter}');
+
+  expect(firstItemHeader).toHaveClass('is-selected');
+
+  var firstInput = _testWrapper.screen.getByLabelText('label 1');
+
+  expect(firstInput).not.toHaveFocus();
+
+  _userEvent["default"].tab();
+
+  expect(firstInput).toHaveFocus();
+
+  _userEvent["default"].type(firstInput, '{arrowup}');
+
+  expect(firstInput).toHaveFocus();
 });

package/lib/cjs/components/AccordionGridItem/AccordionGridItem.js

@@ -46,7 +46,7 @@ var _hooks = require("../../hooks");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["item", "headerProps", "bodyProps", "children", "className"];
+var _excluded = ["item", "headerProps", "bodyProps", "children", "className", "navigationMode"];
 
 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); }
 
@@ -60,6 +60,7 @@ var AccordionGridItem = function AccordionGridItem(props) {
       bodyProps = props.bodyProps,
       children = props.children,
       className = props.className,
+      navigationMode = props.navigationMode,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
 
   var _React$Children$toArr = _react["default"].Children.toArray(children),
@@ -100,6 +101,11 @@ var AccordionGridItem = function AccordionGridItem(props) {
   delete rowProps.onMouseDown;
   delete rowProps.onPointerDown;
   delete rowProps.onClick;
+
+  if (navigationMode === 'native') {
+    delete rowProps.onKeyDown;
+  }
+
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: "div",
     tabindex: "0"
@@ -113,11 +119,13 @@ var AccordionGridItem = function AccordionGridItem(props) {
     item: item,
     ref: cellRef,
     isDisabled: isDisabled,
-    isSelected: isSelected
+    isSelected: isSelected,
+    navigationMode: navigationMode
   }, headerProps), header), (0, _react2.jsx)(_AccordionGridItemBody["default"], (0, _extends2["default"])({
     item: item,
     ref: cellBodyRef,
-    isSelected: isSelected
+    isSelected: isSelected,
+    navigationMode: navigationMode
   }, bodyProps), body), otherChildren);
 };
 
@@ -128,7 +136,8 @@ AccordionGridItem.propTypes = {
     key: _propTypes["default"].string,
     rendered: _propTypes["default"].node,
     childNodes: _propTypes["default"].arrayOf(_propTypes["default"].shape({}))
-  })
+  }),
+  navigationMode: _propTypes["default"].string
 };
 var _default = AccordionGridItem;
 exports["default"] = _default;

package/lib/cjs/components/AccordionGridItem/AccordionGridItemBody.js

@@ -40,7 +40,7 @@ var _hooks = require("../../hooks");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["item", "className", "children", "isSelected"];
+var _excluded = ["item", "className", "children", "isSelected", "navigationMode"];
 
 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); }
 
@@ -53,6 +53,7 @@ var AccordionGridItemBody = /*#__PURE__*/(0, _react.forwardRef)(function (props,
       className = props.className,
       children = props.children,
       isSelected = props.isSelected,
+      navigationMode = props.navigationMode,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
 
   var _useAccordionGridCont = (0, _AccordionGridContext.useAccordionGridContext)(),
@@ -90,6 +91,12 @@ var AccordionGridItemBody = /*#__PURE__*/(0, _react.forwardRef)(function (props,
   var ariaLabel = props['aria-label'];
   delete mergedProps.onMouseDown;
   delete mergedProps.onPointerDown;
+
+  if (navigationMode === 'native') {
+    delete mergedProps.onKeyDown;
+    delete mergedProps.onKeyDownCapture;
+  }
+
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: "div",
     variant: "accordion.accordionGridBody",
@@ -106,7 +113,8 @@ AccordionGridItemBody.propTypes = {
   'aria-label': _propTypes["default"].string,
   item: _propTypes["default"].shape({
     childNodes: _propTypes["default"].arrayOf(_propTypes["default"].shape({}))
-  })
+  }),
+  navigationMode: _propTypes["default"].string
 };
 var _default = AccordionGridItemBody;
 exports["default"] = _default;

package/lib/cjs/components/AccordionGridItem/AccordionGridItemHeader.js

@@ -48,7 +48,7 @@ var _hooks = require("../../hooks");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["item", "className", "children", "isSelected", "hasCaret"];
+var _excluded = ["item", "className", "children", "isSelected", "hasCaret", "navigationMode"];
 
 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); }
 
@@ -62,6 +62,7 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
       children = props.children,
       isSelected = props.isSelected,
       hasCaret = props.hasCaret,
+      navigationMode = props.navigationMode,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
 
   var _useAccordionGridCont = (0, _AccordionGridContext.useAccordionGridContext)(),
@@ -112,6 +113,21 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
       classNames = _useStatusClasses.classNames;
 
   var ariaLabel = props['aria-label'];
+
+  var handleKeyPress = function handleKeyPress(e) {
+    if (e.key === 'Enter') {
+      state.selectionManager.toggleSelection(e.target.dataset.key);
+    }
+  };
+
+  if (navigationMode === 'native') {
+    delete mergedProps.onKeyDown;
+    delete mergedProps.onKeyDownCapture;
+    delete mergedProps.onKeyUp;
+    mergedProps.tabIndex = 0;
+    mergedProps.onKeyPress = handleKeyPress;
+  }
+
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: "div",
     ref: cellRef
@@ -148,7 +164,8 @@ AccordionGridItemHeader.propTypes = {
     props: _propTypes["default"].shape({
       isPressed: _propTypes["default"].bool
     })
-  })
+  }),
+  navigationMode: _propTypes["default"].string
 };
 var _default = AccordionGridItemHeader;
 exports["default"] = _default;

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

@@ -289,7 +289,10 @@ var data = [{
   }, "Notifications"), (0, _react2.jsx)(_index.NavBarItemLink, {
     key: "Experiences Vanity Domains",
     id: "Experiences Vanity Domains",
-    href: "https://pingidentity.com/"
+    href: "https://pingidentity.com/",
+    onClick: function onClick(e) {
+      return e.preventDefault();
+    }
   }, "Vanity Domains"), (0, _react2.jsx)(_index.NavBarItemButton, {
     key: "Experiences Sender",
     id: "Experiences Sender"
@@ -304,7 +307,6 @@ var secondData = [{
     id: "MFA Button Users",
     key: "MFA Button Users"
   }, "Users"), {
-    hasSeparator: false,
     subTitle: 'PingOne Services'
   }, (0, _react2.jsx)(_index.NavBarItemButton, {
     key: "MFA Button Group",
@@ -378,8 +380,7 @@ var Default = function Default() {
     href: "https://pingidentity.com",
     target: "_blank"
   }, logo)), (0, _react2.jsx)(_index.Separator, {
-    marginTop: "lg",
-    marginBottom: "0px",
+    m: 0,
     backgroundColor: "neutral.60"
   }), (0, _react2.jsx)(_index.Box, {
     variant: "navBar.sectionContainer",
@@ -392,7 +393,6 @@ var Default = function Default() {
     text: "Overview"
   }), (0, _react2.jsx)(_index.NavBarSection, {
     items: data,
-    hasSeparator: true,
     "data-id": "nav-bar-section"
   }), (0, _react2.jsx)(_index.NavBarSection, {
     items: secondData,
@@ -401,6 +401,7 @@ var Default = function Default() {
     "data-id": "second-nav-bar-section"
   }), (0, _react2.jsx)(_index.NavBarSection, {
     items: thirdData,
+    hasSeparator: true,
     "data-id": "third-nav-bar-section"
   })));
 };
@@ -439,8 +440,7 @@ var Controlled = function Controlled() {
     href: "https://pingidentity.com",
     target: "_blank"
   }, logo)), (0, _react2.jsx)(_index.Separator, {
-    marginTop: "lg",
-    marginBottom: "0px",
+    m: "0",
     backgroundColor: "neutral.60",
     key: "top-separator"
   }), (0, _react2.jsx)(_index.Box, {
@@ -455,7 +455,6 @@ var Controlled = function Controlled() {
     text: "Overview"
   }), (0, _react2.jsx)(_index.NavBarSection, {
     items: data,
-    hasSeparator: true,
     "data-id": "first-nav-bar-section"
   }), (0, _react2.jsx)(_index.NavBarSection, {
     items: secondData,

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

@@ -97,6 +97,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }),
       classNames = _useStatusClasses.classNames;
 
+  var color = isSelected ? 'white' : 'neutral.95';
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     id: key,
     variant: "navBar.navItem",
@@ -106,7 +107,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: navItemRef
   }, mergedProps, {
     sx: {
-      maxHeight: '30px'
+      flexGrow: 0
     }
   }), (0, _react2.jsx)(_index.Box, {
     isRow: true,
@@ -116,11 +117,11 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, icon && (0, _react2.jsx)(_index.Icon, {
     icon: icon,
     "aria-label": text,
-    size: 20,
+    size: "sm",
     sx: {
-      mr: '10px',
-      color: 'white',
-      fill: 'white'
+      mr: 'sm',
+      color: color,
+      fill: color
     }
   }), (0, _react2.jsx)(_index.Text, {
     variant: "navBarHeaderText"

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

@@ -41,19 +41,17 @@ var NavBarItemBody = function NavBarItemBody(_ref) {
       onKeyDown = _ref.onKeyDown;
 
   var renderSubTitle = function renderSubTitle(child) {
-    var hasSeparator = child.hasSeparator,
+    var _child$hasSeparator = child.hasSeparator,
+        hasSeparator = _child$hasSeparator === void 0 ? true : _child$hasSeparator,
         subTitle = child.subTitle;
     return (0, _react2.jsx)(_react.Fragment, {
       key: "fragment".concat(subTitle)
-    }, (hasSeparator || hasSeparator === undefined) && (0, _react2.jsx)(_index.Separator, {
+    }, hasSeparator && (0, _react2.jsx)(_index.Separator, {
       variant: "separator.navBarSubtitleSeparator"
     }), (0, _react2.jsx)(_index.Text, {
       key: "text".concat(subTitle),
-      sx: {
-        mb: 'sm',
-        ml: '45px',
-        mt: 'md'
-      },
+      ml: "45px",
+      mt: hasSeparator ? '0' : undefined,
       variant: "text.navBarSubtitle"
     }, subTitle));
   };
@@ -67,8 +65,8 @@ var NavBarItemBody = function NavBarItemBody(_ref) {
 
   return (0, _react2.jsx)(_index.Box, {
     sx: {
-      alignItems: 'flex-start',
-      mb: '15px'
+      alignItems: 'stretch',
+      mb: 'md'
     }
   }, (0, _map["default"])(_context = item.children).call(_context, renderChild));
 };

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

@@ -72,7 +72,8 @@ var NavBarItemButton = function NavBarItemButton(props) {
     id: key,
     variant: "navItemButton",
     onPress: onNavPress,
-    className: classNames
+    className: classNames,
+    color: isSelected ? 'white' : undefined
   }, others, {
     sx: _objectSpread({
       paddingLeft: '45px',

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

@@ -72,6 +72,7 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
   }),
       classNames = _useStatusClasses.classNames;
 
+  var color = childSelected && !isExpanded ? 'white' : 'neutral.95';
   return (0, _react2.jsx)(_index.Box, {
     variant: "navBar.itemHeaderContainer",
     className: classNames,
@@ -82,8 +83,8 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     size: "sm",
     sx: {
       mr: '10px',
-      color: 'white',
-      fill: 'white'
+      color: color,
+      fill: color
     },
     "aria-hidden": "true"
   }), (0, _react2.jsx)(_index.Text, {
@@ -96,10 +97,10 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     }
   }, (0, _react2.jsx)(_index.Icon, {
     icon: isExpanded ? _MenuUpIcon["default"] : _MenuDownIcon["default"],
-    size: "xs",
+    size: "sm",
     sx: {
-      color: 'white',
-      fill: 'white'
+      color: color,
+      fill: color
     },
     "aria-label": isExpanded ? 'Menu up' : 'Menu down'
   })));

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

@@ -71,7 +71,8 @@ var NavBarItemLink = function NavBarItemLink(props) {
     id: key,
     variant: "buttons.navItemButton",
     className: classNames,
-    onPress: onNavPress
+    onPress: onNavPress,
+    color: isSelected ? 'white' : undefined
   }, others, {
     sx: _objectSpread({
       paddingLeft: '45px',

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

@@ -67,8 +67,11 @@ var NavBarSection = function NavBarSection(_ref) {
   var childrenItems = (0, _filter["default"])(items).call(items, function (item) {
     return item.children;
   });
-  return (0, _react2.jsx)(_react["default"].Fragment, null, title && (0, _react2.jsx)(_.Text, {
-    variant: "text.navBarSubtitle"
+  return (0, _react2.jsx)(_react["default"].Fragment, null, hasSeparator && (0, _react2.jsx)(_.Separator, {
+    variant: "separator.navBarSeparator"
+  }), title && (0, _react2.jsx)(_.Text, {
+    variant: "text.navBarSubtitle",
+    mt: hasSeparator ? '0' : undefined
   }, title), (0, _react2.jsx)("ul", (0, _extends2["default"])({
     ref: ref,
     style: {
@@ -83,16 +86,6 @@ var NavBarSection = function NavBarSection(_ref) {
       key: item.key,
       item: item
     }));
-  })), hasSeparator && (0, _react2.jsx)(_.Box, {
-    sx: {
-      pl: '15px',
-      pr: '15px',
-      my: '10px',
-      mt: '15px',
-      mb: '15px'
-    }
-  }, (0, _react2.jsx)(_.Separator, {
-    variant: "separator.navBarSeparator"
   })));
 };
 

package/lib/cjs/styles/variants/buttons.js

@@ -87,16 +87,15 @@ var navItemButton = {
   cursor: 'pointer',
   borderRadius: 0,
   backgroundColor: 'transparent',
-  paddingTop: '5px',
-  paddingBottom: '5px',
+  paddingTop: 'sm',
+  paddingBottom: 'sm',
   display: 'block',
-  color: 'neutral.95',
-  fontSize: 'sm',
-  fontWeight: 1,
+  color: 'neutral.90',
+  fontSize: 'md',
+  fontWeight: 0,
   flexGrow: '1',
   width: '100%',
   textAlign: 'left',
-  lineHeight: '16px',
   whiteSpace: 'break-spaces',
   overflowWrap: 'break-word',
   maxWidth: '100%',

package/lib/cjs/styles/variants/navBar.js

@@ -46,18 +46,17 @@ var itemHeaderContainer = {
   flexGrow: 1,
   alignItems: 'center',
   maxWidth: '230px',
-  padding: '10px 15px 10px 15px',
+  py: 'sm',
+  px: 'md',
   cursor: 'pointer',
   minHeight: '40px',
-  fontWeight: 0,
-  fontSize: '16px',
   '&.is-selected': {
     backgroundColor: 'accent.5',
     boxShadow: 'inset 2px 0 0 0 white'
   }
 };
 var sectionContainer = {
-  pt: '10px',
+  pt: 'sm',
   height: '100%',
   maxHeight: '100%',
   overflowY: 'auto'
@@ -71,7 +70,8 @@ var navItem = {
   cursor: 'pointer',
   minHeight: '40px',
   lineHeight: '30px',
-  padding: '10px 15px 10px 15px',
+  py: 'sm',
+  px: 'md',
   outline: 'none',
   display: 'flex',
   justifyContent: 'flex-start',
@@ -81,7 +81,6 @@ var navItem = {
   color: 'neutral.95',
   flexGrow: 1,
   fontWeight: 0,
-  fontSize: '16px',
   '&.is-focused': {
     outline: '1px solid',
     outlineColor: 'focus'

package/lib/cjs/styles/variants/separator.js

@@ -35,6 +35,7 @@ var base = {
   width: '100%',
   height: '1px',
   my: '5px',
+  flexShrink: 0,
   '&.is-vertical': {
     width: '1px',
     height: '100%',
@@ -43,16 +44,14 @@ var base = {
 };
 
 var navBarSeparator = _objectSpread(_objectSpread({}, base), {}, {
-  width: '100%',
-  backgroundColor: 'neutral.60',
-  my: 0
+  width: 'auto',
+  my: 'md',
+  mx: 'md',
+  backgroundColor: 'neutral.60'
 });
 
-var navBarSubtitleSeparator = _objectSpread(_objectSpread({}, base), {}, {
-  mt: '15px',
-  ml: '45px',
-  width: 'calc(100% - 60px)',
-  backgroundColor: 'neutral.60'
+var navBarSubtitleSeparator = _objectSpread(_objectSpread({}, navBarSeparator), {}, {
+  ml: '45px'
 });
 
 var _default = {

package/lib/cjs/styles/variants/text.js

@@ -177,20 +177,23 @@ var environmentBreadcrumb = _objectSpread(_objectSpread({}, base), {}, {
 
 var navBarSubtitle = {
   ml: 'md',
-  mb: '15px',
-  fontWeight: 3,
-  fontSize: '11px',
+  my: 'sm',
+  fontWeight: 1,
+  fontSize: 'sm',
   color: 'accent.80',
   zIndex: '100'
 };
 
 var navBarHeaderText = _objectSpread(_objectSpread({}, wordWrap), {}, {
   whiteSpace: 'break-spaces',
-  lineHeight: '13px',
-  fontSize: '13px',
+  lineHeight: 1,
+  fontSize: 'md',
   fontWeight: 1,
   maxWidth: '150px',
-  color: 'white'
+  color: 'neutral.95',
+  '.is-selected &': {
+    color: 'white'
+  }
 });
 
 var collapsiblePanellItem = _objectSpread(_objectSpread({}, wordWrap), {}, {

package/lib/components/AccordionGridGroup/AccordionGridGroup.js

@@ -26,6 +26,7 @@ import { AccordionGridContext } from '../../context/AccordionGridContext';
 import AccordionGridItem from '../AccordionGridItem';
 import Box from '../Box';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
+import useDevelopmentWarning from '../../hooks/useDevelopmentWarning';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var collectionTypes = {
   ITEM: 'item',
@@ -47,13 +48,18 @@ var AccordionGridGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context2;
 
   var disabledKeys = props.disabledKeys,
-      containerProps = props.containerProps;
+      containerProps = props.containerProps,
+      navigationMode = props.navigationMode;
   var accordionGridRef = useRef();
   /* istanbul ignore next */
 
   useImperativeHandle(ref, function () {
     return accordionGridRef.current;
   });
+  useDevelopmentWarning({
+    message: 'Use navigationMode prop for AccordionGridGroup',
+    shouldTrigger: !navigationMode
+  });
 
   var _useListState = useListState(props),
       collection = _useListState.collection;
@@ -124,6 +130,12 @@ var AccordionGridGroup = /*#__PURE__*/forwardRef(function (props, ref) {
       gridProps = _useGrid.gridProps;
 
   delete gridProps.onMouseDown;
+
+  if (navigationMode === 'native') {
+    delete gridProps.onKeyDown;
+    delete gridProps.onKeyDownCapture;
+  }
+
   return ___EmotionJSX(AccordionGridContext.Provider, {
     value: {
       state: state,
@@ -135,7 +147,8 @@ var AccordionGridGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   }), _mapInstanceProperty(_context2 = _Array$from(state.collection)).call(_context2, function (item) {
     return ___EmotionJSX(AccordionGridItem, _extends({
       key: item.key,
-      item: item
+      item: item,
+      navigationMode: navigationMode
     }, item.props), item.props.children);
   })));
 });
@@ -161,6 +174,13 @@ AccordionGridGroup.propTypes = {
    */
   onSelectionChange: PropTypes.func,
 
+  /**
+   * Defines a type of navigation mode.
+   * "native" - navigation via "tab" key.
+   *  "arrows" - navigation via arrow keys.
+   */
+  navigationMode: PropTypes.string,
+
   /**
    * The item keys that are disabled. These items cannot be selected, focused, or otherwise
    * interacted with.