@pingux/astro 2.42.0-alpha.1 → 2.42.0-alpha.2

package/lib/components/TreeView/TreeViewRow.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["title", "mainIcon", "lastIcon", "item", "items", "isExpanded", "isDragging", "onKeyDown"];
+var _excluded = ["title", "mainIcon", "lastIcon", "item", "items", "isExpanded", "hasChildren", "isDragging", "onKeyDown"];
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
@@ -40,6 +40,7 @@ var TreeViewRow = /*#__PURE__*/forwardRef(function (props, ref) {
     item = props.item,
     items = props.items,
     isExpanded = props.isExpanded,
+    hasChildren = props.hasChildren,
     isDragging = props.isDragging,
     _onKeyDown = props.onKeyDown,
     others = _objectWithoutProperties(props, _excluded);
@@ -181,7 +182,7 @@ var TreeViewRow = /*#__PURE__*/forwardRef(function (props, ref) {
     onKeyDown: function onKeyDown(e) {
       _onKeyDown(e);
     }
-  }), (items === null || items === void 0 ? void 0 : items.length) > 0 && ___EmotionJSX(IconButtonToggle, {
+  }), ((items === null || items === void 0 ? void 0 : items.length) > 0 || hasChildren) && ___EmotionJSX(IconButtonToggle, {
     onToggle: pressIcon,
     isToggled: isExpanded,
     defaultIcon: MenuRight,
@@ -234,6 +235,7 @@ TreeViewRow.propTypes = {
     key: PropTypes.string
   }),
   mainIcon: PropTypes.elementType,
-  lastIcon: PropTypes.elementType
+  lastIcon: PropTypes.elementType,
+  hasChildren: PropTypes.bool
 };
 export default TreeViewRow;

package/lib/components/TreeView/TreeViewSection.js

@@ -1,13 +1,16 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _someInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/some";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
-import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { useOption } from '@react-aria/listbox';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
 import PropTypes from 'prop-types';
 import { useTreeViewContext } from '../../context/TreeViewContext';
-import { Box, TreeViewItem } from '../../index';
+import { Box, Loader, TreeViewItem } from '../../index';
 import InsertionIndicator from './InsertionIndicator';
 import { SectionOrItemRender } from './TreeView';
 import { sectionPressHandlers } from './TreeViewKeyboardDelegate';
@@ -94,6 +97,8 @@ var TreeViewSection = /*#__PURE__*/forwardRef(function (props, ref) {
   var item = props.item,
     items = props.items,
     title = props.title,
+    hasChildren = props.hasChildren,
+    loadingNodes = props.loadingNodes,
     focusManager = props.focusManager,
     onKeyDown = props.onKeyDown,
     level = props.level,
@@ -101,6 +106,7 @@ var TreeViewSection = /*#__PURE__*/forwardRef(function (props, ref) {
     setSize = props.setSize;
   var key = item.key;
   var treeSectionRef = useRef();
+
   /* istanbul ignore next */
   useImperativeHandle(ref, function () {
     return treeSectionRef.current;
@@ -120,6 +126,17 @@ var TreeViewSection = /*#__PURE__*/forwardRef(function (props, ref) {
     isDisabled = _useOption.isDisabled;
   var isExpanded = state.expandedKeys.has(key);
   var isDragging = dragState.isDragging(item.key);
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    loaderState = _useState2[0],
+    setLoaderState = _useState2[1];
+  useEffect(function () {
+    if (loadingNodes) {
+      _forEachInstanceProperty(loadingNodes).call(loadingNodes, function (loader) {
+        if (loader.node === title) setLoaderState(loader.loadingState);
+      });
+    }
+  }, [loadingNodes, title]);
   var onKeyDownFunction = function onKeyDownFunction(e) {
     onKeyDownSection(e, state, key, tree, isSelected, isExpanded, focusManager, flatKeyArray, refArray, pageLength, true);
     if (onKeyDown) {
@@ -150,7 +167,8 @@ var TreeViewSection = /*#__PURE__*/forwardRef(function (props, ref) {
     items: items,
     isDragging: isDragging,
     isExpanded: isExpanded,
-    onKeyDown: onKeyDownFunction
+    onKeyDown: onKeyDownFunction,
+    hasChildren: hasChildren
   }), isExpanded && ___EmotionJSX(Box, {
     role: "rowgroup",
     key: "".concat(item.key, " ul"),
@@ -160,13 +178,22 @@ var TreeViewSection = /*#__PURE__*/forwardRef(function (props, ref) {
         border: 'none'
       }
     }
-  }, _mapInstanceProperty(_context3 = _Array$from(items)).call(_context3, function (_item, _index) {
+  }, ___EmotionJSX(VisuallyHidden, {
+    "aria-live": "polite"
+  }, loaderState === false && (isExpanded && items.length > 0 ? ' Loading successful' : 'Loading unsuccessful')), loaderState ? ___EmotionJSX(Loader, {
+    color: "active",
+    ml: "31px"
+  }) : _mapInstanceProperty(_context3 = _Array$from(items)).call(_context3, function (_item, _index) {
     var _item$children;
-    return SectionOrItemRender(((_item$children = _item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) > 0, ___EmotionJSX(TreeViewSection, {
+    return SectionOrItemRender(
+    // _item.value.items?.length > 0 || _item.value.items,
+    ((_item$children = _item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) > 0 || _item.value.items, ___EmotionJSX(TreeViewSection, {
       item: _item,
       items: _item.children,
       title: _item.value.title,
       key: _item.value.title,
+      hasChildren: _item.value.items && true,
+      loadingNodes: loadingNodes,
       focusManager: focusManager,
       level: level + 1,
       position: _index,
@@ -195,6 +222,8 @@ TreeViewSection.propTypes = {
     key: PropTypes.string
   }),
   title: PropTypes.string,
+  hasChildren: PropTypes.bool,
+  loadingNodes: PropTypes.arrayOf(PropTypes.shape({})),
   focusManager: PropTypes.shape({}),
   onKeyDown: PropTypes.func,
   level: PropTypes.number,

package/lib/recipes/LinkedListView.stories.js

@@ -5,8 +5,9 @@ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import React, { useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import DotsVerticalIcon from '@pingux/mdi-react/DotsVerticalIcon';
+import { v4 as uuid } from 'uuid';
 import useOverlappingMenuHoverState from '../hooks/useOverlappingMenuHoverState';
 import { Badge, Box, Icon, IconButton, Item, ListItem, ListView, Menu, PopoverMenu, Separator, Text } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -223,14 +224,17 @@ export var Default = function Default(_ref) {
 
   // the vector shield and key icon.
   var ShieldIcon = function ShieldIcon(props) {
+    var id = useMemo(function () {
+      return uuid();
+    }, []);
     return ___EmotionJSX("svg", _extends({
       width: "19",
       height: "23",
       viewBox: "0 0 19 23",
       xmlns: "http://www.w3.org/2000/svg",
-      "aria-labelledby": "shield-icon-title"
+      "aria-labelledby": "shield-icon-title-".concat(id)
     }, props), ___EmotionJSX("title", {
-      id: "shield-icon-title"
+      id: "shield-icon-title-".concat(id)
     }, "Shield Icon"), ___EmotionJSX("path", {
       d: "M9.5 7.33342C9.77627 7.33342 10.0412 7.44316 10.2366 7.63851C10.4319 7.83386 10.5417 8.09881 10.5417 8.37508C10.5417 8.65135 10.4319 8.9163 10.2366 9.11165C10.0412 9.307 9.77627 9.41675 9.5 9.41675C9.22373 9.41675 8.95878 9.307 8.76343 9.11165C8.56808 8.9163 8.45833 8.65135 8.45833 8.37508C8.45833 8.09881 8.56808 7.83386 8.76343 7.63851C8.95878 7.44316 9.22373 7.33342 9.5 7.33342ZM18.875 10.4584C18.875 16.2397 14.875 21.6459 9.5 22.9584C4.125 21.6459 0.125 16.2397 0.125 10.4584V4.20842L9.5 0.041748L18.875 4.20842V10.4584ZM9.5 5.25008C8.6712 5.25008 7.87634 5.57932 7.29029 6.16537C6.70424 6.75142 6.375 7.54628 6.375 8.37508C6.375 9.73967 7.23958 10.8959 8.45833 11.323V17.7501H10.5417V15.6667H12.625V13.5834H10.5417V11.323C11.7604 10.8959 12.625 9.73967 12.625 8.37508C12.625 7.54628 12.2958 6.75142 11.7097 6.16537C11.1237 5.57932 10.3288 5.25008 9.5 5.25008Z"
     }));

package/lib/recipes/PanelContent.stories.js

@@ -13,7 +13,7 @@ import UserImage from '../utils/devUtils/assets/UserImage.png';
 import statuses from '../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Experimental/PanelContent',
+  title: 'Recipes/Panel Content',
   parameters: {
     docs: {
       source: {

package/package.json

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