@pingux/astro 2.20.0-alpha.8 → 2.20.0-alpha.9

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

@@ -0,0 +1,88 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+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");
+_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 _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _TreeViewContext = require("../../context/TreeViewContext");
+var _index = require("../../index");
+var _TreeView = require("./TreeView");
+var _TreeViewRow = _interopRequireDefault(require("./TreeViewRow"));
+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 item = props.item,
+    items = props.items,
+    title = props.title;
+  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, {
+    ref: treeSectionRef,
+    as: "li",
+    sx: {
+      ':not(:last-child)': {
+        pb: 'sm'
+      }
+    },
+    role: "treeitem",
+    "aria-expanded": isExpanded,
+    "aria-selected": isSelected,
+    "aria-disabled": isDisabled
+  }, (0, _react2.jsx)(_TreeViewRow["default"], {
+    item: item,
+    title: title,
+    items: items,
+    isExpanded: isExpanded,
+    isSelected: isSelected,
+    isDisabled: isDisabled
+  }), isExpanded && (0, _react2.jsx)(_index.Box, {
+    as: "ul",
+    role: "group",
+    key: "".concat(item.key, " ul"),
+    sx: {
+      pl: 'md'
+    }
+  }, (0, _map["default"])(_context4 = (0, _from["default"])(items)).call(_context4, 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,
+      items: _item.children,
+      title: _item.value.title,
+      key: _item.value.title
+    }), (0, _react2.jsx)(_index.TreeViewItem, {
+      item: _item,
+      title: _item.value.title,
+      key: _item.value.title
+    }));
+  })));
+});
+TreeViewSection.propTypes = {
+  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({})),
+  item: _propTypes["default"].shape({
+    key: _propTypes["default"].string
+  }),
+  title: _propTypes["default"].string
+};
+var _default = TreeViewSection;
+exports["default"] = _default;

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

@@ -0,0 +1,28 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "TreeViewItem", {
+  enumerable: true,
+  get: function get() {
+    return _TreeViewItem["default"];
+  }
+});
+_Object$defineProperty(exports, "TreeViewSection", {
+  enumerable: true,
+  get: function get() {
+    return _TreeViewSection["default"];
+  }
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _TreeView["default"];
+  }
+});
+var _TreeView = _interopRequireDefault(require("./TreeView"));
+var _TreeViewItem = _interopRequireDefault(require("./TreeViewItem"));
+var _TreeViewSection = _interopRequireDefault(require("./TreeViewSection"));

package/lib/cjs/context/TreeViewContext/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeViewContext = exports.TreeViewContext = void 0;
+var _react = require("react");
+var TreeViewContext = /*#__PURE__*/(0, _react.createContext)(null);
+exports.TreeViewContext = TreeViewContext;
+var useTreeViewContext = function useTreeViewContext() {
+  return (0, _react.useContext)(TreeViewContext);
+};
+exports.useTreeViewContext = useTreeViewContext;

package/lib/cjs/index.d.ts

@@ -159,13 +159,15 @@ export * from './components/TextField';
 export { default as TimeZonePicker } from './components/TimeZonePicker';
 export { default as TooltipTrigger } from './components/TooltipTrigger';
 export * from './components/TooltipTrigger';
+export { default as TreeView } from './components/TreeView';
+export * from './components/TreeView';
 export { default as PageHeader } from './experimental/PageHeader';
 export * from './experimental/PageHeader';
 export { default as DataTable } from './components/DataTable';
 export * from './components/DataTable';
 export * from './types';
 export { OverlayProvider, useOverlayPosition, useOverlayTrigger } from 'react-aria';
-export { Item, Section, useOverlayTriggerState } from 'react-stately';
+export { Item, Section, useOverlayTriggerState, useTreeData } from 'react-stately';
 export { TableBody as DataTableBody, Cell as DataTableCell, Column as DataTableColumn, TableHeader as DataTableHeader, Row as DataTableRow, } from 'react-stately';
 export { default as EditButton } from './experimental/EditButton';
 export { default as PanelHeader } from './experimental/PanelHeader';

package/lib/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63, _context64, _context65, _context66, _context67, _context68, _context69, _context70, _context71, _context72, _context73, _context74;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63, _context64, _context65, _context66, _context67, _context68, _context69, _context70, _context71, _context72, _context73, _context74, _context75;
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
@@ -103,6 +103,7 @@ var _exportNames = {
   TextField: true,
   TimeZonePicker: true,
   TooltipTrigger: true,
+  TreeView: true,
   PageHeader: true,
   DataTable: true,
   OverlayProvider: true,
@@ -111,6 +112,7 @@ var _exportNames = {
   Item: true,
   Section: true,
   useOverlayTriggerState: true,
+  useTreeData: true,
   DataTableBody: true,
   DataTableCell: true,
   DataTableColumn: true,
@@ -758,6 +760,12 @@ _Object$defineProperty(exports, "TooltipTrigger", {
     return _TooltipTrigger["default"];
   }
 });
+_Object$defineProperty(exports, "TreeView", {
+  enumerable: true,
+  get: function get() {
+    return _TreeView["default"];
+  }
+});
 _Object$defineProperty(exports, "useOverlayPosition", {
   enumerable: true,
   get: function get() {
@@ -776,6 +784,12 @@ _Object$defineProperty(exports, "useOverlayTriggerState", {
     return _reactStately.useOverlayTriggerState;
   }
 });
+_Object$defineProperty(exports, "useTreeData", {
+  enumerable: true,
+  get: function get() {
+    return _reactStately.useTreeData;
+  }
+});
 var _AccordionGridGroup = _interopRequireWildcard(require("./components/AccordionGridGroup"));
 _forEachInstanceProperty(_context = _Object$keys(_AccordionGridGroup)).call(_context, function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1646,8 +1660,20 @@ _forEachInstanceProperty(_context71 = _Object$keys(_TooltipTrigger)).call(_conte
     }
   });
 });
+var _TreeView = _interopRequireWildcard(require("./components/TreeView"));
+_forEachInstanceProperty(_context72 = _Object$keys(_TreeView)).call(_context72, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _TreeView[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _TreeView[key];
+    }
+  });
+});
 var _PageHeader = _interopRequireWildcard(require("./experimental/PageHeader"));
-_forEachInstanceProperty(_context72 = _Object$keys(_PageHeader)).call(_context72, function (key) {
+_forEachInstanceProperty(_context73 = _Object$keys(_PageHeader)).call(_context73, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _PageHeader[key]) return;
@@ -1659,7 +1685,7 @@ _forEachInstanceProperty(_context72 = _Object$keys(_PageHeader)).call(_context72
   });
 });
 var _DataTable = _interopRequireWildcard(require("./components/DataTable"));
-_forEachInstanceProperty(_context73 = _Object$keys(_DataTable)).call(_context73, function (key) {
+_forEachInstanceProperty(_context74 = _Object$keys(_DataTable)).call(_context74, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _DataTable[key]) return;
@@ -1671,7 +1697,7 @@ _forEachInstanceProperty(_context73 = _Object$keys(_DataTable)).call(_context73,
   });
 });
 var _types = require("./types");
-_forEachInstanceProperty(_context74 = _Object$keys(_types)).call(_context74, function (key) {
+_forEachInstanceProperty(_context75 = _Object$keys(_types)).call(_context75, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _types[key]) return;

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

@@ -52,6 +52,7 @@ var _Table = _interopRequireDefault(require("../../components/Table/Table.styles
 var tab = _interopRequireWildcard(require("../../components/Tabs/Tabs.style"));
 var _TimeZone = _interopRequireDefault(require("../../components/TimeZonePicker/TimeZone.styles"));
 var _Tooltip = _interopRequireDefault(require("../../components/TooltipTrigger/Tooltip.styles"));
+var _TreeView = _interopRequireDefault(require("../../components/TreeView/TreeView.styles"));
 var _PanelHeader = _interopRequireDefault(require("../../experimental/PanelHeader/PanelHeader.styles"));
 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; }
@@ -93,6 +94,7 @@ var _default = _objectSpread({
   stepper: _Stepper["default"],
   table: _Table["default"],
   timeZone: _TimeZone["default"],
-  tooltip: _Tooltip["default"]
+  tooltip: _Tooltip["default"],
+  treeView: _TreeView["default"]
 }, tab);
 exports["default"] = _default;

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;