@pingux/astro 2.27.0-alpha.4 → 2.27.1-alpha.0

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

@@ -15,6 +15,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.SectionOrItemRender = void 0;
+exports.useTreeViewLayout = useTreeViewLayout;
 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 _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
@@ -22,12 +23,15 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactStately = require("react-stately");
+var _i18n = require("@react-aria/i18n");
+var _listbox = require("@react-aria/listbox");
+var _layout = require("@react-stately/layout");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _TreeViewContext = require("../../context/TreeViewContext");
 var _index = require("../../index");
 var _isIterable = require("../../utils/devUtils/props/isIterable");
 var _react2 = require("@emotion/react");
-var _excluded = ["tree", "onExpandedChange"]; // split out and exported for ease of use across components
+var _excluded = ["tree", "disabledKeys", "onExpandedChange"]; // 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; }
@@ -40,35 +44,64 @@ var SectionOrItemRender = function SectionOrItemRender(condition, SectionCompone
   return ItemComponent;
 };
 exports.SectionOrItemRender = SectionOrItemRender;
+function useTreeViewLayout(state) {
+  var collator = (0, _i18n.useCollator)({
+    usage: 'search',
+    sensitivity: 'base'
+  });
+  var layout = (0, _react.useMemo)(function () {
+    return new _layout.ListLayout();
+  }, [collator]);
+  layout.collection = state.collection;
+  layout.disabledKeys = state.disabledKeys;
+  return layout;
+}
 var TreeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _labelRef$current, _context;
+  var _context;
   var tree = props.tree,
+    disabledKeys = props.disabledKeys,
     onExpandedChange = props.onExpandedChange,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var labelRef = (0, _react.useRef)();
   var treeViewRef = (0, _react.useRef)();
+  var selectedKeys = tree.selectedKeys;
+
   /* istanbul ignore next */
   (0, _react.useImperativeHandle)(ref, function () {
     return treeViewRef.current;
   });
   var state = (0, _reactStately.useTreeState)(_objectSpread({
-    onExpandedChange: onExpandedChange
+    onExpandedChange: onExpandedChange,
+    disabledKeys: disabledKeys,
+    selectedKeys: selectedKeys,
+    selectionMode: 'single',
+    disallowEmptySelection: true
   }, others));
+  var ariaLabel = props['aria-label'];
+  var listBoxOptions = {
+    disabledKeys: disabledKeys,
+    'aria-label': ariaLabel
+  };
+  var layout = useTreeViewLayout(state);
+  var _useListBox = (0, _listbox.useListBox)(_objectSpread(_objectSpread({}, listBoxOptions), {}, {
+      keyboardDelegate: layout
+    }), state, treeViewRef),
+    listBoxProps = _useListBox.listBoxProps;
   return (0, _react2.jsx)(_TreeViewContext.TreeViewContext.Provider, {
     value: {
       state: state,
       tree: tree
     }
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    as: "ul",
-    role: "tree",
+    as: "ul"
+  }, listBoxProps, {
     ref: treeViewRef,
-    "aria-labelledby": labelRef === null || labelRef === void 0 || (_labelRef$current = labelRef.current) === null || _labelRef$current === void 0 ? void 0 : _labelRef$current.id,
+    "aria-label": ariaLabel,
+    role: "treegrid",
     sx: {
       overflow: 'hidden'
     }
   }, others), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item) {
-    return SectionOrItemRender(item.type === 'section', (0, _react2.jsx)(_index.TreeViewSection, {
+    return SectionOrItemRender(item.props.items.length > 0, (0, _react2.jsx)(_index.TreeViewSection, {
       item: item,
       items: item.props.items,
       title: item.props.title,
@@ -80,13 +113,12 @@ var TreeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }));
   })));
 });
-TreeView.defaultProps = {
-  'aria-label': 'tree'
-};
 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({}).isRequired,
+  tree: _propTypes["default"].shape({
+    selectedKeys: _isIterable.isIterableProp
+  }).isRequired,
   /** The currently disabled keys in the collection. */
   disabledKeys: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object])),
   /** Callback function that is called when items are expanded or collapsed. */

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

@@ -10,8 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _react = _interopRequireDefault(require("react"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
-var _TreeView = require("./TreeView");
-var _TreeView2 = _interopRequireDefault(require("./TreeView.mdx"));
+var _TreeView = _interopRequireDefault(require("./TreeView.mdx"));
 var _react2 = require("@emotion/react");
 var _default = {
   title: 'Experimental/TreeView',
@@ -19,7 +18,7 @@ var _default = {
   parameters: {
     docs: {
       page: function page() {
-        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_TreeView2["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_TreeView["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       },
       source: {
         type: 'code'
@@ -74,16 +73,16 @@ var Default = function Default(args) {
   });
   return (0, _react2.jsx)(_index.TreeView, (0, _extends2["default"])({}, args, {
     items: tree.items,
-    tree: tree
+    tree: tree,
+    "aria-label": "Example Tree",
+    disabledKeys: ['Single Item']
   }), function (section) {
-    return (0, _TreeView.SectionOrItemRender)(section.children.length > 0, (0, _react2.jsx)(_index.Section, {
+    var _section$value;
+    return (0, _react2.jsx)(_index.Item, {
       key: section.key,
       items: section.children,
-      title: section.value.title
-    }), (0, _react2.jsx)(_index.Item, {
-      key: section.key,
-      title: section.title
-    }));
+      title: (_section$value = section.value) === null || _section$value === void 0 ? void 0 : _section$value.title
+    });
   });
 };
 exports.Default = Default;

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

@@ -11,34 +11,37 @@ var _ = _interopRequireDefault(require("."));
 var _react2 = require("@emotion/react");
 var testId = 'test-TreeView';
 var defaultProps = {
-  'data-testid': testId
+  'data-testid': testId,
+  label: 'example tree'
 };
 var data = [{
-  title: 'People',
+  title: 'Policies',
   items: [{
-    title: 'David',
-    customProp: 1
-  }, {
-    title: 'Sam'
-  }, {
-    title: 'Jane'
-  }]
-}, {
-  title: 'Animals',
-  items: [{
-    title: 'Bears',
+    title: 'Registration',
     items: [{
-      title: 'Black Bear'
+      title: 'Registration A'
+    }, {
+      title: 'Registration B'
+    }, {
+      title: 'Registration C'
     }, {
-      title: 'Brown Bear'
+      title: 'Registration D'
     }]
   }, {
-    title: 'Kangaroo'
-  }, {
-    title: 'Snake'
+    title: 'Authentication',
+    items: [{
+      title: 'Authentication A'
+    }, {
+      title: 'Authentication B'
+    }]
+  }]
+}, {
+  title: 'Other',
+  items: [{
+    title: 'Other A'
   }]
 }, {
-  title: 'Plant'
+  title: 'Single Item'
 }];
 var TreeViewComponent = function TreeViewComponent(props) {
   var tree = (0, _reactStately.useTreeData)({
@@ -52,36 +55,62 @@ var TreeViewComponent = function TreeViewComponent(props) {
   });
   return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props, {
     items: tree.items,
-    tree: tree
-  }), function (section) {
-    var _section$children;
-    return (0, _TreeView.SectionOrItemRender)(((_section$children = section.children) === null || _section$children === void 0 ? void 0 : _section$children.length) > 0, (0, _react2.jsx)(_index.Section, {
-      key: section.key,
-      items: section.children,
-      title: section.key,
-      customProp: {
-        testp: 1
-      }
-    }), (0, _react2.jsx)(_index.Item, {
-      key: section.key,
-      title: section.key
-    }));
+    tree: tree,
+    "aria-label": "Example Tree"
+  }), function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.key,
+      items: item.children,
+      title: item.key
+    });
   });
 };
+var offsetWidth;
+var offsetHeight;
+var scrollHeight;
+var onSelectionChange = jest.fn();
+beforeAll(function () {
+  offsetWidth = jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function () {
+    return 1000;
+  });
+  offsetHeight = jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(function () {
+    return 1000;
+  });
+  scrollHeight = jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(function () {
+    return 48;
+  });
+  jest.spyOn(window, 'requestAnimationFrame').mockImplementation(function (cb) {
+    return cb();
+  });
+  jest.useFakeTimers();
+});
+afterEach(function () {
+  onSelectionChange.mockClear();
+});
+afterAll(function () {
+  offsetWidth.mockReset();
+  offsetHeight.mockReset();
+  scrollHeight.mockReset();
+});
+test('TreeView component does load', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(TreeViewComponent, null));
+  var element = _testWrapper.screen.queryByRole('treegrid');
+  expect(element).toBeInTheDocument();
+});
 test('Can select an Item using the mouse', function () {
   (0, _testWrapper.render)((0, _react2.jsx)(TreeViewComponent, null));
-  var element = _testWrapper.screen.getByTestId(testId);
+  var element = _testWrapper.screen.queryByRole('treegrid');
   expect(element).toBeInTheDocument();
-  var peopleElement = _testWrapper.screen.getByText('People');
+  var peopleElement = _testWrapper.screen.queryByText('Single Item');
   expect(peopleElement).not.toHaveClass('is-selected');
   _testWrapper.fireEvent.click(peopleElement);
   expect(peopleElement).toHaveClass('is-selected');
 });
 test('Renders both Sections and Items', function () {
   (0, _testWrapper.render)((0, _react2.jsx)(TreeViewComponent, null));
-  var peopleElement = _testWrapper.screen.getByText('People');
+  var peopleElement = _testWrapper.screen.getByText('Single Item');
   expect(peopleElement).toBeInTheDocument();
-  var plantElement = _testWrapper.screen.getByText('Plant');
+  var plantElement = _testWrapper.screen.getByText('Other');
   expect(plantElement).toBeInTheDocument();
   var allListItems = _testWrapper.screen.getAllByRole('treeitem');
   expect(allListItems).toHaveLength(3);
@@ -111,9 +140,9 @@ test('onExpandedChange change prop calls when used', function () {
 });
 test('disabledKeys prop disables items in the tree -- rendering them unclickable', function () {
   (0, _testWrapper.render)((0, _react2.jsx)(TreeViewComponent, {
-    disabledKeys: ['Plant']
+    disabledKeys: ['Single Item']
   }));
-  var listItems = _testWrapper.screen.getAllByRole('treeitem');
+  var listItems = _testWrapper.screen.queryAllByRole('treeitem');
   var thisItem = listItems[2];
   expect(thisItem).not.toHaveClass('is-selected');
   expect(thisItem).toHaveAttribute('aria-disabled', 'true');
@@ -121,4 +150,18 @@ test('disabledKeys prop disables items in the tree -- rendering them unclickable
   _testWrapper.fireEvent.mouseUp(thisItem);
   expect(thisItem).not.toHaveClass('is-selected');
   expect(thisItem).toHaveAttribute('aria-selected', 'false');
+});
+var firstJSX = (0, _react2.jsx)("p", null, "first");
+var secondJSX = (0, _react2.jsx)("p", null, "second");
+test('Section or Item Render renders first item if condition is true', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)("div", null, (0, _TreeView.SectionOrItemRender)(true, firstJSX, secondJSX)));
+  var thisItem = _testWrapper.screen.getByText('first');
+  expect(thisItem).toBeInTheDocument();
+  expect(_testWrapper.screen.queryByText('second')).not.toBeInTheDocument();
+});
+test('Section or Item Render renders second item if condition is false', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)("div", null, (0, _TreeView.SectionOrItemRender)(false, firstJSX, secondJSX)));
+  var thisItem = _testWrapper.screen.getByText('second');
+  expect(thisItem).toBeInTheDocument();
+  expect(_testWrapper.screen.queryByText('first')).not.toBeInTheDocument();
 });

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

@@ -9,10 +9,10 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
-var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _FileIcon = _interopRequireDefault(require("@pingux/mdi-react/FileIcon"));
+var _listbox = require("@react-aria/listbox");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _TreeViewContext = require("../../context/TreeViewContext");
 var _index = require("../../index");
@@ -21,40 +21,39 @@ var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var TreeViewItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _context, _context2, _context3;
   var item = props.item,
     title = props.title;
+  var key = item.key;
   var treeItemRef = (0, _react.useRef)();
   /* istanbul ignore next */
   (0, _react.useImperativeHandle)(ref, function () {
     return treeItemRef.current;
   });
   var _useTreeViewContext = (0, _TreeViewContext.useTreeViewContext)(),
-    state = _useTreeViewContext.state,
-    tree = _useTreeViewContext.tree;
-  var isExpanded = (0, _includes["default"])(_context = (0, _from["default"])(state.expandedKeys)).call(_context, item.key);
-  var isSelected = (0, _includes["default"])(_context2 = (0, _from["default"])(tree.selectedKeys)).call(_context2, item.key);
-  var isDisabled = (0, _includes["default"])(_context3 = (0, _from["default"])(state.disabledKeys)).call(_context3, item.key);
-
-  // this component may seem unnecessary, but it will be where the
-  // useOption and dragAndDrop stuff will go
-  // this comment will be removed at that time.
-
-  return (0, _react2.jsx)(_index.Box, {
+    state = _useTreeViewContext.state;
+  var _useOption = (0, _listbox.useOption)({
+      key: key
+    }, state, treeItemRef),
+    optionProps = _useOption.optionProps,
+    isSelected = _useOption.isSelected,
+    isDisabled = _useOption.isDisabled;
+  var isExpanded = state.expandedKeys.has(key);
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     as: "li",
     isRow: true,
     ref: treeItemRef,
+    "aria-disabled": isDisabled
+  }, optionProps, {
     role: "treeitem",
-    "aria-selected": isSelected,
-    "aria-disabled": isDisabled,
     sx: {
       width: '100%',
       ml: '36px',
       ':not(:last-child)': {
         pb: 'sm'
       }
-    }
-  }, (0, _react2.jsx)(_TreeViewRow["default"], {
+    },
+    "aria-selected": isSelected
+  }), (0, _react2.jsx)(_TreeViewRow["default"], {
     item: item,
     title: title,
     mainIcon: _FileIcon["default"],

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

@@ -9,10 +9,11 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
-var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 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 _react = _interopRequireWildcard(require("react"));
+var _listbox = require("@react-aria/listbox");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _TreeViewContext = require("../../context/TreeViewContext");
 var _index = require("../../index");
@@ -22,22 +23,26 @@ var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var TreeViewSection = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _context, _context2, _context3, _context4;
+  var _context;
   var item = props.item,
     items = props.items,
     title = props.title;
+  var key = item.key;
   var treeSectionRef = (0, _react.useRef)();
   /* istanbul ignore next */
   (0, _react.useImperativeHandle)(ref, function () {
     return treeSectionRef.current;
   });
   var _useTreeViewContext = (0, _TreeViewContext.useTreeViewContext)(),
-    state = _useTreeViewContext.state,
-    tree = _useTreeViewContext.tree;
-  var isExpanded = (0, _includes["default"])(_context = (0, _from["default"])(state.expandedKeys)).call(_context, item.key);
-  var isSelected = (0, _includes["default"])(_context2 = (0, _from["default"])(tree.selectedKeys)).call(_context2, item.key);
-  var isDisabled = (0, _includes["default"])(_context3 = (0, _from["default"])(state.disabledKeys)).call(_context3, item.key);
-  return (0, _react2.jsx)(_index.Box, {
+    state = _useTreeViewContext.state;
+  var _useOption = (0, _listbox.useOption)({
+      key: key
+    }, state, treeSectionRef),
+    optionProps = _useOption.optionProps,
+    isDisabled = _useOption.isDisabled,
+    isSelected = _useOption.isSelected;
+  var isExpanded = state.expandedKeys.has(key);
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     ref: treeSectionRef,
     as: "li",
     sx: {
@@ -45,11 +50,12 @@ var TreeViewSection = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
         pb: 'sm'
       }
     },
-    role: "treeitem",
     "aria-expanded": isExpanded,
-    "aria-selected": isSelected,
     "aria-disabled": isDisabled
-  }, (0, _react2.jsx)(_TreeViewRow["default"], {
+  }, optionProps, {
+    role: "treeitem",
+    "aria-selected": isSelected
+  }), (0, _react2.jsx)(_TreeViewRow["default"], {
     item: item,
     title: title,
     items: items,
@@ -63,7 +69,7 @@ var TreeViewSection = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     sx: {
       pl: 'md'
     }
-  }, (0, _map["default"])(_context4 = (0, _from["default"])(items)).call(_context4, function (_item) {
+  }, (0, _map["default"])(_context = (0, _from["default"])(items)).call(_context, function (_item) {
     var _item$value$items;
     return (0, _TreeView.SectionOrItemRender)(((_item$value$items = _item.value.items) === null || _item$value$items === void 0 ? void 0 : _item$value$items.length) > 0, (0, _react2.jsx)(TreeViewSection, {
       item: _item,

package/lib/components/TreeView/TreeView.js

@@ -9,13 +9,16 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["tree", "onExpandedChange"];
+var _excluded = ["tree", "disabledKeys", "onExpandedChange"];
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 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) { _defineProperty(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; }
-import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
 import { useTreeState } from 'react-stately';
+import { useCollator } from '@react-aria/i18n';
+import { useListBox } from '@react-aria/listbox';
+import { ListLayout } from '@react-stately/layout';
 import PropTypes from 'prop-types';
 import { TreeViewContext } from '../../context/TreeViewContext';
 import { Box, TreeViewItem, TreeViewSection } from '../../index';
@@ -30,35 +33,64 @@ export var SectionOrItemRender = function SectionOrItemRender(condition, Section
   }
   return ItemComponent;
 };
+export function useTreeViewLayout(state) {
+  var collator = useCollator({
+    usage: 'search',
+    sensitivity: 'base'
+  });
+  var layout = useMemo(function () {
+    return new ListLayout();
+  }, [collator]);
+  layout.collection = state.collection;
+  layout.disabledKeys = state.disabledKeys;
+  return layout;
+}
 var TreeView = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _labelRef$current, _context;
+  var _context;
   var tree = props.tree,
+    disabledKeys = props.disabledKeys,
     onExpandedChange = props.onExpandedChange,
     others = _objectWithoutProperties(props, _excluded);
-  var labelRef = useRef();
   var treeViewRef = useRef();
+  var selectedKeys = tree.selectedKeys;
+
   /* istanbul ignore next */
   useImperativeHandle(ref, function () {
     return treeViewRef.current;
   });
   var state = useTreeState(_objectSpread({
-    onExpandedChange: onExpandedChange
+    onExpandedChange: onExpandedChange,
+    disabledKeys: disabledKeys,
+    selectedKeys: selectedKeys,
+    selectionMode: 'single',
+    disallowEmptySelection: true
   }, others));
+  var ariaLabel = props['aria-label'];
+  var listBoxOptions = {
+    disabledKeys: disabledKeys,
+    'aria-label': ariaLabel
+  };
+  var layout = useTreeViewLayout(state);
+  var _useListBox = useListBox(_objectSpread(_objectSpread({}, listBoxOptions), {}, {
+      keyboardDelegate: layout
+    }), state, treeViewRef),
+    listBoxProps = _useListBox.listBoxProps;
   return ___EmotionJSX(TreeViewContext.Provider, {
     value: {
       state: state,
       tree: tree
     }
   }, ___EmotionJSX(Box, _extends({
-    as: "ul",
-    role: "tree",
+    as: "ul"
+  }, listBoxProps, {
     ref: treeViewRef,
-    "aria-labelledby": labelRef === null || labelRef === void 0 || (_labelRef$current = labelRef.current) === null || _labelRef$current === void 0 ? void 0 : _labelRef$current.id,
+    "aria-label": ariaLabel,
+    role: "treegrid",
     sx: {
       overflow: 'hidden'
     }
   }, others), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item) {
-    return SectionOrItemRender(item.type === 'section', ___EmotionJSX(TreeViewSection, {
+    return SectionOrItemRender(item.props.items.length > 0, ___EmotionJSX(TreeViewSection, {
       item: item,
       items: item.props.items,
       title: item.props.title,
@@ -70,13 +102,12 @@ var TreeView = /*#__PURE__*/forwardRef(function (props, ref) {
     }));
   })));
 });
-TreeView.defaultProps = {
-  'aria-label': 'tree'
-};
 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.shape({}).isRequired,
+  tree: PropTypes.shape({
+    selectedKeys: isIterableProp
+  }).isRequired,
   /** The currently disabled keys in the collection. */
   disabledKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
   /** Callback function that is called when items are expanded or collapsed. */

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

@@ -1,8 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Item, Section, TreeView, useTreeData } from '../../index';
-import { SectionOrItemRender } from './TreeView';
+import { Item, TreeView, useTreeData } from '../../index';
 import TreeViewReadMe from './TreeView.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -65,15 +64,15 @@ export var Default = function Default(args) {
   });
   return ___EmotionJSX(TreeView, _extends({}, args, {
     items: tree.items,
-    tree: tree
+    tree: tree,
+    "aria-label": "Example Tree",
+    disabledKeys: ['Single Item']
   }), function (section) {
-    return SectionOrItemRender(section.children.length > 0, ___EmotionJSX(Section, {
+    var _section$value;
+    return ___EmotionJSX(Item, {
       key: section.key,
       items: section.children,
-      title: section.value.title
-    }), ___EmotionJSX(Item, {
-      key: section.key,
-      title: section.title
-    }));
+      title: (_section$value = section.value) === null || _section$value === void 0 ? void 0 : _section$value.title
+    });
   });
 };

package/lib/components/TreeView/TreeView.test.js

@@ -1,41 +1,44 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { useTreeData } from 'react-stately';
-import { Item, Section } from '../../index';
+import { Item } from '../../index';
 import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import { SectionOrItemRender } from './TreeView';
 import TreeView from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-TreeView';
 var defaultProps = {
-  'data-testid': testId
+  'data-testid': testId,
+  label: 'example tree'
 };
 var data = [{
-  title: 'People',
+  title: 'Policies',
   items: [{
-    title: 'David',
-    customProp: 1
-  }, {
-    title: 'Sam'
-  }, {
-    title: 'Jane'
-  }]
-}, {
-  title: 'Animals',
-  items: [{
-    title: 'Bears',
+    title: 'Registration',
     items: [{
-      title: 'Black Bear'
+      title: 'Registration A'
+    }, {
+      title: 'Registration B'
+    }, {
+      title: 'Registration C'
     }, {
-      title: 'Brown Bear'
+      title: 'Registration D'
     }]
   }, {
-    title: 'Kangaroo'
-  }, {
-    title: 'Snake'
+    title: 'Authentication',
+    items: [{
+      title: 'Authentication A'
+    }, {
+      title: 'Authentication B'
+    }]
+  }]
+}, {
+  title: 'Other',
+  items: [{
+    title: 'Other A'
   }]
 }, {
-  title: 'Plant'
+  title: 'Single Item'
 }];
 var TreeViewComponent = function TreeViewComponent(props) {
   var tree = useTreeData({
@@ -49,36 +52,62 @@ var TreeViewComponent = function TreeViewComponent(props) {
   });
   return ___EmotionJSX(TreeView, _extends({}, defaultProps, props, {
     items: tree.items,
-    tree: tree
-  }), function (section) {
-    var _section$children;
-    return SectionOrItemRender(((_section$children = section.children) === null || _section$children === void 0 ? void 0 : _section$children.length) > 0, ___EmotionJSX(Section, {
-      key: section.key,
-      items: section.children,
-      title: section.key,
-      customProp: {
-        testp: 1
-      }
-    }), ___EmotionJSX(Item, {
-      key: section.key,
-      title: section.key
-    }));
+    tree: tree,
+    "aria-label": "Example Tree"
+  }), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.key,
+      items: item.children,
+      title: item.key
+    });
   });
 };
+var offsetWidth;
+var offsetHeight;
+var scrollHeight;
+var onSelectionChange = jest.fn();
+beforeAll(function () {
+  offsetWidth = jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function () {
+    return 1000;
+  });
+  offsetHeight = jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(function () {
+    return 1000;
+  });
+  scrollHeight = jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(function () {
+    return 48;
+  });
+  jest.spyOn(window, 'requestAnimationFrame').mockImplementation(function (cb) {
+    return cb();
+  });
+  jest.useFakeTimers();
+});
+afterEach(function () {
+  onSelectionChange.mockClear();
+});
+afterAll(function () {
+  offsetWidth.mockReset();
+  offsetHeight.mockReset();
+  scrollHeight.mockReset();
+});
+test('TreeView component does load', function () {
+  render(___EmotionJSX(TreeViewComponent, null));
+  var element = screen.queryByRole('treegrid');
+  expect(element).toBeInTheDocument();
+});
 test('Can select an Item using the mouse', function () {
   render(___EmotionJSX(TreeViewComponent, null));
-  var element = screen.getByTestId(testId);
+  var element = screen.queryByRole('treegrid');
   expect(element).toBeInTheDocument();
-  var peopleElement = screen.getByText('People');
+  var peopleElement = screen.queryByText('Single Item');
   expect(peopleElement).not.toHaveClass('is-selected');
   fireEvent.click(peopleElement);
   expect(peopleElement).toHaveClass('is-selected');
 });
 test('Renders both Sections and Items', function () {
   render(___EmotionJSX(TreeViewComponent, null));
-  var peopleElement = screen.getByText('People');
+  var peopleElement = screen.getByText('Single Item');
   expect(peopleElement).toBeInTheDocument();
-  var plantElement = screen.getByText('Plant');
+  var plantElement = screen.getByText('Other');
   expect(plantElement).toBeInTheDocument();
   var allListItems = screen.getAllByRole('treeitem');
   expect(allListItems).toHaveLength(3);
@@ -108,9 +137,9 @@ test('onExpandedChange change prop calls when used', function () {
 });
 test('disabledKeys prop disables items in the tree -- rendering them unclickable', function () {
   render(___EmotionJSX(TreeViewComponent, {
-    disabledKeys: ['Plant']
+    disabledKeys: ['Single Item']
   }));
-  var listItems = screen.getAllByRole('treeitem');
+  var listItems = screen.queryAllByRole('treeitem');
   var thisItem = listItems[2];
   expect(thisItem).not.toHaveClass('is-selected');
   expect(thisItem).toHaveAttribute('aria-disabled', 'true');
@@ -118,4 +147,18 @@ test('disabledKeys prop disables items in the tree -- rendering them unclickable
   fireEvent.mouseUp(thisItem);
   expect(thisItem).not.toHaveClass('is-selected');
   expect(thisItem).toHaveAttribute('aria-selected', 'false');
+});
+var firstJSX = ___EmotionJSX("p", null, "first");
+var secondJSX = ___EmotionJSX("p", null, "second");
+test('Section or Item Render renders first item if condition is true', function () {
+  render(___EmotionJSX("div", null, SectionOrItemRender(true, firstJSX, secondJSX)));
+  var thisItem = screen.getByText('first');
+  expect(thisItem).toBeInTheDocument();
+  expect(screen.queryByText('second')).not.toBeInTheDocument();
+});
+test('Section or Item Render renders second item if condition is false', function () {
+  render(___EmotionJSX("div", null, SectionOrItemRender(false, firstJSX, secondJSX)));
+  var thisItem = screen.getByText('second');
+  expect(thisItem).toBeInTheDocument();
+  expect(screen.queryByText('first')).not.toBeInTheDocument();
 });

package/lib/components/TreeView/TreeViewItem.js

@@ -1,47 +1,46 @@
-import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import FileIcon from '@pingux/mdi-react/FileIcon';
+import { useOption } from '@react-aria/listbox';
 import PropTypes from 'prop-types';
 import { useTreeViewContext } from '../../context/TreeViewContext';
 import { Box } from '../../index';
 import TreeViewRow from './TreeViewRow';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TreeViewItem = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _context, _context2, _context3;
   var item = props.item,
     title = props.title;
+  var key = item.key;
   var treeItemRef = useRef();
   /* istanbul ignore next */
   useImperativeHandle(ref, function () {
     return treeItemRef.current;
   });
   var _useTreeViewContext = useTreeViewContext(),
-    state = _useTreeViewContext.state,
-    tree = _useTreeViewContext.tree;
-  var isExpanded = _includesInstanceProperty(_context = _Array$from(state.expandedKeys)).call(_context, item.key);
-  var isSelected = _includesInstanceProperty(_context2 = _Array$from(tree.selectedKeys)).call(_context2, item.key);
-  var isDisabled = _includesInstanceProperty(_context3 = _Array$from(state.disabledKeys)).call(_context3, item.key);
-
-  // this component may seem unnecessary, but it will be where the
-  // useOption and dragAndDrop stuff will go
-  // this comment will be removed at that time.
-
-  return ___EmotionJSX(Box, {
+    state = _useTreeViewContext.state;
+  var _useOption = useOption({
+      key: key
+    }, state, treeItemRef),
+    optionProps = _useOption.optionProps,
+    isSelected = _useOption.isSelected,
+    isDisabled = _useOption.isDisabled;
+  var isExpanded = state.expandedKeys.has(key);
+  return ___EmotionJSX(Box, _extends({
     as: "li",
     isRow: true,
     ref: treeItemRef,
+    "aria-disabled": isDisabled
+  }, optionProps, {
     role: "treeitem",
-    "aria-selected": isSelected,
-    "aria-disabled": isDisabled,
     sx: {
       width: '100%',
       ml: '36px',
       ':not(:last-child)': {
         pb: 'sm'
       }
-    }
-  }, ___EmotionJSX(TreeViewRow, {
+    },
+    "aria-selected": isSelected
+  }), ___EmotionJSX(TreeViewRow, {
     item: item,
     title: title,
     mainIcon: FileIcon,

package/lib/components/TreeView/TreeViewSection.js

@@ -1,7 +1,8 @@
-import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import { useOption } from '@react-aria/listbox';
 import PropTypes from 'prop-types';
 import { useTreeViewContext } from '../../context/TreeViewContext';
 import { Box, TreeViewItem } from '../../index';
@@ -9,22 +10,26 @@ import { SectionOrItemRender } from './TreeView';
 import TreeViewRow from './TreeViewRow';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TreeViewSection = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _context, _context2, _context3, _context4;
+  var _context;
   var item = props.item,
     items = props.items,
     title = props.title;
+  var key = item.key;
   var treeSectionRef = useRef();
   /* istanbul ignore next */
   useImperativeHandle(ref, function () {
     return treeSectionRef.current;
   });
   var _useTreeViewContext = useTreeViewContext(),
-    state = _useTreeViewContext.state,
-    tree = _useTreeViewContext.tree;
-  var isExpanded = _includesInstanceProperty(_context = _Array$from(state.expandedKeys)).call(_context, item.key);
-  var isSelected = _includesInstanceProperty(_context2 = _Array$from(tree.selectedKeys)).call(_context2, item.key);
-  var isDisabled = _includesInstanceProperty(_context3 = _Array$from(state.disabledKeys)).call(_context3, item.key);
-  return ___EmotionJSX(Box, {
+    state = _useTreeViewContext.state;
+  var _useOption = useOption({
+      key: key
+    }, state, treeSectionRef),
+    optionProps = _useOption.optionProps,
+    isDisabled = _useOption.isDisabled,
+    isSelected = _useOption.isSelected;
+  var isExpanded = state.expandedKeys.has(key);
+  return ___EmotionJSX(Box, _extends({
     ref: treeSectionRef,
     as: "li",
     sx: {
@@ -32,11 +37,12 @@ var TreeViewSection = /*#__PURE__*/forwardRef(function (props, ref) {
         pb: 'sm'
       }
     },
-    role: "treeitem",
     "aria-expanded": isExpanded,
-    "aria-selected": isSelected,
     "aria-disabled": isDisabled
-  }, ___EmotionJSX(TreeViewRow, {
+  }, optionProps, {
+    role: "treeitem",
+    "aria-selected": isSelected
+  }), ___EmotionJSX(TreeViewRow, {
     item: item,
     title: title,
     items: items,
@@ -50,7 +56,7 @@ var TreeViewSection = /*#__PURE__*/forwardRef(function (props, ref) {
     sx: {
       pl: 'md'
     }
-  }, _mapInstanceProperty(_context4 = _Array$from(items)).call(_context4, function (_item) {
+  }, _mapInstanceProperty(_context = _Array$from(items)).call(_context, function (_item) {
     var _item$value$items;
     return SectionOrItemRender(((_item$value$items = _item.value.items) === null || _item$value$items === void 0 ? void 0 : _item$value$items.length) > 0, ___EmotionJSX(TreeViewSection, {
       item: _item,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.27.0-alpha.4",
+  "version": "2.27.1-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",