@pingux/astro 2.18.1-alpha.2 → 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/cjs/recipes/ConditionFilter.stories.js

@@ -18,6 +18,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _react = _interopRequireDefault(require("react"));
 var _TrashIcon = _interopRequireDefault(require("@pingux/mdi-react/TrashIcon"));
 var _index = require("../index");
+var _figmaLinks = require("../utils/designUtils/figmaLinks.js");
 var _react2 = require("@emotion/react");
 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; }
@@ -198,6 +199,12 @@ var DisplaySectionHeader = function DisplaySectionHeader(_ref2) {
   }, ofTheConditionsAreTrueCopy));
 };
 exports.DisplaySectionHeader = DisplaySectionHeader;
+Display.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.conditionFilter.display
+  }
+};
 var Edit = function Edit() {
   var trashButton = (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "deleteButton",
@@ -494,4 +501,10 @@ var Edit = function Edit() {
     alignSelf: "start"
   }, trashButton))));
 };
-exports.Edit = Edit;
+exports.Edit = Edit;
+Edit.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.conditionFilter.edit
+  }
+};

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

@@ -39,6 +39,10 @@ var FIGMA_LINKS = {
   collapsiblePanel: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=14546-33229&t=VgqEexa1CXAXfPpp-0'
   },
+  conditionFilter: {
+    display: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=218%3A574&mode=dev',
+    edit: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=218%3A597&mode=dev'
+  },
   copyText: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=218-1442&t=8Wwd3tIBh3GEjCJB-0'
   },

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/lib/recipes/ConditionFilter.stories.js

@@ -13,6 +13,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import TrashIcon from '@pingux/mdi-react/TrashIcon';
 import { Badge, Box, Bracket, Button, Icon, IconButton, Item, RockerButton, RockerButtonGroup, SelectField, Text, TextField } from '../index';
+import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks.js';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Condition Filter'
@@ -187,6 +188,12 @@ export var DisplaySectionHeader = function DisplaySectionHeader(_ref2) {
     alignSelf: "center"
   }, ofTheConditionsAreTrueCopy));
 };
+Display.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.conditionFilter.display
+  }
+};
 export var Edit = function Edit() {
   var trashButton = ___EmotionJSX(IconButton, {
     "aria-label": "deleteButton",
@@ -482,4 +489,10 @@ export var Edit = function Edit() {
   }))), ___EmotionJSX(Box, {
     alignSelf: "start"
   }, trashButton))));
+};
+Edit.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.conditionFilter.edit
+  }
 };

package/lib/utils/designUtils/figmaLinks.js

@@ -32,6 +32,10 @@ export var FIGMA_LINKS = {
   collapsiblePanel: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=14546-33229&t=VgqEexa1CXAXfPpp-0'
   },
+  conditionFilter: {
+    display: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=218%3A574&mode=dev',
+    edit: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=218%3A597&mode=dev'
+  },
   copyText: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=218-1442&t=8Wwd3tIBh3GEjCJB-0'
   },

package/package.json

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