@pingux/astro 2.20.0-alpha.0 → 2.20.0-alpha.10

package/lib/cjs/utils/designUtils/figmaLinks.js

@@ -24,6 +24,10 @@ var FIGMA_LINKS = {
   button: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=0-1&t=8Wwd3tIBh3GEjCJB-0'
   },
+  buttonBar: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=3660%3A20551&mode=dev',
+    rightAligned: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=3660%3A20657&mode=dev'
+  },
   calendar: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=6373%3A25490&t=BoHXzVpQq9Lf7MaU-1'
   },
@@ -46,6 +50,9 @@ var FIGMA_LINKS = {
   copyText: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=218-1442&t=8Wwd3tIBh3GEjCJB-0'
   },
+  countryPicker: {
+    "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=4568-7532&mode=design&t=eSfQYHRFNPf37J4C-0'
+  },
   helpHint: {
     "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A4534&t=We3h7LaaFJQnxdSy-1',
     withLink: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=28958%3A40081&mode=design&t=WmSYPx1hR8kxFiXf-1'
@@ -59,6 +66,9 @@ var FIGMA_LINKS = {
   iconButton: {
     "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A2520&t=We3h7LaaFJQnxdSy-1'
   },
+  inlineEditing: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=5244-14864&mode=design&t=1pPbrQvGkdMYBNqk-0'
+  },
   link: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=8708-29543&t=8Wwd3tIBh3GEjCJB-0'
   },
@@ -86,6 +96,9 @@ var FIGMA_LINKS = {
   navBar: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=548-3473&t=8Wwd3tIBh3GEjCJB-0'
   },
+  OnewayToBidirectionalArrow: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=43504-1214&mode=design&t=R4kdj0liRHxsqbV5-0'
+  },
   popoverMenu: {
     "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A3073&t=We3h7LaaFJQnxdSy-1'
   },

package/lib/{experimental → components}/ButtonBar/ButtonBar.js

@@ -6,22 +6,19 @@ import PropTypes from 'prop-types';
 import { Box } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ButtonBar = function ButtonBar(props) {
-  var _props$align = props.align,
-    align = _props$align === void 0 ? 'left' : _props$align,
+  var align = props.align,
     children = props.children,
     others = _objectWithoutProperties(props, _excluded);
   return ___EmotionJSX(Box, _extends({
     isRow: true,
-    gap: "md",
-    sx: {
-      bg: 'white',
-      px: 'lg',
-      py: 'md',
-      justifyContent: align === 'right' ? 'right' : 'left'
-    }
+    variant: align === 'right' ? 'buttonBar.justifyRightContainer' : 'buttonBar.container'
   }, others), children);
 };
 ButtonBar.propTypes = {
+  /** Justifies the component's children. */
   align: PropTypes.oneOf(['left', 'right'])
 };
+ButtonBar.defaultProps = {
+  align: 'left'
+};
 export default ButtonBar;

package/lib/{cjs/experimental → components}/ButtonBar/ButtonBar.mdx

@@ -1,9 +1,8 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Experimental/ButtonBar/ButtonBar" />
+<Meta title="Components/ButtonBar/ButtonBar" />
 
 # ButtonBar
 
 This is a composed component that renders children in a simplified, organized and consistent manner.
 
-If the **align** prop is set to right it will justify the children to the right. Default is left justification.

package/lib/{experimental → components}/ButtonBar/ButtonBar.stories.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Button, ButtonBar } from '../..';
+import { Button, ButtonBar } from '../../index';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import ButtonBarReadme from './ButtonBar.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Experimental/ButtonBar',
+  title: 'Components/ButtonBar',
   component: ButtonBar,
   parameters: {
     docs: {
@@ -39,6 +40,12 @@ export var Default = function Default(args) {
     }
   }, "Cancel"));
 };
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.buttonBar["default"]
+  }
+};
 export var RightAligned = function RightAligned() {
   return ___EmotionJSX(ButtonBar, {
     align: "right"
@@ -55,4 +62,10 @@ export var RightAligned = function RightAligned() {
       return alert('Cancel button pressed');
     }
   }, "Cancel"));
+};
+RightAligned.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.buttonBar.rightAligned
+  }
 };

package/lib/components/ButtonBar/ButtonBar.styles.js

@@ -0,0 +1,25 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/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) { _defineProperty(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 container = {
+  bg: 'white',
+  gap: 'md',
+  justifyContent: 'left',
+  px: 'lg',
+  py: 'md'
+};
+var justifyRightContainer = _objectSpread(_objectSpread({}, container), {}, {
+  justifyContent: 'right'
+});
+export default {
+  container: container,
+  justifyRightContainer: justifyRightContainer
+};

package/lib/{experimental → components}/ButtonBar/ButtonBar.test.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import { Button, ButtonBar } from '../..';
+import { Button, ButtonBar } from '../../index';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import { jsx as ___EmotionJSX } from "@emotion/react";

package/lib/components/ColorField/ColorField.js

@@ -98,7 +98,10 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: triggerRef,
     variant: "forms.colorField.container"
   }, mergeProps(buttonProps, ariaProps, triggerProps))), ___EmotionJSX(Box, fieldControlWrapperProps, ___EmotionJSX(Input, _extends({}, visuallyHiddenProps, fieldControlInputProps, {
-    ref: colorRef
+    ref: colorRef,
+    sx: {
+      display: 'none'
+    }
   }))), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText), ___EmotionJSX(PopoverContainer, _extends({

package/lib/components/ListView/ListView.js

@@ -10,7 +10,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["disabledKeys", "isHoverable", "loadingState", "onLoadMore", "onSelectionChange", "selectedKeys", "selectionMode", "selectionStyle"];
+var _excluded = ["disabledKeys", "isHoverable", "loadingState", "onLoadMore", "onSelectionChange", "selectedKeys", "selectionMode", "selectionStyle", "items"];
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 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) { _defineProperty(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; }
@@ -63,6 +63,7 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
     selectedKeys = props.selectedKeys,
     selectionMode = props.selectionMode,
     selectionStyle = props.selectionStyle,
+    items = props.items,
     others = _objectWithoutProperties(props, _excluded);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -106,6 +107,9 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
   layout.isLoading = isLoading;
   var focusedKey = selectionManager.focusedKey;
   delete gridProps.onMouseDown;
+  if (!items) {
+    delete others['aria-label'];
+  }
   var onFocus = function onFocus(e) {
     gridProps.onFocus(e);
     if (others.onFocus) {
@@ -121,7 +125,9 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
     value: {
       state: state
     }
-  }, ___EmotionJSX(Virtualizer, _extends({}, gridProps, {
+  }, ___EmotionJSX(Virtualizer, _extends({}, items ? gridProps : {
+    role: 'presentation'
+  }, {
     onLoadMore: onLoadMore,
     ref: listViewRef,
     focusedKey: focusedKey,

package/lib/components/TreeView/TreeView.js

@@ -0,0 +1,89 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+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"];
+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 { useTreeState } from 'react-stately';
+import PropTypes from 'prop-types';
+import { TreeViewContext } from '../../context/TreeViewContext';
+import { Box, TreeViewItem, TreeViewSection } from '../../index';
+import { isIterableProp } from '../../utils/devUtils/props/isIterable';
+
+// split out and exported for ease of use across components
+// and to facilitate easier testing (eliminates redundant conditional renders)
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var SectionOrItemRender = function SectionOrItemRender(condition, SectionComponent, ItemComponent) {
+  if (condition) {
+    return SectionComponent;
+  }
+  return ItemComponent;
+};
+var TreeView = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _labelRef$current, _context;
+  var tree = props.tree,
+    onExpandedChange = props.onExpandedChange,
+    others = _objectWithoutProperties(props, _excluded);
+  var labelRef = useRef();
+  var treeViewRef = useRef();
+  /* istanbul ignore next */
+  useImperativeHandle(ref, function () {
+    return treeViewRef.current;
+  });
+  var state = useTreeState(_objectSpread({
+    onExpandedChange: onExpandedChange
+  }, others));
+  return ___EmotionJSX(TreeViewContext.Provider, {
+    value: {
+      state: state,
+      tree: tree
+    }
+  }, ___EmotionJSX(Box, _extends({
+    as: "ul",
+    role: "tree",
+    ref: treeViewRef,
+    "aria-labelledby": labelRef === null || labelRef === void 0 || (_labelRef$current = labelRef.current) === null || _labelRef$current === void 0 ? void 0 : _labelRef$current.id,
+    sx: {
+      overflow: 'hidden'
+    }
+  }, others), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item) {
+    return SectionOrItemRender(item.type === 'section', ___EmotionJSX(TreeViewSection, {
+      item: item,
+      items: item.props.items,
+      title: item.props.title,
+      key: item.props.title
+    }), ___EmotionJSX(TreeViewItem, {
+      item: item,
+      title: item.value.value.title,
+      key: item.value.value.title
+    }));
+  })));
+});
+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,
+  /** 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. */
+  onExpandedChange: PropTypes.func,
+  /** The list of TreeView items. */
+  items: isIterableProp,
+  /** String that describes the treeview when using a screen reader. */
+  'aria-label': PropTypes.string
+};
+export default TreeView;

package/lib/components/TreeView/TreeView.mdx

@@ -0,0 +1,16 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Experimental/TreeView/TreeView" />
+
+# TreeView
+
+The TreeView component represents a nested structure of data.
+
+### Required components
+
+This component requires the the use of Item and Section, both exported from [react-stately/collections](https://react-spectrum.adobe.com/react-stately/collections.html).
+This component will also require the use of the [useTreeData](https://react-spectrum.adobe.com/react-stately/useTreeData.html) hook, which is exported through react-stately. 
+
+### Accessibility
+
+This component should adhere to the [WAI-ARIA TreeView](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/) accessibility guidelines.

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

@@ -0,0 +1,79 @@
+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 TreeViewReadMe from './TreeView.mdx';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Experimental/TreeView',
+  component: TreeView,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TreeViewReadMe, null), ___EmotionJSX(DocsLayout, null));
+      },
+      source: {
+        type: 'code'
+      }
+    }
+  }
+};
+var data = [{
+  title: 'Policies',
+  items: [{
+    title: 'Registration',
+    items: [{
+      title: 'Registration A'
+    }, {
+      title: 'Registration B',
+      items: [{
+        title: 'Registration B1'
+      }, {
+        title: 'Registration B2'
+      }]
+    }, {
+      title: 'Registration C'
+    }, {
+      title: 'Registration D'
+    }]
+  }, {
+    title: 'Authentication',
+    items: [{
+      title: 'Authentication A'
+    }, {
+      title: 'Authentication B'
+    }]
+  }]
+}, {
+  title: 'Other',
+  items: [{
+    title: 'Other A'
+  }]
+}, {
+  title: 'Single Item'
+}];
+export var Default = function Default(args) {
+  var tree = useTreeData({
+    initialItems: data,
+    getKey: function getKey(item) {
+      return item.title;
+    },
+    getChildren: function getChildren(item) {
+      return item.items;
+    }
+  });
+  return ___EmotionJSX(TreeView, _extends({}, args, {
+    items: tree.items,
+    tree: tree
+  }), function (section) {
+    return SectionOrItemRender(section.children.length > 0, ___EmotionJSX(Section, {
+      key: section.key,
+      items: section.children,
+      title: section.value.title
+    }), ___EmotionJSX(Item, {
+      key: section.key,
+      title: section.title
+    }));
+  });
+};

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

@@ -0,0 +1,24 @@
+var treeRow = {
+  flexGrow: 1,
+  cursor: 'pointer',
+  height: '31px',
+  outline: 'none',
+  '&.is-selected, &.is-hovered, &.is-focused': {
+    backgroundColor: 'active',
+    '& span': {
+      color: 'white'
+    },
+    '& svg': {
+      fill: 'white'
+    },
+    '& button': {
+      fill: 'white'
+    }
+  },
+  '&.is-expanded': {
+    marginBottom: 'xs'
+  }
+};
+export default {
+  treeRow: treeRow
+};

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

@@ -0,0 +1,121 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { useTreeData } from 'react-stately';
+import { Item, Section } 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
+};
+var data = [{
+  title: 'People',
+  items: [{
+    title: 'David',
+    customProp: 1
+  }, {
+    title: 'Sam'
+  }, {
+    title: 'Jane'
+  }]
+}, {
+  title: 'Animals',
+  items: [{
+    title: 'Bears',
+    items: [{
+      title: 'Black Bear'
+    }, {
+      title: 'Brown Bear'
+    }]
+  }, {
+    title: 'Kangaroo'
+  }, {
+    title: 'Snake'
+  }]
+}, {
+  title: 'Plant'
+}];
+var TreeViewComponent = function TreeViewComponent(props) {
+  var tree = useTreeData({
+    initialItems: data,
+    getKey: function getKey(item) {
+      return item.title;
+    },
+    getChildren: function getChildren(item) {
+      return item.items;
+    }
+  });
+  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
+    }));
+  });
+};
+test('Can select an Item using the mouse', function () {
+  render(___EmotionJSX(TreeViewComponent, null));
+  var element = screen.getByTestId(testId);
+  expect(element).toBeInTheDocument();
+  var peopleElement = screen.getByText('People');
+  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');
+  expect(peopleElement).toBeInTheDocument();
+  var plantElement = screen.getByText('Plant');
+  expect(plantElement).toBeInTheDocument();
+  var allListItems = screen.getAllByRole('treeitem');
+  expect(allListItems).toHaveLength(3);
+});
+test('Can expand an Item using the mouse', function () {
+  render(___EmotionJSX(TreeViewComponent, null));
+
+  // The children of collapsed sections will not
+  // be rendered by default.
+  expect(screen.queryByText(data[0].items[0].title)).not.toBeInTheDocument();
+
+  // Clicking the dropdown icon, renders the children
+  // of the collapsed section.
+  var buttons = screen.queryAllByRole('button');
+  fireEvent.click(buttons[0]);
+  expect(screen.queryByText(data[0].items[0].title)).toBeInTheDocument();
+});
+test('onExpandedChange change prop calls when used', function () {
+  var onPress = jest.fn();
+  render(___EmotionJSX(TreeViewComponent, {
+    onExpandedChange: onPress
+  }));
+  expect(onPress).not.toHaveBeenCalled();
+  var buttons = screen.queryAllByRole('button');
+  fireEvent.click(buttons[0]);
+  expect(onPress).toHaveBeenCalled();
+});
+test('disabledKeys prop disables items in the tree -- rendering them unclickable', function () {
+  render(___EmotionJSX(TreeViewComponent, {
+    disabledKeys: ['Plant']
+  }));
+  var listItems = screen.getAllByRole('treeitem');
+  var thisItem = listItems[2];
+  expect(thisItem).not.toHaveClass('is-selected');
+  expect(thisItem).toHaveAttribute('aria-disabled', 'true');
+  fireEvent.mouseDown(thisItem);
+  fireEvent.mouseUp(thisItem);
+  expect(thisItem).not.toHaveClass('is-selected');
+  expect(thisItem).toHaveAttribute('aria-selected', 'false');
+});

package/lib/components/TreeView/TreeViewItem.js

@@ -0,0 +1,60 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import FileIcon from '@pingux/mdi-react/FileIcon';
+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 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, {
+    as: "li",
+    isRow: true,
+    ref: treeItemRef,
+    role: "treeitem",
+    "aria-selected": isSelected,
+    "aria-disabled": isDisabled,
+    sx: {
+      width: '100%',
+      ml: '36px',
+      ':not(:last-child)': {
+        pb: 'sm'
+      }
+    }
+  }, ___EmotionJSX(TreeViewRow, {
+    item: item,
+    title: title,
+    mainIcon: FileIcon,
+    isSelected: isSelected,
+    isExpanded: isExpanded,
+    isDisabled: isDisabled
+  }));
+});
+TreeViewItem.propTypes = {
+  item: PropTypes.shape({
+    key: PropTypes.string
+  }),
+  name: PropTypes.string,
+  title: PropTypes.string
+};
+export default TreeViewItem;