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

package/lib/cjs/components/ListView/ListView.js

@@ -34,7 +34,7 @@ var _Loader = _interopRequireDefault(require("../Loader"));
 var _ListViewContext = require("./ListViewContext");
 var _ListViewItem = _interopRequireDefault(require("./ListViewItem"));
 var _react2 = require("@emotion/react");
-var _excluded = ["disabledKeys", "isHoverable", "loadingState", "onLoadMore", "onSelectionChange", "selectedKeys", "selectionMode", "selectionStyle"];
+var _excluded = ["disabledKeys", "isHoverable", "loadingState", "onLoadMore", "onSelectionChange", "selectedKeys", "selectionMode", "selectionStyle", "items"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -76,6 +76,7 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     selectedKeys = props.selectedKeys,
     selectionMode = props.selectionMode,
     selectionStyle = props.selectionStyle,
+    items = props.items,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -119,6 +120,9 @@ var ListView = /*#__PURE__*/(0, _react.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) {
@@ -134,7 +138,9 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     value: {
       state: state
     }
-  }, (0, _react2.jsx)(_virtualizer.Virtualizer, (0, _extends2["default"])({}, gridProps, {
+  }, (0, _react2.jsx)(_virtualizer.Virtualizer, (0, _extends2["default"])({}, items ? gridProps : {
+    role: 'presentation'
+  }, {
     onLoadMore: onLoadMore,
     ref: listViewRef,
     focusedKey: focusedKey,

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

@@ -0,0 +1,100 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.SectionOrItemRender = void 0;
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactStately = require("react-stately");
+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
+// 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; }
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var SectionOrItemRender = function SectionOrItemRender(condition, SectionComponent, ItemComponent) {
+  if (condition) {
+    return SectionComponent;
+  }
+  return ItemComponent;
+};
+exports.SectionOrItemRender = SectionOrItemRender;
+var TreeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _labelRef$current, _context;
+  var tree = props.tree,
+    onExpandedChange = props.onExpandedChange,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var labelRef = (0, _react.useRef)();
+  var treeViewRef = (0, _react.useRef)();
+  /* istanbul ignore next */
+  (0, _react.useImperativeHandle)(ref, function () {
+    return treeViewRef.current;
+  });
+  var state = (0, _reactStately.useTreeState)(_objectSpread({
+    onExpandedChange: onExpandedChange
+  }, others));
+  return (0, _react2.jsx)(_TreeViewContext.TreeViewContext.Provider, {
+    value: {
+      state: state,
+      tree: tree
+    }
+  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    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), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item) {
+    return SectionOrItemRender(item.type === 'section', (0, _react2.jsx)(_index.TreeViewSection, {
+      item: item,
+      items: item.props.items,
+      title: item.props.title,
+      key: item.props.title
+    }), (0, _react2.jsx)(_index.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["default"].shape({}).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. */
+  onExpandedChange: _propTypes["default"].func,
+  /** The list of TreeView items. */
+  items: _isIterable.isIterableProp,
+  /** String that describes the treeview when using a screen reader. */
+  'aria-label': _propTypes["default"].string
+};
+var _default = TreeView;
+exports["default"] = _default;

package/lib/cjs/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/cjs/components/TreeView/TreeView.stories.js

@@ -0,0 +1,89 @@
+"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
+});
+exports["default"] = exports.Default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+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 _react2 = require("@emotion/react");
+var _default = {
+  title: 'Experimental/TreeView',
+  component: _index.TreeView,
+  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));
+      },
+      source: {
+        type: 'code'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+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'
+}];
+var Default = function Default(args) {
+  var tree = (0, _index.useTreeData)({
+    initialItems: data,
+    getKey: function getKey(item) {
+      return item.title;
+    },
+    getChildren: function getChildren(item) {
+      return item.items;
+    }
+  });
+  return (0, _react2.jsx)(_index.TreeView, (0, _extends2["default"])({}, args, {
+    items: tree.items,
+    tree: tree
+  }), function (section) {
+    return (0, _TreeView.SectionOrItemRender)(section.children.length > 0, (0, _react2.jsx)(_index.Section, {
+      key: section.key,
+      items: section.children,
+      title: section.value.title
+    }), (0, _react2.jsx)(_index.Item, {
+      key: section.key,
+      title: section.title
+    }));
+  });
+};
+exports.Default = Default;

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

@@ -0,0 +1,32 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+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'
+  }
+};
+var _default = {
+  treeRow: treeRow
+};
+exports["default"] = _default;

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

@@ -0,0 +1,124 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _reactStately = require("react-stately");
+var _index = require("../../index");
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+var _TreeView = require("./TreeView");
+var _ = _interopRequireDefault(require("."));
+var _react2 = require("@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 = (0, _reactStately.useTreeData)({
+    initialItems: data,
+    getKey: function getKey(item) {
+      return item.title;
+    },
+    getChildren: function getChildren(item) {
+      return item.items;
+    }
+  });
+  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
+    }));
+  });
+};
+test('Can select an Item using the mouse', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(TreeViewComponent, null));
+  var element = _testWrapper.screen.getByTestId(testId);
+  expect(element).toBeInTheDocument();
+  var peopleElement = _testWrapper.screen.getByText('People');
+  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');
+  expect(peopleElement).toBeInTheDocument();
+  var plantElement = _testWrapper.screen.getByText('Plant');
+  expect(plantElement).toBeInTheDocument();
+  var allListItems = _testWrapper.screen.getAllByRole('treeitem');
+  expect(allListItems).toHaveLength(3);
+});
+test('Can expand an Item using the mouse', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(TreeViewComponent, null));
+
+  // The children of collapsed sections will not
+  // be rendered by default.
+  expect(_testWrapper.screen.queryByText(data[0].items[0].title)).not.toBeInTheDocument();
+
+  // Clicking the dropdown icon, renders the children
+  // of the collapsed section.
+  var buttons = _testWrapper.screen.queryAllByRole('button');
+  _testWrapper.fireEvent.click(buttons[0]);
+  expect(_testWrapper.screen.queryByText(data[0].items[0].title)).toBeInTheDocument();
+});
+test('onExpandedChange change prop calls when used', function () {
+  var onPress = jest.fn();
+  (0, _testWrapper.render)((0, _react2.jsx)(TreeViewComponent, {
+    onExpandedChange: onPress
+  }));
+  expect(onPress).not.toHaveBeenCalled();
+  var buttons = _testWrapper.screen.queryAllByRole('button');
+  _testWrapper.fireEvent.click(buttons[0]);
+  expect(onPress).toHaveBeenCalled();
+});
+test('disabledKeys prop disables items in the tree -- rendering them unclickable', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(TreeViewComponent, {
+    disabledKeys: ['Plant']
+  }));
+  var listItems = _testWrapper.screen.getAllByRole('treeitem');
+  var thisItem = listItems[2];
+  expect(thisItem).not.toHaveClass('is-selected');
+  expect(thisItem).toHaveAttribute('aria-disabled', 'true');
+  _testWrapper.fireEvent.mouseDown(thisItem);
+  _testWrapper.fireEvent.mouseUp(thisItem);
+  expect(thisItem).not.toHaveClass('is-selected');
+  expect(thisItem).toHaveAttribute('aria-selected', 'false');
+});

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

@@ -0,0 +1,74 @@
+"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 _react = _interopRequireWildcard(require("react"));
+var _FileIcon = _interopRequireDefault(require("@pingux/mdi-react/FileIcon"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _TreeViewContext = require("../../context/TreeViewContext");
+var _index = require("../../index");
+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 TreeViewItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _context, _context2, _context3;
+  var item = props.item,
+    title = props.title;
+  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, {
+    as: "li",
+    isRow: true,
+    ref: treeItemRef,
+    role: "treeitem",
+    "aria-selected": isSelected,
+    "aria-disabled": isDisabled,
+    sx: {
+      width: '100%',
+      ml: '36px',
+      ':not(:last-child)': {
+        pb: 'sm'
+      }
+    }
+  }, (0, _react2.jsx)(_TreeViewRow["default"], {
+    item: item,
+    title: title,
+    mainIcon: _FileIcon["default"],
+    isSelected: isSelected,
+    isExpanded: isExpanded,
+    isDisabled: isDisabled
+  }));
+});
+TreeViewItem.propTypes = {
+  item: _propTypes["default"].shape({
+    key: _propTypes["default"].string
+  }),
+  name: _propTypes["default"].string,
+  title: _propTypes["default"].string
+};
+var _default = TreeViewItem;
+exports["default"] = _default;

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

@@ -0,0 +1,147 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _FolderIcon = _interopRequireDefault(require("@pingux/mdi-react/FolderIcon"));
+var _LockIcon = _interopRequireDefault(require("@pingux/mdi-react/LockIcon"));
+var _MenuDownIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuDownIcon"));
+var _MenuRightIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuRightIcon"));
+var _interactions = require("@react-aria/interactions");
+var _utils = require("@react-aria/utils");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _TreeViewContext = require("../../context/TreeViewContext");
+var _hooks = require("../../hooks");
+var _index = require("../../index");
+var _react2 = require("@emotion/react");
+var _excluded = ["title", "mainIcon", "lastIcon", "item", "items", "isExpanded", "isSelected", "isDisabled", "iconButtonProps"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var TreeViewRow = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var title = props.title,
+    _props$mainIcon = props.mainIcon,
+    mainIcon = _props$mainIcon === void 0 ? _FolderIcon["default"] : _props$mainIcon,
+    _props$lastIcon = props.lastIcon,
+    lastIcon = _props$lastIcon === void 0 ? _LockIcon["default"] : _props$lastIcon,
+    item = props.item,
+    items = props.items,
+    isExpanded = props.isExpanded,
+    isSelected = props.isSelected,
+    isDisabled = props.isDisabled,
+    iconButtonProps = props.iconButtonProps,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var treeRowRef = (0, _react.useRef)();
+  /* istanbul ignore next */
+  (0, _react.useImperativeHandle)(ref, function () {
+    return treeRowRef.current;
+  });
+  var key = item.key;
+  var _useTreeViewContext = (0, _TreeViewContext.useTreeViewContext)(),
+    state = _useTreeViewContext.state,
+    tree = _useTreeViewContext.tree;
+  var _useHover = (0, _interactions.useHover)({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
+  var pressIcon = function pressIcon(e) {
+    state.toggleKey(item.key);
+    if (iconButtonProps !== null && iconButtonProps !== void 0 && iconButtonProps.onPress) {
+      iconButtonProps.onPress(e);
+    }
+  };
+  var pressRow = function pressRow() {
+    tree.setSelectedKeys([item.key]);
+  };
+  var _usePress = (0, _interactions.usePress)(_objectSpread(_objectSpread({}, others), {}, {
+      ref: treeRowRef,
+      onPress: pressRow
+    })),
+    isPressed = _usePress.isPressed,
+    pressProps = _usePress.pressProps;
+  var _useStatusClasses = (0, _hooks.useStatusClasses)('', {
+      isHovered: isHovered,
+      isSelected: isSelected,
+      isExpanded: isExpanded,
+      isPressed: isPressed,
+      isDisabled: isDisabled
+    }),
+    classNames = _useStatusClasses.classNames;
+  var mergedProps = (0, _utils.mergeProps)(hoverProps, pressProps, others);
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    ref: treeRowRef,
+    isRow: true,
+    alignItems: "center",
+    gap: "xs",
+    sx: {
+      flexGrow: 1
+    },
+    className: classNames,
+    key: "".concat(key, " box")
+  }, mergedProps), (items === null || items === void 0 ? void 0 : items.length) > 0 && (0, _react2.jsx)(_index.IconButtonToggle, {
+    onToggle: pressIcon,
+    isToggled: isExpanded,
+    defaultIcon: _MenuRightIcon["default"],
+    toggledIcon: _MenuDownIcon["default"],
+    iconProps: {
+      size: 25,
+      title: "".concat(title, " expand or collapse button")
+    },
+    buttonProps: {
+      'aria-label': "".concat(title, " expand or collapse button")
+    }
+  }), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    className: classNames,
+    alignItems: "center",
+    gap: "xs",
+    variant: "treeView.treeRow"
+  }, (0, _react2.jsx)(_index.Icon, {
+    color: "focus",
+    icon: mainIcon,
+    size: 25,
+    title: "folder icon",
+    alt: "folder icon"
+  }), (0, _react2.jsx)(_index.Text, {
+    className: classNames
+  }, title), (0, _react2.jsx)(_index.Icon, {
+    icon: lastIcon,
+    size: 15,
+    color: "accent.80",
+    title: "lock icon",
+    alt: "lock icon"
+  })));
+});
+TreeViewRow.propTypes = {
+  isSelected: _propTypes["default"].bool,
+  isDisabled: _propTypes["default"].bool,
+  isExpanded: _propTypes["default"].bool,
+  title: _propTypes["default"].string,
+  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({})),
+  iconButtonProps: _propTypes["default"].shape({
+    onPress: _propTypes["default"].func
+  }),
+  item: _propTypes["default"].shape({
+    key: _propTypes["default"].string
+  }),
+  mainIcon: _propTypes["default"].elementType,
+  lastIcon: _propTypes["default"].elementType
+};
+var _default = TreeViewRow;
+exports["default"] = _default;