@pingux/astro 2.37.2 → 2.38.0-alpha.1

package/lib/cjs/components/Callout/Callout.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CalloutProps } from '../../types/callout';
+export declare const CALLOUT_TEST_ID = "CalloutTestId";
+/**
+ Please note, Callout is a static component, the [Messages](./?path=/docs/components-messages)
+ component is recommended if you need to interrupt and notify users of successful/failed actions
+ or give warnings of unexpected events.
+ */
+declare const Callout: React.ForwardRefExoticComponent<CalloutProps & React.RefAttributes<HTMLElement>>;
+export default Callout;

package/lib/cjs/components/Callout/Callout.js

@@ -1,15 +1,9 @@
 "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 _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
@@ -21,15 +15,12 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _react = _interopRequireWildcard(require("react"));
 var _ = require("../..");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
-var _statusProp = require("../../utils/docUtils/statusProp");
 var _NoticeIcon = require("../Icon/NoticeIcon");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "status"];
 var _calloutProps;
 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 CALLOUT_TEST_ID = 'CalloutTestId';
 exports.CALLOUT_TEST_ID = CALLOUT_TEST_ID;
 var calloutProps = (_calloutProps = {}, (0, _defineProperty2["default"])(_calloutProps, _statuses["default"].DEFAULT, {
@@ -59,7 +50,8 @@ var defaultIconProps = {
 
 var Callout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
-    status = _ref.status,
+    _ref$status = _ref.status,
+    status = _ref$status === void 0 ? _statuses["default"].DEFAULT : _ref$status,
     others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     ref: ref,
@@ -73,8 +65,6 @@ var Callout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     "aria-label": "".concat(status, "-icon")
   }, defaultIconProps)), children);
 });
-Callout.propTypes = _objectSpread({}, _statusProp.statusPropTypes);
-Callout.defaultProps = _objectSpread({}, _statusProp.statusDefaultProp);
 Callout.displayName = 'Callout';
 var _default = Callout;
 exports["default"] = _default;

package/lib/cjs/components/Callout/Callout.stories.d.ts

@@ -0,0 +1,8 @@
+import { StoryFn } from '@storybook/react';
+import { CalloutProps } from '../../types/callout';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn<CalloutProps>;
+export declare const ErrorStatus: StoryFn;
+export declare const Success: StoryFn;
+export declare const Warning: StoryFn;

package/lib/cjs/components/Callout/Callout.stories.js

@@ -18,7 +18,7 @@ var _react = _interopRequireDefault(require("react"));
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
-var _figmaLinks = require("../../utils/designUtils/figmaLinks.ts");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _statusProp = require("../../utils/docUtils/statusProp");
 var _Callout = _interopRequireDefault(require("./Callout.mdx"));

package/lib/cjs/components/Callout/Callout.styles.d.ts

@@ -0,0 +1,35 @@
+declare const _default: {
+    base: {
+        alignItems: string;
+        border: string;
+        borderColor: string;
+        fontSize: string;
+        p: string;
+        width: string;
+    };
+    error: {
+        borderColor: string;
+        alignItems: string;
+        border: string;
+        fontSize: string;
+        p: string;
+        width: string;
+    };
+    success: {
+        borderColor: string;
+        alignItems: string;
+        border: string;
+        fontSize: string;
+        p: string;
+        width: string;
+    };
+    warning: {
+        borderColor: string;
+        alignItems: string;
+        border: string;
+        fontSize: string;
+        p: string;
+        width: string;
+    };
+};
+export default _default;

package/lib/cjs/components/Callout/Callout.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/cjs/components/Callout/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Callout';

package/lib/cjs/components/Icon/NoticeIcon.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { IconProps, Status } from '../../types';
+export declare const noticeIcons: {
+    [x: number]: {
+        icon: import("@pingux/mdi-react").MdiReactIconComponentType;
+        testid: string;
+        name: string;
+    };
+};
+interface NoticeIconProps extends Omit<IconProps, 'icon'> {
+    status?: Status;
+}
+export declare const NoticeIcon: React.FC<NoticeIconProps>;
+export {};

package/lib/cjs/components/Icon/NoticeIcon.js

@@ -1,12 +1,5 @@
 "use strict";
 
-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 _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
@@ -23,12 +16,9 @@ var _CheckCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckCi
 var _InformationIcon = _interopRequireDefault(require("@pingux/mdi-react/InformationIcon"));
 var _ = require("../..");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
-var _statusProp = require("../../utils/docUtils/statusProp");
 var _react2 = require("@emotion/react");
 var _excluded = ["status"];
 var _noticeIcons;
-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 noticeIcons = (_noticeIcons = {}, (0, _defineProperty2["default"])(_noticeIcons, _statuses["default"].DEFAULT, {
   icon: _InformationIcon["default"],
   testid: 'default-icon-testid',
@@ -53,11 +43,10 @@ var NoticeIcon = function NoticeIcon(_ref) {
     others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return (0, _react2.jsx)(_.Icon, (0, _extends2["default"])({
     "data-testid": noticeIcons[status].testid,
-    icon: noticeIcons[status].icon,
     title: {
       name: noticeIcons[status].name
-    }
+    },
+    icon: noticeIcons[status].icon
   }, others));
 };
-exports.NoticeIcon = NoticeIcon;
-NoticeIcon.propTypes = _objectSpread({}, _statusProp.statusPropTypes);
+exports.NoticeIcon = NoticeIcon;

package/lib/cjs/components/Icon/NoticeIcon.test.d.ts

@@ -0,0 +1 @@
+export {};

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/cjs/types/callout.d.ts

@@ -0,0 +1,4 @@
+import { Status } from './item';
+import { DOMAttributes, StyleProps } from './shared';
+export interface CalloutProps extends StyleProps, DOMAttributes, Status {
+}

package/lib/cjs/types/callout.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/item.d.ts

@@ -1,6 +1,9 @@
 import { ElementType } from 'react';
 import type { ItemProps } from '@react-types/shared';
 import { DOMAttributes, StyleProps } from './shared';
+export interface Status {
+    status?: 'default' | 'error' | 'success' | 'warning';
+}
 declare module '@react-types/shared' {
     interface ItemProps<T> extends StyleProps, DOMAttributes {
         /** The rendered label for the item. */
@@ -16,7 +19,7 @@ declare module '@react-types/shared' {
         /** The HTML element type that will be used to render the item. */
         elementType?: string | ElementType;
         /** Indicates the status of item */
-        status?: 'default' | 'error' | 'success' | 'warning';
+        status?: Status;
         /** A URL to link to if elementType="a". */
         href?: string;
         /** Inline styling prop for item */

package/lib/components/Callout/Callout.js

@@ -1,22 +1,11 @@
-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 _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 var _excluded = ["children", "status"];
 var _calloutProps;
-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) { _defineProperty(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; }
 import React, { forwardRef } from 'react';
 import { Box } from '../..';
 import statuses from '../../utils/devUtils/constants/statuses';
-import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
 import { NoticeIcon } from '../Icon/NoticeIcon';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var CALLOUT_TEST_ID = 'CalloutTestId';
@@ -47,7 +36,8 @@ var defaultIconProps = {
 
 var Callout = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
-    status = _ref.status,
+    _ref$status = _ref.status,
+    status = _ref$status === void 0 ? statuses.DEFAULT : _ref$status,
     others = _objectWithoutProperties(_ref, _excluded);
   return ___EmotionJSX(Box, _extends({
     ref: ref,
@@ -61,7 +51,5 @@ var Callout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "aria-label": "".concat(status, "-icon")
   }, defaultIconProps)), children);
 });
-Callout.propTypes = _objectSpread({}, statusPropTypes);
-Callout.defaultProps = _objectSpread({}, statusDefaultProp);
 Callout.displayName = 'Callout';
 export default Callout;

package/lib/components/Callout/Callout.stories.js

@@ -13,7 +13,7 @@ import React from 'react';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Callout, Link, Text } from '../../index';
-import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { statusArgTypes } from '../../utils/docUtils/statusProp';
 import CalloutReadme from './Callout.mdx';

package/lib/components/Icon/NoticeIcon.js

@@ -1,18 +1,8 @@
-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 _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 var _excluded = ["status"];
 var _noticeIcons;
-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) { _defineProperty(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; }
 import React from 'react';
 import AlertCircleIcon from '@pingux/mdi-react/AlertCircleIcon';
 import AlertIcon from '@pingux/mdi-react/AlertIcon';
@@ -20,7 +10,6 @@ import CheckCircleIcon from '@pingux/mdi-react/CheckCircleIcon';
 import InformationIcon from '@pingux/mdi-react/InformationIcon';
 import { Icon } from '../..';
 import statuses from '../../utils/devUtils/constants/statuses';
-import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var noticeIcons = (_noticeIcons = {}, _defineProperty(_noticeIcons, statuses.DEFAULT, {
   icon: InformationIcon,
@@ -45,10 +34,9 @@ export var NoticeIcon = function NoticeIcon(_ref) {
     others = _objectWithoutProperties(_ref, _excluded);
   return ___EmotionJSX(Icon, _extends({
     "data-testid": noticeIcons[status].testid,
-    icon: noticeIcons[status].icon,
     title: {
       name: noticeIcons[status].name
-    }
+    },
+    icon: noticeIcons[status].icon
   }, others));
-};
-NoticeIcon.propTypes = _objectSpread({}, statusPropTypes);
+};

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/lib/types/callout.js

@@ -0,0 +1 @@
+export {};

package/package.json

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