@pingux/astro 2.30.0 → 2.30.1-alpha.0

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

@@ -76,6 +76,7 @@ var TreeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     selectionMode: 'single',
     disallowEmptySelection: true
   }, others));
+  var level = 0;
   var ariaLabel = props['aria-label'];
   var listBoxOptions = {
     disabledKeys: disabledKeys,
@@ -100,16 +101,22 @@ var TreeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     sx: {
       overflow: 'hidden'
     }
-  }, others), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item) {
+  }, others), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item, index) {
     return SectionOrItemRender(item.props.items.length > 0, (0, _react2.jsx)(_index.TreeViewSection, {
       item: item,
       items: item.props.items,
       title: item.props.title,
-      key: item.props.title
+      key: item.props.title,
+      level: level + 1,
+      setSize: state.collection.size,
+      position: index
     }), (0, _react2.jsx)(_index.TreeViewItem, {
       item: item,
       title: item.value.value.title,
-      key: item.value.value.title
+      key: item.value.value.title,
+      level: level + 1,
+      position: index,
+      setSize: state.collection.size
     }));
   })));
 });

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

@@ -151,6 +151,21 @@ test('disabledKeys prop disables items in the tree -- rendering them unclickable
   expect(thisItem).not.toHaveClass('is-selected');
   expect(thisItem).toHaveAttribute('aria-selected', 'false');
 });
+test('displays correct aria attributes', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(TreeViewComponent, null));
+  var listItems = _testWrapper.screen.getAllByRole('treeitem');
+  var lastTreeItem = listItems[2];
+  expect(lastTreeItem).toHaveAttribute('aria-level', '1');
+  expect(lastTreeItem).toHaveAttribute('aria-posinset', '3');
+  expect(lastTreeItem).toHaveAttribute('aria-setsize', '3');
+  var buttons = _testWrapper.screen.queryAllByRole('button');
+  _testWrapper.fireEvent.click(buttons[1]);
+  var expandedItems = _testWrapper.screen.getAllByRole('treeitem');
+  var nestedItem = expandedItems[2];
+  expect(nestedItem).toHaveAttribute('aria-level', '2');
+  expect(nestedItem).toHaveAttribute('aria-posinset', '1');
+  expect(nestedItem).toHaveAttribute('aria-setsize', '1');
+});
 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 () {

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

@@ -22,7 +22,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 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 item = props.item,
-    title = props.title;
+    title = props.title,
+    level = props.level,
+    position = props.position,
+    setSize = props.setSize;
   var key = item.key;
   var treeItemRef = (0, _react.useRef)();
   /* istanbul ignore next */
@@ -42,7 +45,10 @@ var TreeViewItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     as: "li",
     isRow: true,
     ref: treeItemRef,
-    "aria-disabled": isDisabled
+    "aria-disabled": isDisabled,
+    "aria-level": level,
+    "aria-posinset": position + 1,
+    "aria-setsize": setSize
   }, optionProps, {
     role: "treeitem",
     sx: {
@@ -67,7 +73,10 @@ TreeViewItem.propTypes = {
     key: _propTypes["default"].string
   }),
   name: _propTypes["default"].string,
-  title: _propTypes["default"].string
+  title: _propTypes["default"].string,
+  level: _propTypes["default"].number,
+  position: _propTypes["default"].number,
+  setSize: _propTypes["default"].number
 };
 var _default = TreeViewItem;
 exports["default"] = _default;

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

@@ -16,7 +16,7 @@ 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");
+var _index2 = require("../../index");
 var _TreeView = require("./TreeView");
 var _TreeViewRow = _interopRequireDefault(require("./TreeViewRow"));
 var _react2 = require("@emotion/react");
@@ -26,7 +26,10 @@ var TreeViewSection = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   var _context;
   var item = props.item,
     items = props.items,
-    title = props.title;
+    title = props.title,
+    level = props.level,
+    position = props.position,
+    setSize = props.setSize;
   var key = item.key;
   var treeSectionRef = (0, _react.useRef)();
   /* istanbul ignore next */
@@ -42,7 +45,7 @@ var TreeViewSection = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     isDisabled = _useOption.isDisabled,
     isSelected = _useOption.isSelected;
   var isExpanded = state.expandedKeys.has(key);
-  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_index2.Box, (0, _extends2["default"])({
     ref: treeSectionRef,
     as: "li",
     sx: {
@@ -51,7 +54,10 @@ var TreeViewSection = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       }
     },
     "aria-expanded": isExpanded,
-    "aria-disabled": isDisabled
+    "aria-disabled": isDisabled,
+    "aria-level": level,
+    "aria-setsize": setSize,
+    "aria-posinset": position + 1
   }, optionProps, {
     role: "treeitem",
     "aria-selected": isSelected
@@ -62,24 +68,30 @@ var TreeViewSection = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     isExpanded: isExpanded,
     isSelected: isSelected,
     isDisabled: isDisabled
-  }), isExpanded && (0, _react2.jsx)(_index.Box, {
+  }), isExpanded && (0, _react2.jsx)(_index2.Box, {
     as: "ul",
     role: "group",
     key: "".concat(item.key, " ul"),
     sx: {
       pl: 'md'
     }
-  }, (0, _map["default"])(_context = (0, _from["default"])(items)).call(_context, function (_item) {
+  }, (0, _map["default"])(_context = (0, _from["default"])(items)).call(_context, function (_item, _index) {
     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, {
+      key: _item.value.title,
+      level: level + 1,
+      position: _index,
+      setSize: items.length
+    }), (0, _react2.jsx)(_index2.TreeViewItem, {
       item: _item,
       title: _item.value.title,
-      key: _item.value.title
+      key: _item.value.title,
+      level: level + 1,
+      position: _index,
+      setSize: items.length
     }));
   })));
 });
@@ -88,7 +100,10 @@ TreeViewSection.propTypes = {
   item: _propTypes["default"].shape({
     key: _propTypes["default"].string
   }),
-  title: _propTypes["default"].string
+  title: _propTypes["default"].string,
+  level: _propTypes["default"].number,
+  position: _propTypes["default"].number,
+  setSize: _propTypes["default"].number
 };
 var _default = TreeViewSection;
 exports["default"] = _default;

package/lib/components/TreeView/TreeView.js

@@ -65,6 +65,7 @@ var TreeView = /*#__PURE__*/forwardRef(function (props, ref) {
     selectionMode: 'single',
     disallowEmptySelection: true
   }, others));
+  var level = 0;
   var ariaLabel = props['aria-label'];
   var listBoxOptions = {
     disabledKeys: disabledKeys,
@@ -89,16 +90,22 @@ var TreeView = /*#__PURE__*/forwardRef(function (props, ref) {
     sx: {
       overflow: 'hidden'
     }
-  }, others), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item) {
+  }, others), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item, index) {
     return SectionOrItemRender(item.props.items.length > 0, ___EmotionJSX(TreeViewSection, {
       item: item,
       items: item.props.items,
       title: item.props.title,
-      key: item.props.title
+      key: item.props.title,
+      level: level + 1,
+      setSize: state.collection.size,
+      position: index
     }), ___EmotionJSX(TreeViewItem, {
       item: item,
       title: item.value.value.title,
-      key: item.value.value.title
+      key: item.value.value.title,
+      level: level + 1,
+      position: index,
+      setSize: state.collection.size
     }));
   })));
 });

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

@@ -148,6 +148,21 @@ test('disabledKeys prop disables items in the tree -- rendering them unclickable
   expect(thisItem).not.toHaveClass('is-selected');
   expect(thisItem).toHaveAttribute('aria-selected', 'false');
 });
+test('displays correct aria attributes', function () {
+  render(___EmotionJSX(TreeViewComponent, null));
+  var listItems = screen.getAllByRole('treeitem');
+  var lastTreeItem = listItems[2];
+  expect(lastTreeItem).toHaveAttribute('aria-level', '1');
+  expect(lastTreeItem).toHaveAttribute('aria-posinset', '3');
+  expect(lastTreeItem).toHaveAttribute('aria-setsize', '3');
+  var buttons = screen.queryAllByRole('button');
+  fireEvent.click(buttons[1]);
+  var expandedItems = screen.getAllByRole('treeitem');
+  var nestedItem = expandedItems[2];
+  expect(nestedItem).toHaveAttribute('aria-level', '2');
+  expect(nestedItem).toHaveAttribute('aria-posinset', '1');
+  expect(nestedItem).toHaveAttribute('aria-setsize', '1');
+});
 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 () {

package/lib/components/TreeView/TreeViewItem.js

@@ -9,7 +9,10 @@ import TreeViewRow from './TreeViewRow';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TreeViewItem = /*#__PURE__*/forwardRef(function (props, ref) {
   var item = props.item,
-    title = props.title;
+    title = props.title,
+    level = props.level,
+    position = props.position,
+    setSize = props.setSize;
   var key = item.key;
   var treeItemRef = useRef();
   /* istanbul ignore next */
@@ -29,7 +32,10 @@ var TreeViewItem = /*#__PURE__*/forwardRef(function (props, ref) {
     as: "li",
     isRow: true,
     ref: treeItemRef,
-    "aria-disabled": isDisabled
+    "aria-disabled": isDisabled,
+    "aria-level": level,
+    "aria-posinset": position + 1,
+    "aria-setsize": setSize
   }, optionProps, {
     role: "treeitem",
     sx: {
@@ -54,6 +60,9 @@ TreeViewItem.propTypes = {
     key: PropTypes.string
   }),
   name: PropTypes.string,
-  title: PropTypes.string
+  title: PropTypes.string,
+  level: PropTypes.number,
+  position: PropTypes.number,
+  setSize: PropTypes.number
 };
 export default TreeViewItem;

package/lib/components/TreeView/TreeViewSection.js

@@ -13,7 +13,10 @@ var TreeViewSection = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;
   var item = props.item,
     items = props.items,
-    title = props.title;
+    title = props.title,
+    level = props.level,
+    position = props.position,
+    setSize = props.setSize;
   var key = item.key;
   var treeSectionRef = useRef();
   /* istanbul ignore next */
@@ -38,7 +41,10 @@ var TreeViewSection = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     },
     "aria-expanded": isExpanded,
-    "aria-disabled": isDisabled
+    "aria-disabled": isDisabled,
+    "aria-level": level,
+    "aria-setsize": setSize,
+    "aria-posinset": position + 1
   }, optionProps, {
     role: "treeitem",
     "aria-selected": isSelected
@@ -56,17 +62,23 @@ var TreeViewSection = /*#__PURE__*/forwardRef(function (props, ref) {
     sx: {
       pl: 'md'
     }
-  }, _mapInstanceProperty(_context = _Array$from(items)).call(_context, function (_item) {
+  }, _mapInstanceProperty(_context = _Array$from(items)).call(_context, function (_item, _index) {
     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,
       items: _item.children,
       title: _item.value.title,
-      key: _item.value.title
+      key: _item.value.title,
+      level: level + 1,
+      position: _index,
+      setSize: items.length
     }), ___EmotionJSX(TreeViewItem, {
       item: _item,
       title: _item.value.title,
-      key: _item.value.title
+      key: _item.value.title,
+      level: level + 1,
+      position: _index,
+      setSize: items.length
     }));
   })));
 });
@@ -75,6 +87,9 @@ TreeViewSection.propTypes = {
   item: PropTypes.shape({
     key: PropTypes.string
   }),
-  title: PropTypes.string
+  title: PropTypes.string,
+  level: PropTypes.number,
+  position: PropTypes.number,
+  setSize: PropTypes.number
 };
 export default TreeViewSection;

package/package.json

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