@pingux/astro 2.30.0 → 2.31.0-alpha.0

package/lib/cjs/recipes/PanelContent.stories.js

@@ -0,0 +1,496 @@
+"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"] = exports.LabelValuePairs = exports.EditPanel = exports.DisplayPanel = exports.ColorBlockButton = exports.AddAttributeButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactStately = require("react-stately");
+var _PencilIcon = _interopRequireDefault(require("@pingux/mdi-react/PencilIcon"));
+var _PlusIcon = _interopRequireDefault(require("@pingux/mdi-react/PlusIcon"));
+var _hooks = require("../hooks");
+var _index = require("../index");
+var _figmaLinks = require("../utils/designUtils/figmaLinks.js");
+var _UserImage = _interopRequireDefault(require("../utils/devUtils/assets/UserImage.png"));
+var _statuses = _interopRequireDefault(require("../utils/devUtils/constants/statuses"));
+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 _default = {
+  title: 'Experimental/PanelContent',
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+var colorBlockButtons = [{
+  text: 'Groups',
+  subtext: '21',
+  isConfigured: true
+}, {
+  text: 'Population',
+  subtext: 'Denver',
+  isConfigured: true
+}, {
+  text: 'MFA',
+  subtext: 'Enabled',
+  isConfigured: true
+}, {
+  text: 'Roles',
+  subtext: '0'
+}];
+var data = {
+  contactInfo: {
+    label: 'Contact Info',
+    key: 'contactInfoKey',
+    fields: [{
+      label: 'Email',
+      value: 'ednepomuceno@pingidentity.com',
+      isVerified: true
+    }, {
+      label: 'Primary',
+      value: '+1 767-777-3333'
+    }, {
+      label: 'Address',
+      value: '1234 W California St, Denver CO 80101'
+    }]
+  },
+  personalInfo: {
+    label: 'Personal Info',
+    key: 'personalInfoKey',
+    image: _UserImage["default"],
+    fields: [{
+      label: 'Given Name',
+      value: 'Ed'
+    }, {
+      label: 'Famile Name',
+      value: 'Nepomuceno'
+    }]
+  },
+  companyInfo: {
+    label: 'Company Info',
+    key: 'companyInfoKey',
+    fields: [{
+      label: 'Tile',
+      value: 'Interaction Designer'
+    }]
+  },
+  customAttributes: {
+    label: 'Custom Attributes',
+    key: 'customAttributesKey',
+    fields: [{
+      label: 'T-Shirt Size',
+      value: 'Large'
+    }, {
+      label: 'Example Multi-Value Attribute',
+      value: 'value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,value,'
+    }]
+  },
+  jsonAttributes: {
+    label: 'JSON Attributes',
+    key: 'jsonAttributesKey',
+    badges: ['Address', 'Contact', 'Another Json'],
+    fields: []
+  }
+};
+var OverlayWrapper = function OverlayWrapper(_ref) {
+  var children = _ref.children;
+  var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)({
+      isDefaultOpen: true
+    }),
+    state = _useOverlayPanelState.state;
+  var triggerRef = (0, _react.useRef)();
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
+    ref: triggerRef,
+    onPress: state.open
+  }, "Open Panel"), (0, _react2.jsx)(_index.OverlayPanel, {
+    isOpen: state.isOpen,
+    isTransitioning: state.isTransitioning,
+    size: "large",
+    p: "0"
+  }, (0, _react2.jsx)(_index.PanelHeader, {
+    data: {
+      image: {
+        src: _UserImage["default"],
+        alt: 'user image'
+      },
+      text: data.personalInfo.fields[0].value,
+      subtext: data.personalInfo.fields[1].value
+    }
+  }, (0, _react2.jsx)(_index.PanelHeaderSwitchField, null), (0, _react2.jsx)(_index.PanelHeaderMenu, null), (0, _react2.jsx)(_index.PanelHeaderCloseButton, {
+    onPress: state.close
+  })), children));
+};
+var DisplayPanel = function DisplayPanel() {
+  var _context, _context2;
+  var renderProfileTab = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "md",
+    mb: "20px"
+  }, (0, _map["default"])(colorBlockButtons).call(colorBlockButtons, function (tileData) {
+    return (0, _react2.jsx)(ColorBlockButton, {
+      buttonData: tileData,
+      key: "".concat(tileData.text, "-key")
+    });
+  })), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    justifyContent: "space-between"
+  }, (0, _react2.jsx)(_index.AccordionGroup, {
+    defaultExpandedKeys: (0, _map["default"])(_context = (0, _keys["default"])(data)).call(_context, function (item) {
+      return data[item].key;
+    }),
+    labelHeadingTag: "h2"
+  }, (0, _map["default"])(_context2 = (0, _keys["default"])(data)).call(_context2, function (item) {
+    var _context3;
+    return (0, _react2.jsx)(_reactStately.Item, {
+      "data-id": data[item].label,
+      key: data[item].key,
+      label: data[item].label,
+      textValue: data[item].label
+    }, data[item].image ? (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      gap: "md"
+    }, (0, _react2.jsx)(_index.Image, {
+      src: _UserImage["default"],
+      alt: "user"
+    }), (0, _react2.jsx)(LabelValuePairs, {
+      fields: data[item].fields
+    })) : (0, _react2.jsx)(LabelValuePairs, {
+      fields: data[item].fields
+    }), data[item].badges && (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      gap: "sm"
+    }, (0, _map["default"])(_context3 = data[item].badges).call(_context3, function (badge) {
+      return (0, _react2.jsx)(_index.Badge, {
+        label: badge,
+        variant: "defaultBadge",
+        key: "".concat(badge, "-key")
+      });
+    })));
+  })), (0, _react2.jsx)(_index.EditButton, {
+    size: "lg"
+  })));
+  var tabs = [{
+    name: 'Profile',
+    children: renderProfileTab
+  }, {
+    name: 'Groups',
+    children: 'Groups'
+  }, {
+    name: 'Roles',
+    children: 'Roles'
+  }, {
+    name: 'Services',
+    list: [{
+      key: 'service1',
+      name: 'Service 1',
+      children: 'Service 1',
+      role: 'listitem'
+    }, {
+      key: 'service2',
+      name: 'Service 2',
+      children: 'Service 2',
+      role: 'listitem'
+    }]
+  }, {
+    name: 'API',
+    children: 'API'
+  }];
+  return (0, _react2.jsx)(OverlayWrapper, null, (0, _react2.jsx)(_index.Box, {
+    p: "lg",
+    pt: "xs"
+  }, (0, _react2.jsx)(_index.Tabs, {
+    items: tabs,
+    mode: "list",
+    tabListProps: {
+      justifyContent: 'center',
+      mb: 'lg'
+    }
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Tab, (0, _extends2["default"])({
+      key: item.name,
+      title: item.name
+    }, item), item.children);
+  })));
+};
+exports.DisplayPanel = DisplayPanel;
+DisplayPanel.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.panelContent.displayPanel
+  },
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
+var ColorBlockButton = function ColorBlockButton(_ref2) {
+  var _ref2$buttonData = _ref2.buttonData,
+    buttonData = _ref2$buttonData === void 0 ? colorBlockButtons[0] : _ref2$buttonData;
+  return (0, _react2.jsx)(_index.Button, {
+    variant: "colorBlock",
+    className: buttonData.isConfigured ? 'is-configured' : ''
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
+    variant: "buttonTitle"
+  }, buttonData.text), (0, _react2.jsx)(_index.Text, {
+    variant: "buttonSubtitle"
+  }, buttonData.subtext)), (0, _react2.jsx)(_index.Icon, {
+    icon: _PencilIcon["default"],
+    title: {
+      name: 'Create Icon'
+    }
+  }));
+};
+exports.ColorBlockButton = ColorBlockButton;
+var LabelValuePairs = function LabelValuePairs(_ref3) {
+  var _ref3$fields = _ref3.fields,
+    fields = _ref3$fields === void 0 ? data.contactInfo.fields : _ref3$fields;
+  return (0, _react2.jsx)(_index.Box, {
+    gap: "md",
+    maxWidth: "675px"
+  }, (0, _map["default"])(fields).call(fields, function (_ref4) {
+    var label = _ref4.label,
+      value = _ref4.value,
+      isVerified = _ref4.isVerified;
+    return (0, _react2.jsx)(_index.Box, {
+      gap: "xs",
+      key: "".concat(label, "-key")
+    }, (0, _react2.jsx)(_index.Text, {
+      variant: "h4"
+    }, label), (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      gap: "md"
+    }, (0, _react2.jsx)(_index.Text, null, value), isVerified && (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      gap: "xs"
+    }, (0, _react2.jsx)(_index.NoticeIcon, {
+      color: "success.dark",
+      status: _statuses["default"].SUCCESS,
+      "aria-label": "".concat(_statuses["default"].SUCCESS, "-icon"),
+      size: "xs"
+    }), (0, _react2.jsx)(_index.Text, {
+      variant: "listSubtitle",
+      color: "success.dark"
+    }, "Verified"))));
+  }));
+};
+exports.LabelValuePairs = LabelValuePairs;
+var editData = {
+  personalInfo: {
+    label: 'Personal Info',
+    key: 'personalInfoKey',
+    image: _UserImage["default"],
+    fields: [{
+      label: 'Prefix',
+      value: ''
+    }, {
+      label: 'Given Name',
+      value: 'Ed'
+    }, {
+      label: 'Middle Name',
+      value: ''
+    }, {
+      label: 'Family Name',
+      value: 'Nepomuceno'
+    }, {
+      label: 'Suffix',
+      value: ''
+    }, {
+      label: 'Formatted',
+      value: ''
+    }, {
+      label: 'Nickname',
+      value: ''
+    }]
+  },
+  contactInfo: {
+    label: 'Contact Info',
+    key: 'contactInfoKey',
+    fields: [{
+      label: 'Email',
+      value: 'ednepomuceno@pingidentity.com',
+      slot: (0, _react2.jsx)(_index.CheckboxField, {
+        mt: "xs",
+        label: "Require Email to be Verified"
+      })
+    }, {
+      label: 'Phone Number',
+      value: '123-456-7890'
+    }, {
+      label: 'Street Address',
+      value: '123 Example St'
+    }, {
+      label: 'Country Code',
+      value: ''
+    }, {
+      label: 'Loality',
+      value: ''
+    }, {
+      label: 'Region',
+      value: ''
+    }, {
+      label: 'Zip Code',
+      value: '12345'
+    }]
+  },
+  companyInfo: {
+    label: 'Company Info',
+    key: 'companyInfoKey',
+    fields: [{
+      label: 'Account ID',
+      value: ''
+    }, {
+      label: 'Type',
+      value: ''
+    }, {
+      label: 'Title',
+      value: ''
+    }]
+  }
+};
+var EditPanel = function EditPanel() {
+  var _context4, _context5, _context6;
+  return (0, _react2.jsx)(OverlayWrapper, null, (0, _react2.jsx)(_index.Box, {
+    p: "lg",
+    pb: "0"
+  }, (0, _react2.jsx)(_index.Box, {
+    gap: "md",
+    mb: "20px",
+    width: "500px"
+  }, (0, _react2.jsx)(_index.TextField, {
+    defaultValue: "ednepomuceno",
+    isRequired: true,
+    label: "Username"
+  }), (0, _react2.jsx)(_index.SelectField, {
+    label: "Population",
+    isRequired: true,
+    defaultSelectedKey: "population"
+  }, (0, _react2.jsx)(_reactStately.Item, {
+    key: "population"
+  }, "Denver"))), (0, _react2.jsx)(_index.AccordionGroup, {
+    defaultExpandedKeys: (0, _concat["default"])(_context4 = []).call(_context4, (0, _map["default"])(_context5 = (0, _keys["default"])(editData)).call(_context5, function (item) {
+      return editData[item].key;
+    }), ['preferencesKey', 'customAttributesKey', 'jsonAttributesKey']),
+    labelHeadingTag: "h2"
+  }, (0, _map["default"])(_context6 = (0, _keys["default"])(editData)).call(_context6, function (item) {
+    var _context7;
+    return (0, _react2.jsx)(_reactStately.Item, {
+      "data-id": editData[item].label,
+      key: editData[item].key,
+      label: editData[item].label,
+      textValue: editData[item].label
+    }, (0, _react2.jsx)(_index.Box, {
+      gap: "md",
+      width: "500px"
+    }, editData[item].image && (0, _react2.jsx)(_index.ImageUploadField, {
+      label: "Photo",
+      previewHeight: 40,
+      previewWidth: 40,
+      previewImage: _UserImage["default"]
+    }), (0, _map["default"])(_context7 = editData[item].fields).call(_context7, function (_ref5) {
+      var label = _ref5.label,
+        value = _ref5.value,
+        slot = _ref5.slot;
+      return (0, _react2.jsx)(_index.Box, {
+        key: "".concat(label, "-key")
+      }, (0, _react2.jsx)(_index.TextField, {
+        label: label,
+        defaultValue: value
+      }), slot);
+    })));
+  }), (0, _react2.jsx)(_reactStately.Item, {
+    "data-id": "preferences",
+    key: "preferencesKey",
+    label: "Preferences",
+    textValue: "Preferences"
+  }, (0, _react2.jsx)(_index.Box, {
+    gap: "md",
+    width: "500px"
+  }, (0, _react2.jsx)(_index.SelectField, {
+    label: "Preferred Language",
+    defaultSelectedKey: "language"
+  }, (0, _react2.jsx)(_reactStately.Item, {
+    key: "language"
+  }, "Select a Language")), (0, _react2.jsx)(_index.SelectField, {
+    label: "Locale",
+    defaultSelectedKey: "language"
+  }, (0, _react2.jsx)(_reactStately.Item, {
+    key: "language"
+  }, "Select a locale")), (0, _react2.jsx)(_index.SelectField, {
+    label: "Timezone",
+    defaultSelectedKey: "language"
+  }, (0, _react2.jsx)(_reactStately.Item, {
+    key: "language"
+  }, "Select a timezone")))), (0, _react2.jsx)(_reactStately.Item, {
+    "data-id": "customAttributes",
+    key: "customAttributesKey",
+    label: "Custom Attributes",
+    textValue: "Custom Attributes"
+  }, (0, _react2.jsx)(AddAttributeButton, null), (0, _react2.jsx)(_index.Text, {
+    fontWeight: "-1",
+    fontSize: "md",
+    textAlign: "center"
+  }, "Click + Add to select a custom attribute")), (0, _react2.jsx)(_reactStately.Item, {
+    "data-id": "jsonAttributes",
+    key: "jsonAttributesKey",
+    label: "JSON Attributes",
+    textValue: "JSON Attributes"
+  }, (0, _react2.jsx)(AddAttributeButton, null), (0, _react2.jsx)(_index.Text, {
+    fontWeight: "-1",
+    fontSize: "md",
+    textAlign: "center"
+  }, "Click + Add to select a JSON attribute")))), (0, _react2.jsx)(_index.ButtonBar, null, (0, _react2.jsx)(_index.Button, {
+    variant: "primary"
+  }, "Save"), (0, _react2.jsx)(_index.Button, {
+    variant: "link"
+  }, "Cancel")));
+};
+exports.EditPanel = EditPanel;
+EditPanel.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.panelContent.editPanel
+  },
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
+var AddAttributeButton = function AddAttributeButton() {
+  return (0, _react2.jsx)(_index.Box, {
+    sx: {
+      position: 'relative',
+      left: '700px',
+      top: '-35px',
+      width: 0,
+      height: 0
+    }
+  }, (0, _react2.jsx)(_index.Button, {
+    variant: "inlineWithIcon"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _PlusIcon["default"],
+    size: "xs"
+  }), "Add"));
+};
+exports.AddAttributeButton = AddAttributeButton;

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

@@ -108,6 +108,10 @@ var FIGMA_LINKS = {
   OnewayToBidirectionalArrow: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=43504-1214&mode=design&t=R4kdj0liRHxsqbV5-0'
   },
+  panelContent: {
+    displayPanel: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=43431%3A4249&mode=dev',
+    editPanel: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=5013%3A15377&mode=dev'
+  },
   panelHeader: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44688%3A39612&mode=dev',
     withSubtext: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44688%3A39651&mode=dev',

package/lib/components/Badge/Badge.styles.js

@@ -34,6 +34,14 @@ export var baseBadge = {
     }
   }
 };
+var defaultBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  backgroundColor: 'white !important',
+  outline: '1px solid',
+  outlineColor: 'neutral.80',
+  '& span': {
+    color: 'text.primary'
+  }
+});
 var multivaluesBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   alignSelf: 'center',
   cursor: 'default',
@@ -178,23 +186,24 @@ var activeStatusBadge = _objectSpread(_objectSpread({}, statusBadge), {}, {
   backgroundColor: '#F7F8FD !important'
 });
 export default {
+  activeStatusBadge: activeStatusBadge,
+  badgeDeleteButton: badgeDeleteButton,
   baseBadge: baseBadge,
+  convenienceDefault: convenienceDefault,
+  countBadge: countBadge,
+  countNeutral: countNeutral,
+  criticalStatusBadge: criticalStatusBadge,
+  defaultBadge: defaultBadge,
+  deleteButton: deleteButton,
   environmentBadge: environmentBadge,
+  errorCalloutBadge: errorCalloutBadge,
+  healthyStatusBadge: healthyStatusBadge,
+  infoCalloutBadge: infoCalloutBadge,
   itemBadgeWithSlot: itemBadgeWithSlot,
   multivaluesBadge: multivaluesBadge,
   readOnlyBadge: readOnlyBadge,
   selectedItemBadge: selectedItemBadge,
-  deleteButton: deleteButton,
-  countBadge: countBadge,
-  countNeutral: countNeutral,
-  badgeDeleteButton: badgeDeleteButton,
-  convenienceDefault: convenienceDefault,
-  errorCalloutBadge: errorCalloutBadge,
-  warningCalloutBadge: warningCalloutBadge,
   successCalloutBadge: successCalloutBadge,
-  infoCalloutBadge: infoCalloutBadge,
-  criticalStatusBadge: criticalStatusBadge,
-  warningStatusBadge: warningStatusBadge,
-  healthyStatusBadge: healthyStatusBadge,
-  activeStatusBadge: activeStatusBadge
+  warningCalloutBadge: warningCalloutBadge,
+  warningStatusBadge: warningStatusBadge
 };

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;