@pingux/astro 1.30.0-alpha.4 → 1.30.0-alpha.6

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

@@ -2,30 +2,52 @@
 
 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 _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _focus = require("@react-aria/focus");
+
+var _interactions = require("@react-aria/interactions");
+
 var _index = require("../../index");
 
 var _NavBarItemBody = _interopRequireDefault(require("./NavBarItemBody"));
 
 var _NavBarItemHeader = _interopRequireDefault(require("./NavBarItemHeader"));
 
+var _NavBarContext = require("../../context/NavBarContext");
+
 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; }
+
 /**
- * Composed component that creates an AccordionGrid group
+ * Composed component that creates a group
  * with title, and separator options.
  *
  */
@@ -33,28 +55,27 @@ var NavBarSection = function NavBarSection(props) {
   var hasSeparator = props.hasSeparator,
       title = props.title,
       items = props.items;
+  var ref = (0, _react.useRef)();
+  var childrenItems = (0, _filter["default"])(items).call(items, function (i) {
+    return i.children;
+  });
   return (0, _react2.jsx)(_react["default"].Fragment, null, title && (0, _react2.jsx)(_index.Text, {
     variant: "text.navBarSubtitle"
-  }, title), (0, _react2.jsx)(_index.AccordionGridGroup, {
-    items: (0, _filter["default"])(items).call(items, function (i) {
-      return i.children;
-    })
-  }, function (item) {
-    return (0, _react2.jsx)(_index.Item, {
-      headerProps: {
-        variant: 'accordion.accordionGridHeaderNav',
-        hasCaret: false
-      },
-      bodyProps: {
-        variant: 'navBar.sectionBody'
-      },
-      textValue: item
-    }, (0, _react2.jsx)(_NavBarItemHeader["default"], {
-      item: item
-    }), (0, _react2.jsx)(_NavBarItemBody["default"], {
+  }, title), (0, _react2.jsx)("ul", {
+    ref: ref,
+    style: {
+      margin: 0,
+      padding: 0,
+      listStyle: 'none'
+    }
+  }, (0, _map["default"])(childrenItems).call(childrenItems, function (item) {
+    return (0, _react2.jsx)("li", {
+      key: item.key
+    }, (0, _react2.jsx)(SectionItem, {
+      key: item.key,
       item: item
     }));
-  }), hasSeparator && (0, _react2.jsx)(_index.Box, {
+  })), hasSeparator && (0, _react2.jsx)(_index.Box, {
     sx: {
       pl: '15px',
       pr: '15px',
@@ -67,6 +88,92 @@ var NavBarSection = function NavBarSection(props) {
   })));
 };
 
+var SectionItem = function SectionItem(_ref) {
+  var item = _ref.item;
+  var key = item.key,
+      children = item.children;
+  var headerButtonRef = (0, _react.useRef)();
+  var navBarState = (0, _NavBarContext.useNavBarContext)();
+  var expandedKeys = navBarState.expandedKeys,
+      setExpandedKeys = navBarState.setExpandedKeys;
+  var isExpanded = expandedKeys === null || expandedKeys === void 0 ? void 0 : expandedKeys.has(key);
+  var firstChildKey = children.length ? children[0].key : null;
+  var lastChildKey = children.length ? children[children.length - 1].key : null;
+
+  var onExpandedChange = function onExpandedChange(isOpen) {
+    if (isOpen) {
+      expandedKeys.add(key);
+    } else {
+      expandedKeys["delete"](key);
+    }
+
+    setExpandedKeys(new _set["default"](expandedKeys));
+  };
+
+  var focusManager = (0, _focus.useFocusManager)();
+
+  var _onKeyDown = function onKeyDown(e, childKey) {
+    var _e$target;
+
+    switch (e.which) {
+      case 39:
+      case 40:
+        if (childKey !== lastChildKey) {
+          focusManager.focusNext();
+        }
+
+        e.preventDefault();
+        break;
+
+      case 37:
+      case 38:
+        if (childKey !== firstChildKey) {
+          focusManager.focusPrevious();
+        }
+
+        e.preventDefault();
+        break;
+
+      case 27:
+        onExpandedChange(false);
+        headerButtonRef.current.focus();
+        break;
+
+      case 32:
+        if (childKey && (_e$target = e.target) !== null && _e$target !== void 0 && _e$target.href) {
+          e.target.click();
+        }
+
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  var _useKeyboard = (0, _interactions.useKeyboard)({
+    onKeyDown: function onKeyDown(e) {
+      _onKeyDown(e);
+
+      e.continuePropagation();
+    }
+  }),
+      keyboardProps = _useKeyboard.keyboardProps;
+
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
+    ref: headerButtonRef,
+    variant: "navBarSectionButton",
+    onPress: function onPress() {
+      return onExpandedChange(!isExpanded);
+    }
+  }, keyboardProps), (0, _react2.jsx)(_NavBarItemHeader["default"], {
+    item: item
+  })), isExpanded && (0, _react2.jsx)(_NavBarItemBody["default"], {
+    item: item,
+    onKeyDown: _onKeyDown
+  }));
+};
+
 NavBarSection.defaultProps = {
   hasSeparator: false
 };
@@ -83,5 +190,22 @@ NavBarSection.propTypes = {
   */
   items: _propTypes["default"].arrayOf(_propTypes["default"].shape({}))
 };
+SectionItem.propTypes = {
+  item: _propTypes["default"].shape({
+    key: _propTypes["default"].string,
+    children: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object])),
+    'aria-label': _propTypes["default"].string
+  }),
+  state: _propTypes["default"].shape({
+    collection: _propTypes["default"].shape({}),
+    selectedKey: _propTypes["default"].string,
+    setSelectedKey: _propTypes["default"].func,
+    selectionManager: _propTypes["default"].shape({
+      focusedKey: _propTypes["default"].string,
+      setFocusedKey: _propTypes["default"].func
+    })
+  }),
+  menuProps: _propTypes["default"].shape({})
+};
 var _default = NavBarSection;
 exports["default"] = _default;

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

@@ -1,35 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
-var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
-
-var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
-
-var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
-
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
-var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
-
-var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-
-var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
 exports["default"] = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
-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 _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 accordionTitle = {
   display: 'inline-block !important',
   overflowWrap: 'break-word',
@@ -89,42 +66,6 @@ var accordionGridHeader = {
     }
   }
 };
-var accordionGridHeaderNav = {
-  cursor: 'pointer',
-  minHeight: '40px',
-  lineHeight: '30px',
-  outline: 'none',
-  display: 'flex',
-  justifyContent: 'flex-start',
-  flexShrink: 0,
-  wordBreak: 'inherit',
-  whiteSpace: 'nowrap',
-  color: 'neutral.95',
-  flexGrow: 1,
-  fontWeight: 0,
-  fontSize: '16px',
-  '&.is-focused': {
-    outline: 'none',
-    boxShadow: 'focus',
-    WebkitBoxShadow: 'focus',
-    MozBoxShadow: 'focus'
-  },
-  '&.is-hovered': {
-    backgroundColor: 'accent.10'
-  },
-  '&.is-pressed': {
-    backgroundColor: 'accent.5'
-  }
-};
-
-var accordionGridNavItem = _objectSpread(_objectSpread({}, accordionGridHeaderNav), {}, {
-  padding: '10px 15px 10px 15px',
-  '&.is-selected': {
-    backgroundColor: 'accent.5',
-    boxShadow: 'inset 2px 0 0 0 white'
-  }
-});
-
 var accordionGridBody = {
   display: 'none !important',
   pl: 'sm',
@@ -147,8 +88,6 @@ var _default = {
   accordionTitle: accordionTitle,
   accordion: accordion,
   accordionBody: accordionBody,
-  accordionGridHeaderNav: accordionGridHeaderNav,
-  accordionGridNavItem: accordionGridNavItem,
   accordionGridItem: accordionGridItem
 };
 exports["default"] = _default;

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

@@ -95,7 +95,10 @@ var navItemButton = {
   maxWidth: '100%',
   wordWrap: 'break-word',
   wordBreak: 'break-word',
-  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-focused': {
+    outline: '1px solid',
+    outlineColor: '#D033FF'
+  },
   '&.is-hovered': {
     bg: 'accent.10'
   },
@@ -704,6 +707,20 @@ var menuTab = _objectSpread(_objectSpread({}, quiet), {}, {
   }
 });
 
+var navBarSectionButton = _objectSpread(_objectSpread({}, quiet), {}, {
+  width: '100%',
+  '&.is-focused': {
+    outline: '1px solid',
+    outlineColor: '#D033FF'
+  },
+  '&.is-hovered': {
+    backgroundColor: 'accent.10'
+  },
+  '&.is-pressed': {
+    backgroundColor: 'accent.5'
+  }
+});
+
 var _default = {
   accordionHeader: accordionHeader,
   chipDeleteButton: chipDeleteButton,
@@ -739,6 +756,7 @@ var _default = {
   helpHint: helpHint,
   modalCloseButton: modalCloseButton,
   navItemButton: navItemButton,
+  navBarSectionButton: navBarSectionButton,
   applicationPortalPinned: applicationPortalPinned,
   applicationPortal: applicationPortal,
   square: square,

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

@@ -155,11 +155,12 @@ var wrapper = {
 var lineNo = {
   display: 'table-cell',
   userSelect: 'none',
-  p: 5,
+  px: 5,
   m: '0 10px 0 0',
   bg: 'accent.30',
   minWidth: 26,
-  color: 'white'
+  color: 'white',
+  lineHeight: '20px'
 };
 var _default = {
   theme: theme,

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

@@ -60,17 +60,48 @@ var sectionContainer = {
   pt: '10px',
   height: '100%',
   maxHeight: '100%',
-  overflowY: 'overlay !important'
+  overflowY: 'auto'
 };
 
 var sectionBody = _objectSpread(_objectSpread({}, _accordion["default"].accordionGridBody), {}, {
   pl: '0'
 });
 
+var navItem = {
+  cursor: 'pointer',
+  minHeight: '40px',
+  lineHeight: '30px',
+  padding: '10px 15px 10px 15px',
+  outline: 'none',
+  display: 'flex',
+  justifyContent: 'flex-start',
+  flexShrink: 0,
+  wordBreak: 'inherit',
+  whiteSpace: 'nowrap',
+  color: 'neutral.95',
+  flexGrow: 1,
+  fontWeight: 0,
+  fontSize: '16px',
+  '&.is-focused': {
+    outline: '1px solid',
+    outlineColor: '#D033FF'
+  },
+  '&.is-hovered': {
+    backgroundColor: 'accent.10'
+  },
+  '&.is-pressed': {
+    backgroundColor: 'accent.5'
+  },
+  '&.is-selected': {
+    backgroundColor: 'accent.5',
+    boxShadow: 'inset 2px 0 0 0 white'
+  }
+};
 var _default = {
   container: container,
   itemHeaderContainer: itemHeaderContainer,
   sectionContainer: sectionContainer,
-  sectionBody: sectionBody
+  sectionBody: sectionBody,
+  navItem: navItem
 };
 exports["default"] = _default;

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

@@ -189,7 +189,8 @@ var navBarHeaderText = _objectSpread(_objectSpread({}, wordWrap), {}, {
   lineHeight: '13px',
   fontSize: '13px',
   fontWeight: 1,
-  maxWidth: '150px'
+  maxWidth: '150px',
+  color: 'white'
 });
 
 var collapsiblePanellItem = _objectSpread(_objectSpread({}, wordWrap), {}, {

package/lib/components/NavBar/NavBar.js

@@ -1,6 +1,11 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
+import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
+import { v4 as uuid } from 'uuid';
+import { FocusScope, useFocusManager } from '@react-aria/focus';
 import { NavBarContext } from '../../context/NavBarContext';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import Box from '../Box/Box';
@@ -10,9 +15,8 @@ import useProgressiveState from '../../hooks/useProgressiveState';
  *
  * 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.
  *
  */
 
@@ -22,9 +26,10 @@ 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 = useState(defaultExpandedKeys),
+  var _useState = useState(new _Set(defaultExpandedKeys)),
       _useState2 = _slicedToArray(_useState, 2),
       expandedKeys = _useState2[0],
       setExpandedKeys = _useState2[1];
@@ -34,6 +39,17 @@ var NavBar = function NavBar(props) {
       selectedKeys = _useProgressiveState2[0],
       setSelectedKeys = _useProgressiveState2[1];
 
+  var items = useMemo(function () {
+    return _Array$isArray(children) ? _mapInstanceProperty(children).call(children, function (child) {
+      return {
+        item: child,
+        key: uuid()
+      };
+    }) : [{
+      item: children,
+      key: uuid()
+    }];
+  }, [children]);
   return ___EmotionJSX(NavBarContext.Provider, {
     value: {
       selectedKey: selectedKeys,
@@ -45,7 +61,44 @@ var NavBar = function NavBar(props) {
     variant: "navBar.container",
     role: "navigation",
     as: "nav"
-  }, props.children));
+  }, items.length ? ___EmotionJSX(FocusScope, {
+    restoreFocus: true,
+    autoFocus: true
+  }, _mapInstanceProperty(items).call(items, function (_ref) {
+    var item = _ref.item,
+        key = _ref.key;
+    return ___EmotionJSX(FocusableItem, {
+      key: key
+    }, item);
+  })) : null));
+};
+
+var FocusableItem = function FocusableItem(props) {
+  var focusManager = 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.cloneElement(props.children, {
+    onKeyDown: onKeyDown
+  });
+  return childWithFocusHandle;
 };
 
 NavBar.propTypes = {