@pingux/astro 2.19.0-alpha.0 → 2.19.0-alpha.1

package/lib/cjs/components/ListView/ListView.js

@@ -103,6 +103,9 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     hoveredItem: hoveredItem,
     setHoveredItem: setHoveredItem
   };
+  state.isLoading = (0, _react.useMemo)(function () {
+    return isLoading;
+  }, [isLoading]);
   var collection = state.collection,
     selectionManager = state.selectionManager;
   var layout = useListLayout(state);

package/lib/cjs/components/ListView/ListViewItem.js

@@ -25,7 +25,7 @@ var _interactions = require("@react-aria/interactions");
 var _list = require("@react-aria/list");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../../hooks");
-var _Box = _interopRequireDefault(require("../Box"));
+var _index = require("../../index");
 var _ListViewContext = require("./ListViewContext");
 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); }
@@ -86,7 +86,7 @@ var ListViewItem = function ListViewItem(props) {
   // Whether the current component should have legacy styles removed
   // TODO: [Astro 3.0.0] Remove the legacy styles and update the code here.
   var shouldOverRideLegacyStyles = (0, _includes["default"])(_context = (0, _keys["default"])(item.rendered.props)).call(_context, 'data');
-  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     isDisabled: isDisabled,
     isRow: true,
     ref: rowRef
@@ -94,7 +94,7 @@ var ListViewItem = function ListViewItem(props) {
     sx: {
       outline: 'none'
     }
-  }), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+  }), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     as: "div"
     // Apply appropriate variant dependant on whether a legacy list item is used
     ,
@@ -105,7 +105,11 @@ var ListViewItem = function ListViewItem(props) {
     isSelected: isSelected,
     className: classNames,
     "data-id": dataId
-  }, listItemProps), item.rendered));
+  }, listItemProps), item.rendered, state.isLoading && isFocusVisibleWithin && (0, _react2.jsx)(_index.Box, {
+    variant: "listViewItem.loaderContainer"
+  }, (0, _react2.jsx)(_index.Loader, {
+    color: "neutral.50"
+  }))));
 };
 ListViewItem.propTypes = {
   item: _propTypes["default"].shape({

package/lib/cjs/components/ListViewItem/ListViewItem.styles.js

@@ -71,6 +71,17 @@ var linkedViewContainer = _objectSpread(_objectSpread({}, container), {}, {
     }
   }
 });
+var loaderContainer = {
+  bg: 'white',
+  p: 'xs',
+  position: 'absolute',
+  top: 'calc(50% - 18px)',
+  left: 'calc(50% - 44px)',
+  borderWidth: '1px',
+  borderColor: 'neutral.80',
+  borderStyle: 'solid',
+  borderRadius: '25px'
+};
 var styledContainer = {
   m: '1px',
   minHeight: '72px',
@@ -115,6 +126,7 @@ var _default = {
   linkedViewContainer: linkedViewContainer,
   rightOfData: rightOfData,
   styledContainer: styledContainer,
-  styledListItem: styledListItem
+  styledListItem: styledListItem,
+  loaderContainer: loaderContainer
 };
 exports["default"] = _default;

package/lib/components/ListView/ListView.js

@@ -90,6 +90,9 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
     hoveredItem: hoveredItem,
     setHoveredItem: setHoveredItem
   };
+  state.isLoading = useMemo(function () {
+    return isLoading;
+  }, [isLoading]);
   var collection = state.collection,
     selectionManager = state.selectionManager;
   var layout = useListLayout(state);

package/lib/components/ListView/ListViewItem.js

@@ -17,7 +17,7 @@ import { useHover } from '@react-aria/interactions';
 import { useListItem } from '@react-aria/list';
 import PropTypes from 'prop-types';
 import { useStatusClasses } from '../../hooks';
-import Box from '../Box';
+import { Box, Loader } from '../../index';
 import { ListViewContext } from './ListViewContext';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ListViewItem = function ListViewItem(props) {
@@ -93,7 +93,11 @@ var ListViewItem = function ListViewItem(props) {
     isSelected: isSelected,
     className: classNames,
     "data-id": dataId
-  }, listItemProps), item.rendered));
+  }, listItemProps), item.rendered, state.isLoading && isFocusVisibleWithin && ___EmotionJSX(Box, {
+    variant: "listViewItem.loaderContainer"
+  }, ___EmotionJSX(Loader, {
+    color: "neutral.50"
+  }))));
 };
 ListViewItem.propTypes = {
   item: PropTypes.shape({

package/lib/components/ListViewItem/ListViewItem.styles.js

@@ -64,6 +64,17 @@ var linkedViewContainer = _objectSpread(_objectSpread({}, container), {}, {
     }
   }
 });
+var loaderContainer = {
+  bg: 'white',
+  p: 'xs',
+  position: 'absolute',
+  top: 'calc(50% - 18px)',
+  left: 'calc(50% - 44px)',
+  borderWidth: '1px',
+  borderColor: 'neutral.80',
+  borderStyle: 'solid',
+  borderRadius: '25px'
+};
 var styledContainer = {
   m: '1px',
   minHeight: '72px',
@@ -108,5 +119,6 @@ export default {
   linkedViewContainer: linkedViewContainer,
   rightOfData: rightOfData,
   styledContainer: styledContainer,
-  styledListItem: styledListItem
+  styledListItem: styledListItem,
+  loaderContainer: loaderContainer
 };

package/package.json

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