@pingux/astro 2.32.0-alpha.1 → 2.32.0-alpha.11

package/lib/cjs/components/Messages/Messages.js

@@ -3,7 +3,7 @@
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
 var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _filterInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
@@ -15,12 +15,16 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _collections = require("@react-stately/collections");
 var _list = require("@react-stately/list");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _statusProp = require("../../utils/docUtils/statusProp");
@@ -30,22 +34,51 @@ var _react2 = require("@emotion/react");
 var _excluded = ["items", "onClose"];
 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; }
-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 ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(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 Messages = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _context;
   var items = props.items,
     onClose = props.onClose,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var state = (0, _list.useListState)(props);
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    messages = _useState2[0],
+    setMessages = _useState2[1];
+  var factory = (0, _react.useCallback)(function (nodes) {
+    return new _list.ListCollection(nodes);
+  }, []);
+  var collection = (0, _collections.useCollection)(props, factory);
+  (0, _react.useEffect)(function () {
+    setMessages((0, _from["default"])(collection));
+  }, [collection]);
+  var removeMessage = function removeMessage(key) {
+    setMessages((0, _map["default"])(messages).call(messages, function (item) {
+      return item.key === key ? _objectSpread(_objectSpread({}, item), {}, {
+        props: _objectSpread(_objectSpread({}, item.props), {}, {
+          isHidden: true
+        })
+      }) : item;
+    }));
+    (0, _setTimeout2["default"])(function () {
+      return setMessages((0, _filter["default"])(messages).call(messages, function (item) {
+        return item.key !== key;
+      }));
+    }, 200);
+  };
+  var onCloseHandler = function onCloseHandler(key) {
+    if (onClose) {
+      onClose(key);
+    }
+    removeMessage(key);
+  };
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     ref: ref,
     variant: "message.wrapper"
-  }, others), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item) {
+  }, others), (0, _map["default"])(messages).call(messages, function (item) {
     return (0, _react2.jsx)(_Message["default"], {
       key: item.key,
       item: item,
-      onClose: onClose
+      onClose: onCloseHandler
     });
   }));
 });

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

@@ -29,7 +29,7 @@ var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
-var _figmaLinks = require("../../utils/designUtils/figmaLinks.js");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks.ts");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _index2 = require("./index");
 var _Messages = _interopRequireDefault(require("./Messages.mdx"));

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

@@ -5,11 +5,11 @@ var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _testUtils = require("react-dom/test-utils");
 var _reactStately = require("react-stately");
 var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon"));
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
@@ -101,14 +101,17 @@ test('`onClose` get as first arg key of message', function () {
   expect(onClose).toHaveBeenCalledWith('message1');
 });
 test('click on close button removes message after delay', function () {
+  (0, _testUtils.act)(function () {
+    global.setTimeout = jest.fn(function (cb) {
+      return cb();
+    });
+  });
   getComponent();
   var messages = _testWrapper.screen.getByTestId(testId);
   expect(messages.childElementCount).toBe(2);
   var buttons = _testWrapper.screen.getAllByRole('button');
   _userEvent["default"].click(buttons[0]);
-  (0, _setTimeout2["default"])(function () {
-    expect(messages.childElementCount).toBe(1);
-  }, 200);
+  expect(messages.childElementCount).toBe(1);
 });
 test('Item accepts a data-id and the data-id can be found in the DOM', function () {
   getComponent();

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

@@ -12,7 +12,7 @@ var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _hooks = require("../../hooks");
 var _index = require("../../index");
-var _figmaLinks = require("../../utils/designUtils/figmaLinks.js");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks.ts");
 var _modalSizes = require("../../utils/devUtils/constants/modalSizes");
 var _Modal = _interopRequireDefault(require("./Modal.mdx"));
 var _react2 = require("@emotion/react");

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

@@ -25,7 +25,7 @@ var _ViewGridPlusOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
-var _figmaLinks = require("../../utils/designUtils/figmaLinks.js");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks.ts");
 var _NavBar = _interopRequireDefault(require("./NavBar.mdx"));
 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); }

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

@@ -172,7 +172,7 @@ var Expandable = function Expandable() {
       fontSize: 'sm',
       fontWeight: 500,
       color: 'text.secondary',
-      '> div': {
+      '& > div:first-child': {
         order: 2
       }
     },
@@ -184,15 +184,6 @@ var Expandable = function Expandable() {
       gap: 'md',
       width: isExpanded ? '100%' : '400px',
       transition: 'width 500ms'
-    },
-    footer: {
-      marginTop: 'auto',
-      padding: '15px 25px',
-      button: {
-        width: '65px',
-        height: '38px',
-        border: '0 !important'
-      }
     }
   };
   var multivaluesFieldItems = [{
@@ -346,17 +337,12 @@ var Expandable = function Expandable() {
     label: "Log field Description",
     defaultValue: "The Value of the Text Input"
   }));
-  var footer = (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    sx: sx.footer
-  }, (0, _react2.jsx)(_index.Button, {
+  var footer = (0, _react2.jsx)(_index.ButtonBar, null, (0, _react2.jsx)(_index.Button, {
     onPress: onCloseHandler,
-    sx: sx.footer.button,
     variant: "primary"
   }, "Save"), (0, _react2.jsx)(_index.Button, {
     onPress: onCloseHandler,
-    sx: sx.footer.button,
-    variant: "text"
+    variant: "link"
   }, "Cancel"));
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen

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

@@ -13,7 +13,7 @@ var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon
 var _ChevronRightIcon = _interopRequireDefault(require("@pingux/mdi-react/ChevronRightIcon"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
-var _figmaLinks = require("../../utils/designUtils/figmaLinks.js");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks.ts");
 var _images = require("../../utils/devUtils/constants/images");
 var _listViewItemAttributes = require("../ListViewItem/listViewItemAttributes");
 var _PanelHeader = _interopRequireDefault(require("./PanelHeader.mdx"));

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

@@ -17,8 +17,8 @@ var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon
 var _react2 = require("@testing-library/react");
 var _index = require("../../index");
 var _images = require("../../utils/devUtils/constants/images");
-var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 var _testWrapper = require("../../utils/testUtils/testWrapper");
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
 var _PanelHeader = require("./PanelHeader");
 var _react3 = require("@emotion/react");
 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; }
@@ -47,8 +47,12 @@ jest.mock('../../hooks/useFallbackImage', function () {
   };
 });
 
-// Need to be added to each test file to test accessibility using axe.
-(0, _testAxe["default"])(getComponent);
+// Needs to be added to each components test file
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: function renderComponent(props) {
+    return (0, _react3.jsx)(_index.PanelHeader, (0, _extends2["default"])({}, defaultProps, props));
+  }
+});
 describe('PanelHeader', function () {
   test('renders data', function () {
     var _context;

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

@@ -15,7 +15,7 @@ var _addonActions = require("@storybook/addon-actions");
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
-var _figmaLinks = require("../../utils/designUtils/figmaLinks.js");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks.ts");
 var _PopoverMenu = _interopRequireDefault(require("./PopoverMenu.mdx"));
 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); }

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

@@ -10,7 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
-var _figmaLinks = require("../../utils/designUtils/figmaLinks.js");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks.ts");
 var _RequirementsList = _interopRequireDefault(require("./RequirementsList.mdx"));
 var _react2 = require("@emotion/react");
 var _default = {

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

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
-var _figmaLinks = require("../../utils/designUtils/figmaLinks.js");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks.ts");
 var _ScrollBox = _interopRequireDefault(require("./ScrollBox.mdx"));
 var _react2 = require("@emotion/react");
 var _default = {

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

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
-var _figmaLinks = require("../../utils/designUtils/figmaLinks.js");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks.ts");
 var _Separator = _interopRequireDefault(require("./Separator.mdx"));
 var _react2 = require("@emotion/react");
 var _default = {

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

@@ -15,7 +15,7 @@ var _reactStately = require("react-stately");
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
-var _figmaLinks = require("../../utils/designUtils/figmaLinks.js");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks.ts");
 var _Stepper = _interopRequireDefault(require("./Stepper.mdx"));
 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); }

package/lib/cjs/components/TreeView/TreeView.js

@@ -20,6 +20,7 @@ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactStately = require("react-stately");
@@ -30,8 +31,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _TreeViewContext = require("../../context/TreeViewContext");
 var _index = require("../../index");
 var _isIterable = require("../../utils/devUtils/props/isIterable");
+var _TreeViewWrapper = _interopRequireDefault(require("./TreeViewWrapper"));
 var _react2 = require("@emotion/react");
-var _excluded = ["tree", "disabledKeys", "onExpandedChange"]; // split out and exported for ease of use across components
+var _excluded = ["tree", "disabledKeys", "onExpandedChange", "onKeyDown", "pageLength"]; // split out and exported for ease of use across components
 // and to facilitate easier testing (eliminates redundant conditional renders)
 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; }
@@ -57,11 +59,23 @@ function useTreeViewLayout(state) {
   return layout;
 }
 var TreeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _context;
+  var _tree$items$, _context;
   var tree = props.tree,
     disabledKeys = props.disabledKeys,
     onExpandedChange = props.onExpandedChange,
+    onKeyDown = props.onKeyDown,
+    _props$pageLength = props.pageLength,
+    pageLength = _props$pageLength === void 0 ? 5 : _props$pageLength,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+
+  // we are tracking the last focused item.
+  // this enables us to have focus jump back to the item, after focus
+  // leaves the tree, and then returns.
+  var _useState = (0, _react.useState)(tree === null || tree === void 0 || (_tree$items$ = tree.items[0]) === null || _tree$items$ === void 0 ? void 0 : _tree$items$.key),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    lastFocusedItem = _useState2[0],
+    setLastFocusedItem = _useState2[1];
+  var level = 0;
   var treeViewRef = (0, _react.useRef)();
   var selectedKeys = tree.selectedKeys;
 
@@ -76,7 +90,66 @@ var TreeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     selectionMode: 'single',
     disallowEmptySelection: true
   }, others));
-  var level = 0;
+  var flattenNestedData = function flattenNestedData(_data) {
+    var returnArray = [];
+    var checkItemNesting = function checkItemNesting(item) {
+      var _item$value, _item$items;
+      if (((_item$value = item.value) === null || _item$value === void 0 || (_item$value = _item$value.items) === null || _item$value === void 0 ? void 0 : _item$value.length) > 0) {
+        return {
+          isTopLevel: true,
+          hasChildren: true
+        };
+      }
+      if (((_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.length) > 0) {
+        return {
+          isTopLevel: false,
+          hasChildren: true
+        };
+      }
+      return {
+        isTopLevel: false,
+        hasChildren: false
+      };
+    };
+    var checkSection = function checkSection(isRendered, hasItems) {
+      return isRendered && hasItems;
+    };
+    var loop = function loop(data) {
+      for (var i = 0; i < data.length; i += 1) {
+        var obj = {
+          key: data[i].key
+        };
+        returnArray.push(obj);
+        var _checkItemNesting = checkItemNesting(data[i]),
+          hasChildren = _checkItemNesting.hasChildren,
+          isTopLevel = _checkItemNesting.isTopLevel;
+        if (checkSection(state.expandedKeys.has(data[i].key), hasChildren) === true) {
+          if (isTopLevel) {
+            var _data$i$value;
+            loop((_data$i$value = data[i].value) === null || _data$i$value === void 0 ? void 0 : _data$i$value.items);
+          } else {
+            loop(data[i].items);
+          }
+        }
+      }
+    };
+    loop(_data);
+    return returnArray;
+  };
+
+  // list of value pairs of keys and refs
+  // does not need to be in order, because they are values pairs
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    refArray = _useState4[0],
+    setRefs = _useState4[1];
+
+  // creates a flattened list of keys for up/down keyboard use
+  // this DOES need to be in the same order as the HTML appears in the DOM.
+  // we are essentially turning all rendered items into a flat list, for up/down
+  var flatKeyArray = (0, _react.useMemo)(function () {
+    return flattenNestedData(props.items);
+  }, [state.expandedKeys]);
   var ariaLabel = props['aria-label'];
   var listBoxOptions = {
     disabledKeys: disabledKeys,
@@ -90,7 +163,13 @@ var TreeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return (0, _react2.jsx)(_TreeViewContext.TreeViewContext.Provider, {
     value: {
       state: state,
-      tree: tree
+      tree: tree,
+      refArray: refArray,
+      setRefs: setRefs,
+      flatKeyArray: flatKeyArray,
+      pageLength: pageLength,
+      setLastFocusedItem: setLastFocusedItem,
+      lastFocusedItem: lastFocusedItem
     }
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     as: "ul"
@@ -99,14 +178,17 @@ var TreeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     "aria-label": ariaLabel,
     role: "treegrid",
     sx: {
-      overflow: 'hidden'
+      overflow: 'hidden',
+      p: '5px',
+      border: 'none !important'
     }
-  }, others), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item, index) {
+  }, others), (0, _react2.jsx)(_TreeViewWrapper["default"], null, (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item, index) {
     return SectionOrItemRender(item.props.items.length > 0, (0, _react2.jsx)(_index.TreeViewSection, {
       item: item,
       items: item.props.items,
       title: item.props.title,
       key: item.props.title,
+      onKeyDown: onKeyDown,
       level: level + 1,
       setSize: state.collection.size,
       position: index
@@ -114,17 +196,19 @@ var TreeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       item: item,
       title: item.value.value.title,
       key: item.value.value.title,
+      onKeyDown: onKeyDown,
       level: level + 1,
-      position: index,
-      setSize: state.collection.size
+      setSize: state.collection.size,
+      position: index
     }));
-  })));
+  }))));
 });
 TreeView.propTypes = {
   /** data object prop that is required to make the tree function
   this is returned from the useTreeData hook in React-Aria */
   tree: _propTypes["default"].shape({
-    selectedKeys: _isIterable.isIterableProp
+    selectedKeys: _isIterable.isIterableProp,
+    items: _isIterable.isIterableProp
   }).isRequired,
   /** The currently disabled keys in the collection. */
   disabledKeys: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object])),
@@ -133,7 +217,11 @@ TreeView.propTypes = {
   /** The list of TreeView items. */
   items: _isIterable.isIterableProp,
   /** String that describes the treeview when using a screen reader. */
-  'aria-label': _propTypes["default"].string
+  'aria-label': _propTypes["default"].string,
+  /** Handler that is called when a key is pressed. */
+  onKeyDown: _propTypes["default"].func,
+  /** Number of items to move the focus when page up or page down is pressed */
+  pageLength: _propTypes["default"].number
 };
 var _default = TreeView;
 exports["default"] = _default;

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

@@ -29,36 +29,50 @@ var _default = {
 exports["default"] = _default;
 var data = [{
   title: 'Policies',
+  key: 'Policies',
   items: [{
     title: 'Registration',
+    key: 'Registration',
     items: [{
-      title: 'Registration A'
+      title: 'Registration A',
+      key: 'Registration A'
     }, {
       title: 'Registration B',
+      key: 'Registration B',
       items: [{
-        title: 'Registration B1'
+        title: 'Registration B1',
+        key: 'Registration B1'
       }, {
-        title: 'Registration B2'
+        title: 'Registration B2',
+        key: 'Registration B2'
       }]
     }, {
-      title: 'Registration C'
+      title: 'Registration C',
+      key: 'Registration C'
     }, {
-      title: 'Registration D'
+      title: 'Registration D',
+      key: 'Registration D'
     }]
   }, {
     title: 'Authentication',
+    key: 'Authentication',
     items: [{
-      title: 'Authentication A'
+      title: 'Authentication A',
+      key: 'Authentication A'
     }, {
-      title: 'Authentication B'
+      title: 'Authentication B',
+      key: 'Authentication B'
     }]
   }]
 }, {
   title: 'Other',
+  key: 'Other',
   items: [{
-    title: 'Other A'
+    title: 'Other A',
+    key: 'Other A'
   }]
 }, {
+  key: 'Single Item',
   title: 'Single Item'
 }];
 var Default = function Default(args) {
@@ -74,8 +88,7 @@ var Default = function Default(args) {
   return (0, _react2.jsx)(_index.TreeView, (0, _extends2["default"])({}, args, {
     items: tree.items,
     tree: tree,
-    "aria-label": "Example Tree",
-    disabledKeys: ['Single Item']
+    "aria-label": "Example Tree"
   }), function (section) {
     var _section$value;
     return (0, _react2.jsx)(_index.Item, {

package/lib/cjs/components/TreeView/TreeView.styles.js

@@ -10,7 +10,7 @@ var treeRow = {
   cursor: 'pointer',
   height: '31px',
   outline: 'none',
-  '&.is-selected, &.is-hovered, &.is-focused': {
+  '&.is-selected, &.is-hovered': {
     backgroundColor: 'active',
     '& span': {
       color: 'white'
@@ -24,9 +24,29 @@ var treeRow = {
   },
   '&.is-expanded': {
     marginBottom: 'xs'
+  },
+  '& :focus': {
+    border: 'none'
   }
 };
+var wrapper = {
+  '&.is-focused': {
+    boxSizing: 'unset',
+    outline: '1px solid',
+    outlineColor: 'focus',
+    outlineOffset: '2px'
+  },
+  width: '100%',
+  ':not(:last-child)': {
+    mb: 'sm'
+  },
+  ':focus': {
+    border: 'none'
+  },
+  outline: 'none'
+};
 var _default = {
-  treeRow: treeRow
+  treeRow: treeRow,
+  wrapper: wrapper
 };
 exports["default"] = _default;