@pingux/astro 2.38.0-alpha.0 → 2.38.0

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

@@ -171,9 +171,7 @@ var TreeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       setLastFocusedItem: setLastFocusedItem,
       lastFocusedItem: lastFocusedItem
     }
-  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    as: "ul"
-  }, listBoxProps, {
+  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, listBoxProps, {
     ref: treeViewRef,
     "aria-label": ariaLabel,
     role: "treegrid",

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

@@ -1,18 +1,27 @@
 "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");
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactStately = require("react-stately");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _index = require("../../index");
 var _testWrapper = require("../../utils/testUtils/testWrapper");
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
 var _TreeView = require("./TreeView");
 var _TreeViewKeyboardDelegate = require("./TreeViewKeyboardDelegate.test");
 var _TreeViewSection = require("./TreeViewSection");
 var _ = _interopRequireDefault(require("."));
 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; }
+// Needs to be added to each components test file
+
 var testId = 'test-TreeView';
 var defaultProps = {
   'data-testid': testId,
@@ -50,7 +59,7 @@ var data = [{
 var singleData = [{
   title: 'Single Item'
 }];
-var TreeViewComponent = function TreeViewComponent(props) {
+var TreeViewComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var tree = (0, _reactStately.useTreeData)({
     initialItems: props.data,
     getKey: function getKey(item) {
@@ -60,7 +69,9 @@ var TreeViewComponent = function TreeViewComponent(props) {
       return item.items;
     }
   });
-  return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props, {
+  return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({
+    ref: ref
+  }, defaultProps, props, {
     items: tree.items,
     tree: tree,
     "aria-label": "Example Tree"
@@ -71,7 +82,7 @@ var TreeViewComponent = function TreeViewComponent(props) {
       title: item.key
     });
   });
-};
+});
 TreeViewComponent.propTypes = {
   data: _propTypes["default"].arrayOf(_propTypes["default"].shape({}))
 };
@@ -102,6 +113,11 @@ afterAll(function () {
   offsetHeight.mockReset();
   scrollHeight.mockReset();
 });
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: function renderComponent(props) {
+    return (0, _react2.jsx)(TreeViewComponent, props);
+  }
+});
 test('TreeView component does load', function () {
   (0, _testWrapper.render)((0, _react2.jsx)(TreeViewComponent, null));
   var element = _testWrapper.screen.queryByRole('treegrid');
@@ -126,7 +142,7 @@ test('Renders both Sections and Items', function () {
   expect(peopleElement).toBeInTheDocument();
   var plantElement = _testWrapper.screen.getByText('Other');
   expect(plantElement).toBeInTheDocument();
-  var allListItems = _testWrapper.screen.getAllByRole('treeitem');
+  var allListItems = _testWrapper.screen.getAllByRole('row');
   expect(allListItems).toHaveLength(3);
 });
 test('Can expand an Item using the mouse', function () {
@@ -160,7 +176,7 @@ test('disabledKeys prop disables items in the tree -- rendering them unclickable
     data: data,
     disabledKeys: ['Single Item']
   }));
-  var listItems = _testWrapper.screen.queryAllByRole('treeitem');
+  var listItems = _testWrapper.screen.queryAllByRole('row');
   var thisItem = listItems[2];
   expect(thisItem).not.toHaveClass('is-selected');
   expect(thisItem).toHaveAttribute('aria-disabled', 'true');
@@ -172,14 +188,14 @@ test('displays correct aria attributes', function () {
   (0, _testWrapper.render)((0, _react2.jsx)(TreeViewComponent, {
     data: data
   }));
-  var listItems = _testWrapper.screen.getAllByRole('treeitem');
+  var listItems = _testWrapper.screen.getAllByRole('row');
   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');
   _userEvent["default"].click(buttons[1]);
-  var expandedItems = _testWrapper.screen.getAllByRole('treeitem');
+  var expandedItems = _testWrapper.screen.getAllByRole('row');
   var nestedItem = expandedItems[2];
   expect(nestedItem).toHaveAttribute('aria-level', '2');
   expect(nestedItem).toHaveAttribute('aria-posinset', '1');
@@ -191,7 +207,7 @@ test('onKeyDown calls passed in prop call back function', function () {
     data: data,
     onKeyDown: callback
   }));
-  var listItems = _testWrapper.screen.queryAllByRole('treeitem');
+  var listItems = _testWrapper.screen.queryAllByRole('row');
   var thisItem = listItems[0];
   _userEvent["default"].type(thisItem, '{arrowleft}');
   expect(callback).toHaveBeenCalled();
@@ -202,7 +218,7 @@ test('onKeyDown calls passed in prop call back function', function () {
     data: data,
     onKeyDown: callback
   }));
-  var listItems = _testWrapper.screen.queryAllByRole('treeitem');
+  var listItems = _testWrapper.screen.queryAllByRole('row');
   var thisItem = listItems[2];
   _userEvent["default"].type(thisItem, '{arrowleft}');
   expect(callback).toHaveBeenCalled();
@@ -212,7 +228,7 @@ test('onKeyDown does not call passed in prop call back function', function () {
   (0, _testWrapper.render)((0, _react2.jsx)(TreeViewComponent, {
     data: data
   }));
-  var listItems = _testWrapper.screen.queryAllByRole('treeitem');
+  var listItems = _testWrapper.screen.queryAllByRole('row');
   var thisItem = listItems[2];
   _userEvent["default"].type(thisItem, '{arrowleft}');
   expect(callback).not.toHaveBeenCalled();

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

@@ -140,12 +140,11 @@ var TreeViewItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }),
     classNames = _useStatusClasses.classNames;
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    as: "li",
     isRow: true,
     ref: treeItemRef,
     "aria-disabled": isDisabled
   }, mergedProps, {
-    role: "treeitem",
+    role: "row",
     variant: "treeView.wrapper",
     className: classNames,
     "aria-selected": isSelected,

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

@@ -85,9 +85,6 @@ var TreeViewRow = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }),
     classNames = _useStatusClasses.classNames;
   var mergedProps = (0, _utils.mergeProps)(hoverProps, pressProps, others);
-
-  // console.log(`ROW: ${key} has parent focus: ${isParentFocused}`)
-
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     ref: treeRowRef,
     isRow: true,
@@ -100,7 +97,8 @@ var TreeViewRow = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       }
     },
     className: classNames,
-    key: "".concat(key, " box")
+    key: "".concat(key, " box"),
+    role: "gridcell"
   }, mergedProps), (items === null || items === void 0 ? void 0 : items.length) > 0 && (0, _react2.jsx)(_index.IconButtonToggle, {
     onToggle: pressIcon,
     isToggled: isExpanded,

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

@@ -186,11 +186,10 @@ var TreeViewSection = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     classNames = _useStatusClasses.classNames;
   return (0, _react2.jsx)(_index2.Box, (0, _extends2["default"])({
     ref: treeSectionRef,
-    as: "li",
     "aria-expanded": isExpanded,
     "aria-disabled": isDisabled
   }, mergedProps, {
-    role: "treeitem",
+    role: "row",
     variant: "treeView.wrapper",
     className: classNames,
     "aria-selected": isSelected,
@@ -210,8 +209,7 @@ var TreeViewSection = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     isDisabled: isDisabled,
     isParentFocused: isFocusedWithin
   }), isExpanded && (0, _react2.jsx)(_index2.Box, {
-    as: "ul",
-    role: "group",
+    role: "rowgroup",
     key: "".concat(item.key, " ul"),
     sx: {
       pl: 'md',

package/lib/components/TreeView/TreeView.js

@@ -160,9 +160,7 @@ var TreeView = /*#__PURE__*/forwardRef(function (props, ref) {
       setLastFocusedItem: setLastFocusedItem,
       lastFocusedItem: lastFocusedItem
     }
-  }, ___EmotionJSX(Box, _extends({
-    as: "ul"
-  }, listBoxProps, {
+  }, ___EmotionJSX(Box, _extends({}, listBoxProps, {
     ref: treeViewRef,
     "aria-label": ariaLabel,
     role: "treegrid",

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

@@ -1,10 +1,12 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { useTreeData } from 'react-stately';
 import userEvent from '@testing-library/user-event';
 import PropTypes from 'prop-types';
 import { Item } from '../../index';
 import { render, screen } from '../../utils/testUtils/testWrapper';
+// Needs to be added to each components test file
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import { SectionOrItemRender } from './TreeView';
 import { refArray } from './TreeViewKeyboardDelegate.test';
 import { addRefToArrayHelper, removeRefFromArrayHelper } from './TreeViewSection';
@@ -47,7 +49,7 @@ var data = [{
 var singleData = [{
   title: 'Single Item'
 }];
-var TreeViewComponent = function TreeViewComponent(props) {
+var TreeViewComponent = /*#__PURE__*/forwardRef(function (props, ref) {
   var tree = useTreeData({
     initialItems: props.data,
     getKey: function getKey(item) {
@@ -57,7 +59,9 @@ var TreeViewComponent = function TreeViewComponent(props) {
       return item.items;
     }
   });
-  return ___EmotionJSX(TreeView, _extends({}, defaultProps, props, {
+  return ___EmotionJSX(TreeView, _extends({
+    ref: ref
+  }, defaultProps, props, {
     items: tree.items,
     tree: tree,
     "aria-label": "Example Tree"
@@ -68,7 +72,7 @@ var TreeViewComponent = function TreeViewComponent(props) {
       title: item.key
     });
   });
-};
+});
 TreeViewComponent.propTypes = {
   data: PropTypes.arrayOf(PropTypes.shape({}))
 };
@@ -99,6 +103,11 @@ afterAll(function () {
   offsetHeight.mockReset();
   scrollHeight.mockReset();
 });
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(TreeViewComponent, props);
+  }
+});
 test('TreeView component does load', function () {
   render(___EmotionJSX(TreeViewComponent, null));
   var element = screen.queryByRole('treegrid');
@@ -123,7 +132,7 @@ test('Renders both Sections and Items', function () {
   expect(peopleElement).toBeInTheDocument();
   var plantElement = screen.getByText('Other');
   expect(plantElement).toBeInTheDocument();
-  var allListItems = screen.getAllByRole('treeitem');
+  var allListItems = screen.getAllByRole('row');
   expect(allListItems).toHaveLength(3);
 });
 test('Can expand an Item using the mouse', function () {
@@ -157,7 +166,7 @@ test('disabledKeys prop disables items in the tree -- rendering them unclickable
     data: data,
     disabledKeys: ['Single Item']
   }));
-  var listItems = screen.queryAllByRole('treeitem');
+  var listItems = screen.queryAllByRole('row');
   var thisItem = listItems[2];
   expect(thisItem).not.toHaveClass('is-selected');
   expect(thisItem).toHaveAttribute('aria-disabled', 'true');
@@ -169,14 +178,14 @@ test('displays correct aria attributes', function () {
   render(___EmotionJSX(TreeViewComponent, {
     data: data
   }));
-  var listItems = screen.getAllByRole('treeitem');
+  var listItems = screen.getAllByRole('row');
   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');
   userEvent.click(buttons[1]);
-  var expandedItems = screen.getAllByRole('treeitem');
+  var expandedItems = screen.getAllByRole('row');
   var nestedItem = expandedItems[2];
   expect(nestedItem).toHaveAttribute('aria-level', '2');
   expect(nestedItem).toHaveAttribute('aria-posinset', '1');
@@ -188,7 +197,7 @@ test('onKeyDown calls passed in prop call back function', function () {
     data: data,
     onKeyDown: callback
   }));
-  var listItems = screen.queryAllByRole('treeitem');
+  var listItems = screen.queryAllByRole('row');
   var thisItem = listItems[0];
   userEvent.type(thisItem, '{arrowleft}');
   expect(callback).toHaveBeenCalled();
@@ -199,7 +208,7 @@ test('onKeyDown calls passed in prop call back function', function () {
     data: data,
     onKeyDown: callback
   }));
-  var listItems = screen.queryAllByRole('treeitem');
+  var listItems = screen.queryAllByRole('row');
   var thisItem = listItems[2];
   userEvent.type(thisItem, '{arrowleft}');
   expect(callback).toHaveBeenCalled();
@@ -209,7 +218,7 @@ test('onKeyDown does not call passed in prop call back function', function () {
   render(___EmotionJSX(TreeViewComponent, {
     data: data
   }));
-  var listItems = screen.queryAllByRole('treeitem');
+  var listItems = screen.queryAllByRole('row');
   var thisItem = listItems[2];
   userEvent.type(thisItem, '{arrowleft}');
   expect(callback).not.toHaveBeenCalled();

package/lib/components/TreeView/TreeViewItem.js

@@ -126,12 +126,11 @@ var TreeViewItem = /*#__PURE__*/forwardRef(function (props, ref) {
     }),
     classNames = _useStatusClasses.classNames;
   return ___EmotionJSX(Box, _extends({
-    as: "li",
     isRow: true,
     ref: treeItemRef,
     "aria-disabled": isDisabled
   }, mergedProps, {
-    role: "treeitem",
+    role: "row",
     variant: "treeView.wrapper",
     className: classNames,
     "aria-selected": isSelected,

package/lib/components/TreeView/TreeViewRow.js

@@ -74,9 +74,6 @@ var TreeViewRow = /*#__PURE__*/forwardRef(function (props, ref) {
     }),
     classNames = _useStatusClasses.classNames;
   var mergedProps = mergeProps(hoverProps, pressProps, others);
-
-  // console.log(`ROW: ${key} has parent focus: ${isParentFocused}`)
-
   return ___EmotionJSX(Box, _extends({
     ref: treeRowRef,
     isRow: true,
@@ -89,7 +86,8 @@ var TreeViewRow = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     },
     className: classNames,
-    key: "".concat(key, " box")
+    key: "".concat(key, " box"),
+    role: "gridcell"
   }, mergedProps), (items === null || items === void 0 ? void 0 : items.length) > 0 && ___EmotionJSX(IconButtonToggle, {
     onToggle: pressIcon,
     isToggled: isExpanded,

package/lib/components/TreeView/TreeViewSection.js

@@ -170,11 +170,10 @@ var TreeViewSection = /*#__PURE__*/forwardRef(function (props, ref) {
     classNames = _useStatusClasses.classNames;
   return ___EmotionJSX(Box, _extends({
     ref: treeSectionRef,
-    as: "li",
     "aria-expanded": isExpanded,
     "aria-disabled": isDisabled
   }, mergedProps, {
-    role: "treeitem",
+    role: "row",
     variant: "treeView.wrapper",
     className: classNames,
     "aria-selected": isSelected,
@@ -194,8 +193,7 @@ var TreeViewSection = /*#__PURE__*/forwardRef(function (props, ref) {
     isDisabled: isDisabled,
     isParentFocused: isFocusedWithin
   }), isExpanded && ___EmotionJSX(Box, {
-    as: "ul",
-    role: "group",
+    role: "rowgroup",
     key: "".concat(item.key, " ul"),
     sx: {
       pl: 'md',

package/package.json

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