@pingux/astro 1.39.1 → 1.39.2-alpha.1

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

@@ -289,7 +289,8 @@ export var Controlled = function Controlled() {
 export var AccordionWithInputs = function AccordionWithInputs() {
   return ___EmotionJSX(AccordionGridGroup, {
     items: data,
-    defaultSelectedKeys: ['Organization']
+    defaultSelectedKeys: ['Organization'],
+    navigationMode: "native"
   }, function (item) {
     return ___EmotionJSX(Item, {
       key: item.key

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

@@ -46,7 +46,9 @@ var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
 
 var getComponentWithTextFields = function getComponentWithTextFields() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(AccordionGridGroup, _extends({}, defaultProps, props), ___EmotionJSX(Item, {
+  return render(___EmotionJSX(AccordionGridGroup, _extends({}, defaultProps, props, {
+    navigationMode: "native"
+  }), ___EmotionJSX(Item, {
     key: "first",
     textValue: "Duplicate"
   }, ___EmotionJSX(Text, null, "Header"), ___EmotionJSX(Box, null, ___EmotionJSX(TextField, {
@@ -223,4 +225,20 @@ test('adds focus to input on a single click after onBlur', function () {
   secondInput.blur();
   userEvent.click(secondInput);
   expect(secondInput).toHaveFocus();
+});
+test('native keyboard navigation mode toggle open/close item body', function () {
+  getComponentWithTextFields();
+  var firstItemHeader = screen.getAllByRole('gridcell')[0];
+  expect(firstItemHeader).not.toHaveFocus();
+  userEvent.tab();
+  expect(firstItemHeader).toHaveFocus();
+  expect(firstItemHeader).not.toHaveClass('is-selected');
+  userEvent.type(firstItemHeader, '{Enter}');
+  expect(firstItemHeader).toHaveClass('is-selected');
+  var firstInput = screen.getByLabelText('label 1');
+  expect(firstInput).not.toHaveFocus();
+  userEvent.tab();
+  expect(firstInput).toHaveFocus();
+  userEvent.type(firstInput, '{arrowup}');
+  expect(firstInput).toHaveFocus();
 });

package/lib/components/AccordionGridItem/AccordionGridItem.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _toArray from "@babel/runtime-corejs3/helpers/esm/toArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["item", "headerProps", "bodyProps", "children", "className"];
+var _excluded = ["item", "headerProps", "bodyProps", "children", "className", "navigationMode"];
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { useEffect, useRef } from 'react';
@@ -23,6 +23,7 @@ var AccordionGridItem = function AccordionGridItem(props) {
       bodyProps = props.bodyProps,
       children = props.children,
       className = props.className,
+      navigationMode = props.navigationMode,
       others = _objectWithoutProperties(props, _excluded);
 
   var _React$Children$toArr = React.Children.toArray(children),
@@ -63,6 +64,11 @@ var AccordionGridItem = function AccordionGridItem(props) {
   delete rowProps.onMouseDown;
   delete rowProps.onPointerDown;
   delete rowProps.onClick;
+
+  if (navigationMode === 'native') {
+    delete rowProps.onKeyDown;
+  }
+
   return ___EmotionJSX(Box, _extends({
     as: "div",
     tabindex: "0"
@@ -76,11 +82,13 @@ var AccordionGridItem = function AccordionGridItem(props) {
     item: item,
     ref: cellRef,
     isDisabled: isDisabled,
-    isSelected: isSelected
+    isSelected: isSelected,
+    navigationMode: navigationMode
   }, headerProps), header), ___EmotionJSX(AccordionGridItemBody, _extends({
     item: item,
     ref: cellBodyRef,
-    isSelected: isSelected
+    isSelected: isSelected,
+    navigationMode: navigationMode
   }, bodyProps), body), otherChildren);
 };
 
@@ -91,6 +99,7 @@ AccordionGridItem.propTypes = {
     key: PropTypes.string,
     rendered: PropTypes.node,
     childNodes: PropTypes.arrayOf(PropTypes.shape({}))
-  })
+  }),
+  navigationMode: PropTypes.string
 };
 export default AccordionGridItem;

package/lib/components/AccordionGridItem/AccordionGridItemBody.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["item", "className", "children", "isSelected"];
+var _excluded = ["item", "className", "children", "isSelected", "navigationMode"];
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { forwardRef } from 'react';
 import { mergeProps } from '@react-aria/utils';
@@ -18,6 +18,7 @@ var AccordionGridItemBody = /*#__PURE__*/forwardRef(function (props, ref) {
       className = props.className,
       children = props.children,
       isSelected = props.isSelected,
+      navigationMode = props.navigationMode,
       others = _objectWithoutProperties(props, _excluded);
 
   var _useAccordionGridCont = useAccordionGridContext(),
@@ -55,6 +56,12 @@ var AccordionGridItemBody = /*#__PURE__*/forwardRef(function (props, ref) {
   var ariaLabel = props['aria-label'];
   delete mergedProps.onMouseDown;
   delete mergedProps.onPointerDown;
+
+  if (navigationMode === 'native') {
+    delete mergedProps.onKeyDown;
+    delete mergedProps.onKeyDownCapture;
+  }
+
   return ___EmotionJSX(Box, _extends({
     as: "div",
     variant: "accordion.accordionGridBody",
@@ -71,6 +78,7 @@ AccordionGridItemBody.propTypes = {
   'aria-label': PropTypes.string,
   item: PropTypes.shape({
     childNodes: PropTypes.arrayOf(PropTypes.shape({}))
-  })
+  }),
+  navigationMode: PropTypes.string
 };
 export default AccordionGridItemBody;

package/lib/components/AccordionGridItem/AccordionGridItemHeader.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["item", "className", "children", "isSelected", "hasCaret"];
+var _excluded = ["item", "className", "children", "isSelected", "hasCaret", "navigationMode"];
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
 import { mergeProps } from '@react-aria/utils';
@@ -23,6 +23,7 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
       children = props.children,
       isSelected = props.isSelected,
       hasCaret = props.hasCaret,
+      navigationMode = props.navigationMode,
       others = _objectWithoutProperties(props, _excluded);
 
   var _useAccordionGridCont = useAccordionGridContext(),
@@ -74,6 +75,21 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
       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 ___EmotionJSX(Box, _extends({
     as: "div",
     ref: cellRef
@@ -110,6 +126,7 @@ AccordionGridItemHeader.propTypes = {
     props: PropTypes.shape({
       isPressed: PropTypes.bool
     })
-  })
+  }),
+  navigationMode: PropTypes.string
 };
 export default AccordionGridItemHeader;

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

@@ -254,7 +254,10 @@ var data = [{
   }, "Notifications"), ___EmotionJSX(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"), ___EmotionJSX(NavBarItemButton, {
     key: "Experiences Sender",
     id: "Experiences Sender"
@@ -269,7 +272,6 @@ var secondData = [{
     id: "MFA Button Users",
     key: "MFA Button Users"
   }, "Users"), {
-    hasSeparator: false,
     subTitle: 'PingOne Services'
   }, ___EmotionJSX(NavBarItemButton, {
     key: "MFA Button Group",
@@ -342,8 +344,7 @@ export var Default = function Default() {
     href: "https://pingidentity.com",
     target: "_blank"
   }, logo)), ___EmotionJSX(Separator, {
-    marginTop: "lg",
-    marginBottom: "0px",
+    m: 0,
     backgroundColor: "neutral.60"
   }), ___EmotionJSX(Box, {
     variant: "navBar.sectionContainer",
@@ -356,7 +357,6 @@ export var Default = function Default() {
     text: "Overview"
   }), ___EmotionJSX(NavBarSection, {
     items: data,
-    hasSeparator: true,
     "data-id": "nav-bar-section"
   }), ___EmotionJSX(NavBarSection, {
     items: secondData,
@@ -365,6 +365,7 @@ export var Default = function Default() {
     "data-id": "second-nav-bar-section"
   }), ___EmotionJSX(NavBarSection, {
     items: thirdData,
+    hasSeparator: true,
     "data-id": "third-nav-bar-section"
   })));
 };
@@ -400,8 +401,7 @@ export var Controlled = function Controlled() {
     href: "https://pingidentity.com",
     target: "_blank"
   }, logo)), ___EmotionJSX(Separator, {
-    marginTop: "lg",
-    marginBottom: "0px",
+    m: "0",
     backgroundColor: "neutral.60",
     key: "top-separator"
   }), ___EmotionJSX(Box, {
@@ -416,7 +416,6 @@ export var Controlled = function Controlled() {
     text: "Overview"
   }), ___EmotionJSX(NavBarSection, {
     items: data,
-    hasSeparator: true,
     "data-id": "first-nav-bar-section"
   }), ___EmotionJSX(NavBarSection, {
     items: secondData,

package/lib/components/NavBarSection/NavBarItem.js

@@ -64,6 +64,7 @@ var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
   }),
       classNames = _useStatusClasses.classNames;
 
+  var color = isSelected ? 'white' : 'neutral.95';
   return ___EmotionJSX(Box, _extends({
     id: key,
     variant: "navBar.navItem",
@@ -73,7 +74,7 @@ var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: navItemRef
   }, mergedProps, {
     sx: {
-      maxHeight: '30px'
+      flexGrow: 0
     }
   }), ___EmotionJSX(Box, {
     isRow: true,
@@ -83,11 +84,11 @@ var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
   }, icon && ___EmotionJSX(Icon, {
     icon: icon,
     "aria-label": text,
-    size: 20,
+    size: "sm",
     sx: {
-      mr: '10px',
-      color: 'white',
-      fill: 'white'
+      mr: 'sm',
+      color: color,
+      fill: color
     }
   }), ___EmotionJSX(Text, {
     variant: "navBarHeaderText"

package/lib/components/NavBarSection/NavBarItemBody.js

@@ -13,19 +13,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 ___EmotionJSX(Fragment, {
       key: "fragment".concat(subTitle)
-    }, (hasSeparator || hasSeparator === undefined) && ___EmotionJSX(Separator, {
+    }, hasSeparator && ___EmotionJSX(Separator, {
       variant: "separator.navBarSubtitleSeparator"
     }), ___EmotionJSX(Text, {
       key: "text".concat(subTitle),
-      sx: {
-        mb: 'sm',
-        ml: '45px',
-        mt: 'md'
-      },
+      ml: "45px",
+      mt: hasSeparator ? '0' : undefined,
       variant: "text.navBarSubtitle"
     }, subTitle));
   };
@@ -39,8 +37,8 @@ var NavBarItemBody = function NavBarItemBody(_ref) {
 
   return ___EmotionJSX(Box, {
     sx: {
-      alignItems: 'flex-start',
-      mb: '15px'
+      alignItems: 'stretch',
+      mb: 'md'
     }
   }, _mapInstanceProperty(_context = item.children).call(_context, renderChild));
 };

package/lib/components/NavBarSection/NavBarItemButton.js

@@ -47,7 +47,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/components/NavBarSection/NavBarItemHeader.js

@@ -44,6 +44,7 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
   }),
       classNames = _useStatusClasses.classNames;
 
+  var color = childSelected && !isExpanded ? 'white' : 'neutral.95';
   return ___EmotionJSX(Box, {
     variant: "navBar.itemHeaderContainer",
     className: classNames,
@@ -54,8 +55,8 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     size: "sm",
     sx: {
       mr: '10px',
-      color: 'white',
-      fill: 'white'
+      color: color,
+      fill: color
     },
     "aria-hidden": "true"
   }), ___EmotionJSX(Text, {
@@ -68,10 +69,10 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     }
   }, ___EmotionJSX(Icon, {
     icon: isExpanded ? MenuUp : MenuDown,
-    size: "xs",
+    size: "sm",
     sx: {
-      color: 'white',
-      fill: 'white'
+      color: color,
+      fill: color
     },
     "aria-label": isExpanded ? 'Menu up' : 'Menu down'
   })));

package/lib/components/NavBarSection/NavBarItemLink.js

@@ -46,7 +46,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/components/NavBarSection/NavBarSection.js

@@ -10,7 +10,7 @@ import React, { useRef } from 'react';
 import { useFocusManager } from '@react-aria/focus';
 import { useKeyboard } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
-import { Box, Button, Separator, Text } from '../../';
+import { Button, Separator, Text } from '../../';
 import { useNavBarContext } from '../../context/NavBarContext';
 import NavBarItemBody from './NavBarItemBody';
 import NavBarItemHeader from './NavBarItemHeader';
@@ -34,8 +34,11 @@ var NavBarSection = function NavBarSection(_ref) {
     return item.children;
   });
 
-  return ___EmotionJSX(React.Fragment, null, title && ___EmotionJSX(Text, {
-    variant: "text.navBarSubtitle"
+  return ___EmotionJSX(React.Fragment, null, hasSeparator && ___EmotionJSX(Separator, {
+    variant: "separator.navBarSeparator"
+  }), title && ___EmotionJSX(Text, {
+    variant: "text.navBarSubtitle",
+    mt: hasSeparator ? '0' : undefined
   }, title), ___EmotionJSX("ul", _extends({
     ref: ref,
     style: {
@@ -50,16 +53,6 @@ var NavBarSection = function NavBarSection(_ref) {
       key: item.key,
       item: item
     }));
-  })), hasSeparator && ___EmotionJSX(Box, {
-    sx: {
-      pl: '15px',
-      pr: '15px',
-      my: '10px',
-      mt: '15px',
-      mb: '15px'
-    }
-  }, ___EmotionJSX(Separator, {
-    variant: "separator.navBarSeparator"
   })));
 };
 

package/lib/styles/variants/buttons.js

@@ -65,16 +65,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/styles/variants/navBar.js

@@ -27,18 +27,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'
@@ -52,7 +51,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',
@@ -62,7 +62,6 @@ var navItem = {
   color: 'neutral.95',
   flexGrow: 1,
   fontWeight: 0,
-  fontSize: '16px',
   '&.is-focused': {
     outline: '1px solid',
     outlineColor: 'focus'

package/lib/styles/variants/separator.js

@@ -17,6 +17,7 @@ var base = {
   width: '100%',
   height: '1px',
   my: '5px',
+  flexShrink: 0,
   '&.is-vertical': {
     width: '1px',
     height: '100%',
@@ -25,16 +26,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'
 });
 
 export default {

package/lib/styles/variants/text.js

@@ -159,20 +159,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.39.1",
+  "version": "1.39.2-alpha.1",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",