@pingux/astro 1.24.1-alpha.3 → 1.25.0-alpha.0

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

@@ -14,10 +14,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _react = _interopRequireDefault(require("react"));
 
-var _faker = _interopRequireDefault(require("faker"));
-
 var _ = _interopRequireDefault(require("."));
 
+var _images = require("../../utils/devUtils/constants/images");
+
 var _react2 = require("@emotion/react");
 
 var _default = {
@@ -28,7 +28,7 @@ var _default = {
       control: {
         type: 'none'
       },
-      defaultValue: _faker["default"].image.lorempicsum.imageUrl(150, 150, false, 0, '1')
+      defaultValue: _images.pingImg
     }
   }
 };

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

@@ -6,7 +6,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _react = _interopRequireDefault(require("react"));
 
-var _faker = _interopRequireDefault(require("faker"));
+var _faker = require("@faker-js/faker");
 
 var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 
@@ -17,7 +17,7 @@ var _ = _interopRequireDefault(require("."));
 var _react2 = require("@emotion/react");
 
 var defaultProps = {
-  src: _faker["default"].image.lorempicsum.imageUrl(150, 150, false, 0, '1')
+  src: _faker.faker.image.lorempicsum.imageUrl(150, 150, false, 0, '1')
 };
 
 var getComponent = function getComponent() {

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

@@ -26,7 +26,7 @@ var _isChromatic = _interopRequireDefault(require("chromatic/isChromatic"));
 
 var _ = _interopRequireDefault(require("."));
 
-var _imageConstants = require("./imageConstants");
+var _images = require("../../utils/devUtils/constants/images");
 
 var _htmlElements = require("../../utils/devUtils/constants/htmlElements");
 
@@ -59,7 +59,7 @@ var _default = {
       control: {
         type: 'none'
       },
-      defaultValue: _imageConstants.pingImg
+      defaultValue: _images.pingImg
     }
   }
 };
@@ -76,7 +76,7 @@ exports.Default = Default;
 
 var Avatar = function Avatar() {
   return (0, _react2.jsx)(_["default"], {
-    src: _imageConstants.pingImg,
+    src: _images.pingImg,
     variant: "images.avatar",
     alt: "Ping identity round avatar"
   });
@@ -86,7 +86,7 @@ exports.Avatar = Avatar;
 
 var CustomSizeAndRadius = function CustomSizeAndRadius() {
   return (0, _react2.jsx)(_["default"], {
-    src: _imageConstants.chiefIdentityChampions,
+    src: _images.chiefIdentityChampions,
     sx: {
       width: '70px',
       height: '70px',
@@ -101,7 +101,7 @@ exports.CustomSizeAndRadius = CustomSizeAndRadius;
 
 var Disabled = function Disabled() {
   return (0, _react2.jsx)(_["default"], {
-    src: _imageConstants.pingImg,
+    src: _images.pingImg,
     isDisabled: true,
     alt: "Ping identity square logo"
   });
@@ -111,7 +111,7 @@ exports.Disabled = Disabled;
 
 var FallbackImage = function FallbackImage() {
   return (0, _react2.jsx)(_["default"], {
-    fallbackImage: _imageConstants.pingImg,
+    fallbackImage: _images.pingImg,
     src: "https://deelay.me/7000/https://picsum.photos/150/150",
     sx: {
       width: '150px',
@@ -125,7 +125,7 @@ exports.FallbackImage = FallbackImage;
 
 var WithSkeletonLoadSuccess = function WithSkeletonLoadSuccess(_ref2) {
   var useLocalSrc = _ref2.useLocalSrc;
-  var imageSrc = useLocalSrc ? _imageConstants.pingImg : 'https://deelay.me/3000/https://picsum.photos/150/150';
+  var imageSrc = useLocalSrc ? _images.pingImg : 'https://deelay.me/3000/https://picsum.photos/150/150';
   return (0, _react2.jsx)(_["default"], {
     src: imageSrc,
     sx: {
@@ -155,13 +155,13 @@ var WithSkeletonLoadTimeout = function WithSkeletonLoadTimeout() {
 exports.WithSkeletonLoadTimeout = WithSkeletonLoadTimeout;
 
 var UpdatingImageSrc = function UpdatingImageSrc() {
-  var _useState = (0, _react.useState)(_imageConstants.chiefIdentityChampions),
+  var _useState = (0, _react.useState)(_images.chiefIdentityChampions),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
       image = _useState2[0],
       setImage = _useState2[1];
 
   var handleButtonPress = function handleButtonPress() {
-    var src = image === _imageConstants.pingImg ? _imageConstants.chiefIdentityChampions : _imageConstants.pingImg;
+    var src = image === _images.pingImg ? _images.chiefIdentityChampions : _images.pingImg;
     setImage(src);
   };
 
@@ -178,7 +178,7 @@ var UpdatingImageSrc = function UpdatingImageSrc() {
       height: '200px',
       mt: '25px'
     },
-    alt: image === _imageConstants.pingImg ? 'Ping identity square logo' : 'Terry Crews in a red suite'
+    alt: image === _images.pingImg ? 'Ping identity square logo' : 'Terry Crews in a red suite'
   }));
 };
 

package/lib/cjs/recipes/ListAndPanel.stories.js

@@ -0,0 +1,339 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.Default = void 0;
+
+var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _focus = require("@react-aria/focus");
+
+var _collections = require("@react-stately/collections");
+
+var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
+
+var _MoreVertIcon = _interopRequireDefault(require("mdi-react/MoreVertIcon"));
+
+var _PencilIcon = _interopRequireDefault(require("mdi-react/PencilIcon"));
+
+var _index = require("../index");
+
+var _hooks = require("../hooks");
+
+var _images = require("../utils/devUtils/constants/images");
+
+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; }
+
+var _default = {
+  title: 'Recipes/List with Panel'
+};
+exports["default"] = _default;
+var items = [{
+  email: 'dburkitt5@columbia.edu',
+  firstName: 'Nicola',
+  lastName: 'Burkitt',
+  avatar: _images.pingImg
+}, {
+  email: 'idixie2@elegantthemes.com',
+  firstName: 'Cacilia',
+  lastName: 'Dixie',
+  avatar: _images.pingImg
+}, {
+  email: 'dfowler0@rambler.ru',
+  firstName: 'Stavro',
+  lastName: 'Fowler',
+  avatar: _images.pingImg
+}, {
+  email: 'jgolde8@jimdo.com',
+  firstName: 'Celisse',
+  lastName: 'Golde',
+  avatar: _images.pingImg
+}, {
+  email: 'shearst9@answers.com',
+  firstName: 'Jeth',
+  lastName: 'Hearst',
+  avatar: _images.pingImg
+}, {
+  email: 'ajinaa@mapquest.com',
+  firstName: 'Kaycee',
+  lastName: 'Jina',
+  avatar: _images.pingImg
+}, {
+  email: 'vmalster4@biblegateway.com',
+  firstName: 'Lorry',
+  lastName: 'Malster',
+  avatar: _images.pingImg
+}, {
+  email: 'yphipp6@yellowpages.com',
+  firstName: 'Stanley',
+  lastName: 'Phipp',
+  avatar: _images.pingImg
+}, {
+  email: 'mskilbeck3@bbc.co.uk',
+  firstName: 'Gradey',
+  lastName: 'Skilbeck',
+  avatar: _images.pingImg
+}, {
+  email: 'dstebbing1@msu.edu',
+  firstName: 'Marnia',
+  lastName: 'Stebbing',
+  avatar: _images.pingImg
+}, {
+  email: 'lsterley7@lulu.com',
+  firstName: 'Joshua',
+  lastName: 'Sterley',
+  avatar: _images.pingImg
+}, {
+  email: 'luttleyb@hugedomains.com',
+  firstName: 'Jarrod',
+  lastName: 'Uttley',
+  avatar: _images.pingImg
+}, {
+  email: 'lidelc@yelp.com',
+  firstName: 'Andromache',
+  lastName: 'Idel',
+  avatar: _images.pingImg,
+  hasSeparator: false
+}];
+
+var ListElement = function ListElement(_ref) {
+  var item = _ref.item,
+      onClosePanel = _ref.onClosePanel;
+  return (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    minHeight: "60px"
+  }, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    mr: "auto",
+    alignItems: "center"
+  }, (0, _react2.jsx)(_index.Avatar, {
+    mr: "md",
+    sx: {
+      width: '25px',
+      height: '25px'
+    },
+    src: item.avatar
+  }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
+    variant: "bodyStrong",
+    alignSelf: "start"
+  }, item.lastName, ", ", item.firstName), (0, _react2.jsx)(_index.Text, {
+    sx: {
+      fontSize: 'sm',
+      my: '1px',
+      lineHeight: '16px'
+    },
+    variant: "subtitle",
+    alignSelf: "start"
+  }, item.email))), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    alignSelf: "center"
+  }, (0, _react2.jsx)(_index.SwitchField, {
+    "aria-label": "active user",
+    isDefaultSelected: true,
+    alignSelf: "center",
+    mr: "sm"
+  }), (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "more icon button",
+    mr: onClosePanel ? 'sm' : 0
+  }, (0, _react2.jsx)(_MoreVertIcon["default"], null)), (0, _react2.jsx)(_index.Menu, null, (0, _react2.jsx)(_collections.Item, {
+    key: "enable"
+  }, "Enable user"), (0, _react2.jsx)(_collections.Item, {
+    key: "disable"
+  }, "Disable user"), (0, _react2.jsx)(_collections.Item, {
+    key: "delete"
+  }, "Delete user"))), onClosePanel && (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "close icon button",
+    onPress: onClosePanel
+  }, (0, _react2.jsx)(_CloseIcon["default"], null))));
+};
+
+var Default = function Default() {
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      selectedItemId = _useState2[0],
+      setSelectedItemId = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      selectedKeys = _useState4[0],
+      setSelectedKeys = _useState4[1];
+
+  var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
+      panelState = _useOverlayPanelState.state,
+      onPanelClose = _useOverlayPanelState.onClose;
+
+  var panelTriggerRef = (0, _react.useRef)();
+
+  var closePanelHandler = function closePanelHandler() {
+    onPanelClose(panelState, panelTriggerRef);
+    setSelectedItemId(-1);
+    setSelectedKeys([]);
+  };
+
+  var selectItemHandler = function selectItemHandler(e) {
+    if (e.size) {
+      setSelectedItemId((0, _findIndex["default"])(items).call(items, function (item) {
+        return item.email === e.currentKey;
+      }));
+      setSelectedKeys([e.currentKey]);
+      panelState.open();
+    } else {
+      closePanelHandler();
+    }
+  };
+
+  return (0, _react2.jsx)(_index.Box, {
+    px: "lg",
+    py: "lg",
+    bg: "accent.99"
+  }, (0, _react2.jsx)(_index.SearchField, {
+    mb: "sm",
+    width: "400px",
+    placeholder: "Search",
+    "aria-label": "search"
+  }), (0, _react2.jsx)(_index.ListView, {
+    items: items,
+    onSelectionChange: selectItemHandler,
+    ref: panelTriggerRef,
+    selectedKeys: selectedKeys
+  }, function (item) {
+    return (0, _react2.jsx)(_collections.Item, {
+      key: item.email,
+      textValue: item.email,
+      hasSeparator: item.hasSeparator,
+      listItemProps: {
+        pl: 15,
+        minHeight: 75
+      }
+    }, (0, _react2.jsx)(ListElement, {
+      item: item
+    }));
+  }), (0, _react2.jsx)(_index.OverlayPanel, {
+    isOpen: panelState.isOpen,
+    state: panelState,
+    triggerRef: panelTriggerRef,
+    p: 0
+  }, panelState.isOpen && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_focus.FocusScope, {
+    contain: true,
+    restoreFocus: true,
+    autoFocus: true
+  }, (0, _react2.jsx)(_index.Box, {
+    px: "md",
+    bg: "accent.99",
+    justifyContent: "center"
+  }, (0, _react2.jsx)(ListElement, {
+    item: selectedItemId >= 0 ? items[selectedItemId] : [],
+    onClosePanel: closePanelHandler
+  })), (0, _react2.jsx)(_index.Separator, {
+    margin: 0,
+    bg: "accent.90"
+  }), (0, _react2.jsx)(_index.Box, {
+    px: "lg",
+    pt: "xs"
+  }, (0, _react2.jsx)(_index.Tabs, {
+    tabListProps: {
+      justifyContent: 'center'
+    },
+    tabPanelProps: {
+      sx: {
+        position: 'relative'
+      }
+    }
+  }, (0, _react2.jsx)(_index.Tab, {
+    title: "Profile"
+  }, selectedItemId >= 0 && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.IconButton, {
+    sx: {
+      position: 'absolute',
+      top: 0,
+      right: 0
+    }
+  }, (0, _react2.jsx)(_PencilIcon["default"], {
+    size: 20
+  })), (0, _react2.jsx)(_index.Text, {
+    sx: {
+      fontSize: 'sm',
+      fontWeight: 3,
+      lineHeight: '16px'
+    },
+    variant: "base",
+    mb: "xs"
+  }, "Full Name"), (0, _react2.jsx)(_index.Text, {
+    sx: {
+      fontWeight: 0,
+      lineHeight: '18px'
+    },
+    variant: "base",
+    mb: "md"
+  }, items[selectedItemId].firstName, " ", items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
+    sx: {
+      fontSize: 'sm',
+      fontWeight: 3,
+      lineHeight: '16px'
+    },
+    variant: "base",
+    mb: "xs"
+  }, "First Name"), (0, _react2.jsx)(_index.Text, {
+    sx: {
+      fontWeight: 0,
+      lineHeight: '18px'
+    },
+    variant: "base",
+    mb: "md"
+  }, items[selectedItemId].firstName), (0, _react2.jsx)(_index.Text, {
+    sx: {
+      fontSize: 'sm',
+      fontWeight: 3,
+      lineHeight: '16px'
+    },
+    variant: "base",
+    mb: "xs"
+  }, "Last Name"), (0, _react2.jsx)(_index.Text, {
+    sx: {
+      fontWeight: 0,
+      lineHeight: '18px'
+    },
+    variant: "base",
+    mb: "md"
+  }, items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
+    sx: {
+      fontSize: 'sm',
+      fontWeight: 3,
+      lineHeight: '16px'
+    },
+    variant: "base",
+    mb: "xs"
+  }, "Email"), (0, _react2.jsx)(_index.Text, {
+    sx: {
+      fontWeight: 0,
+      lineHeight: '18px'
+    },
+    variant: "base",
+    mb: "md"
+  }, items[selectedItemId].email))), (0, _react2.jsx)(_index.Tab, {
+    title: "Group Memberships"
+  }, (0, _react2.jsx)(_index.Text, null, "Group Memberships")), (0, _react2.jsx)(_index.Tab, {
+    title: "Account Info"
+  }, (0, _react2.jsx)(_index.Text, null, "Account Info"))))))));
+};
+
+exports.Default = Default;

package/lib/components/Avatar/Avatar.stories.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import faker from 'faker';
 import Avatar from '.';
+import { pingImg } from '../../utils/devUtils/constants/images';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Avatar',
@@ -11,7 +11,7 @@ export default {
       control: {
         type: 'none'
       },
-      defaultValue: faker.image.lorempicsum.imageUrl(150, 150, false, 0, '1')
+      defaultValue: pingImg
     }
   }
 };

package/lib/components/Avatar/Avatar.test.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import faker from 'faker';
+import { faker } from '@faker-js/faker';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import Avatar from '.';

package/lib/components/Image/Image.stories.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { useState } from 'react';
 import isChromatic from 'chromatic/isChromatic';
 import Image from '.';
-import { chiefIdentityChampions, pingImg } from './imageConstants';
+import { chiefIdentityChampions, pingImg } from '../../utils/devUtils/constants/images';
 import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
 import { Box, Button } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";

package/lib/recipes/ListAndPanel.stories.js

@@ -0,0 +1,302 @@
+import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import React, { useRef, useState } from 'react';
+import { FocusScope } from '@react-aria/focus';
+import { Item } from '@react-stately/collections';
+import CloseIcon from 'mdi-react/CloseIcon';
+import MoreVertIcon from 'mdi-react/MoreVertIcon';
+import PencilIcon from 'mdi-react/PencilIcon';
+import { Avatar, Box, IconButton, ListView, Menu, OverlayPanel, PopoverMenu, SearchField, Separator, SwitchField, Tab, Tabs, Text } from '../index';
+import { useOverlayPanelState } from '../hooks';
+import { pingImg } from '../utils/devUtils/constants/images';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/List with Panel'
+};
+var items = [{
+  email: 'dburkitt5@columbia.edu',
+  firstName: 'Nicola',
+  lastName: 'Burkitt',
+  avatar: pingImg
+}, {
+  email: 'idixie2@elegantthemes.com',
+  firstName: 'Cacilia',
+  lastName: 'Dixie',
+  avatar: pingImg
+}, {
+  email: 'dfowler0@rambler.ru',
+  firstName: 'Stavro',
+  lastName: 'Fowler',
+  avatar: pingImg
+}, {
+  email: 'jgolde8@jimdo.com',
+  firstName: 'Celisse',
+  lastName: 'Golde',
+  avatar: pingImg
+}, {
+  email: 'shearst9@answers.com',
+  firstName: 'Jeth',
+  lastName: 'Hearst',
+  avatar: pingImg
+}, {
+  email: 'ajinaa@mapquest.com',
+  firstName: 'Kaycee',
+  lastName: 'Jina',
+  avatar: pingImg
+}, {
+  email: 'vmalster4@biblegateway.com',
+  firstName: 'Lorry',
+  lastName: 'Malster',
+  avatar: pingImg
+}, {
+  email: 'yphipp6@yellowpages.com',
+  firstName: 'Stanley',
+  lastName: 'Phipp',
+  avatar: pingImg
+}, {
+  email: 'mskilbeck3@bbc.co.uk',
+  firstName: 'Gradey',
+  lastName: 'Skilbeck',
+  avatar: pingImg
+}, {
+  email: 'dstebbing1@msu.edu',
+  firstName: 'Marnia',
+  lastName: 'Stebbing',
+  avatar: pingImg
+}, {
+  email: 'lsterley7@lulu.com',
+  firstName: 'Joshua',
+  lastName: 'Sterley',
+  avatar: pingImg
+}, {
+  email: 'luttleyb@hugedomains.com',
+  firstName: 'Jarrod',
+  lastName: 'Uttley',
+  avatar: pingImg
+}, {
+  email: 'lidelc@yelp.com',
+  firstName: 'Andromache',
+  lastName: 'Idel',
+  avatar: pingImg,
+  hasSeparator: false
+}];
+
+var ListElement = function ListElement(_ref) {
+  var item = _ref.item,
+      onClosePanel = _ref.onClosePanel;
+  return ___EmotionJSX(Box, {
+    isRow: true,
+    minHeight: "60px"
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    mr: "auto",
+    alignItems: "center"
+  }, ___EmotionJSX(Avatar, {
+    mr: "md",
+    sx: {
+      width: '25px',
+      height: '25px'
+    },
+    src: item.avatar
+  }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+    variant: "bodyStrong",
+    alignSelf: "start"
+  }, item.lastName, ", ", item.firstName), ___EmotionJSX(Text, {
+    sx: {
+      fontSize: 'sm',
+      my: '1px',
+      lineHeight: '16px'
+    },
+    variant: "subtitle",
+    alignSelf: "start"
+  }, item.email))), ___EmotionJSX(Box, {
+    isRow: true,
+    alignSelf: "center"
+  }, ___EmotionJSX(SwitchField, {
+    "aria-label": "active user",
+    isDefaultSelected: true,
+    alignSelf: "center",
+    mr: "sm"
+  }), ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(IconButton, {
+    "aria-label": "more icon button",
+    mr: onClosePanel ? 'sm' : 0
+  }, ___EmotionJSX(MoreVertIcon, null)), ___EmotionJSX(Menu, null, ___EmotionJSX(Item, {
+    key: "enable"
+  }, "Enable user"), ___EmotionJSX(Item, {
+    key: "disable"
+  }, "Disable user"), ___EmotionJSX(Item, {
+    key: "delete"
+  }, "Delete user"))), onClosePanel && ___EmotionJSX(IconButton, {
+    "aria-label": "close icon button",
+    onPress: onClosePanel
+  }, ___EmotionJSX(CloseIcon, null))));
+};
+
+export var Default = function Default() {
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedItemId = _useState2[0],
+      setSelectedItemId = _useState2[1];
+
+  var _useState3 = useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selectedKeys = _useState4[0],
+      setSelectedKeys = _useState4[1];
+
+  var _useOverlayPanelState = useOverlayPanelState(),
+      panelState = _useOverlayPanelState.state,
+      onPanelClose = _useOverlayPanelState.onClose;
+
+  var panelTriggerRef = useRef();
+
+  var closePanelHandler = function closePanelHandler() {
+    onPanelClose(panelState, panelTriggerRef);
+    setSelectedItemId(-1);
+    setSelectedKeys([]);
+  };
+
+  var selectItemHandler = function selectItemHandler(e) {
+    if (e.size) {
+      setSelectedItemId(_findIndexInstanceProperty(items).call(items, function (item) {
+        return item.email === e.currentKey;
+      }));
+      setSelectedKeys([e.currentKey]);
+      panelState.open();
+    } else {
+      closePanelHandler();
+    }
+  };
+
+  return ___EmotionJSX(Box, {
+    px: "lg",
+    py: "lg",
+    bg: "accent.99"
+  }, ___EmotionJSX(SearchField, {
+    mb: "sm",
+    width: "400px",
+    placeholder: "Search",
+    "aria-label": "search"
+  }), ___EmotionJSX(ListView, {
+    items: items,
+    onSelectionChange: selectItemHandler,
+    ref: panelTriggerRef,
+    selectedKeys: selectedKeys
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.email,
+      textValue: item.email,
+      hasSeparator: item.hasSeparator,
+      listItemProps: {
+        pl: 15,
+        minHeight: 75
+      }
+    }, ___EmotionJSX(ListElement, {
+      item: item
+    }));
+  }), ___EmotionJSX(OverlayPanel, {
+    isOpen: panelState.isOpen,
+    state: panelState,
+    triggerRef: panelTriggerRef,
+    p: 0
+  }, panelState.isOpen && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(FocusScope, {
+    contain: true,
+    restoreFocus: true,
+    autoFocus: true
+  }, ___EmotionJSX(Box, {
+    px: "md",
+    bg: "accent.99",
+    justifyContent: "center"
+  }, ___EmotionJSX(ListElement, {
+    item: selectedItemId >= 0 ? items[selectedItemId] : [],
+    onClosePanel: closePanelHandler
+  })), ___EmotionJSX(Separator, {
+    margin: 0,
+    bg: "accent.90"
+  }), ___EmotionJSX(Box, {
+    px: "lg",
+    pt: "xs"
+  }, ___EmotionJSX(Tabs, {
+    tabListProps: {
+      justifyContent: 'center'
+    },
+    tabPanelProps: {
+      sx: {
+        position: 'relative'
+      }
+    }
+  }, ___EmotionJSX(Tab, {
+    title: "Profile"
+  }, selectedItemId >= 0 && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(IconButton, {
+    sx: {
+      position: 'absolute',
+      top: 0,
+      right: 0
+    }
+  }, ___EmotionJSX(PencilIcon, {
+    size: 20
+  })), ___EmotionJSX(Text, {
+    sx: {
+      fontSize: 'sm',
+      fontWeight: 3,
+      lineHeight: '16px'
+    },
+    variant: "base",
+    mb: "xs"
+  }, "Full Name"), ___EmotionJSX(Text, {
+    sx: {
+      fontWeight: 0,
+      lineHeight: '18px'
+    },
+    variant: "base",
+    mb: "md"
+  }, items[selectedItemId].firstName, " ", items[selectedItemId].lastName), ___EmotionJSX(Text, {
+    sx: {
+      fontSize: 'sm',
+      fontWeight: 3,
+      lineHeight: '16px'
+    },
+    variant: "base",
+    mb: "xs"
+  }, "First Name"), ___EmotionJSX(Text, {
+    sx: {
+      fontWeight: 0,
+      lineHeight: '18px'
+    },
+    variant: "base",
+    mb: "md"
+  }, items[selectedItemId].firstName), ___EmotionJSX(Text, {
+    sx: {
+      fontSize: 'sm',
+      fontWeight: 3,
+      lineHeight: '16px'
+    },
+    variant: "base",
+    mb: "xs"
+  }, "Last Name"), ___EmotionJSX(Text, {
+    sx: {
+      fontWeight: 0,
+      lineHeight: '18px'
+    },
+    variant: "base",
+    mb: "md"
+  }, items[selectedItemId].lastName), ___EmotionJSX(Text, {
+    sx: {
+      fontSize: 'sm',
+      fontWeight: 3,
+      lineHeight: '16px'
+    },
+    variant: "base",
+    mb: "xs"
+  }, "Email"), ___EmotionJSX(Text, {
+    sx: {
+      fontWeight: 0,
+      lineHeight: '18px'
+    },
+    variant: "base",
+    mb: "md"
+  }, items[selectedItemId].email))), ___EmotionJSX(Tab, {
+    title: "Group Memberships"
+  }, ___EmotionJSX(Text, null, "Group Memberships")), ___EmotionJSX(Tab, {
+    title: "Account Info"
+  }, ___EmotionJSX(Text, null, "Account Info"))))))));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.24.1-alpha.3",
+  "version": "1.25.0-alpha.0",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",
@@ -36,6 +36,7 @@
     "@emotion/babel-preset-css-prop": "^11.2.0",
     "@emotion/cache": "^11.4.0",
     "@emotion/eslint-plugin": "^11.2.0",
+    "@faker-js/faker": "^7.1.0",
     "@storybook/addon-a11y": "^6.4.19",
     "@storybook/addon-actions": "^6.4.19",
     "@storybook/addon-console": "^1.2.3",
@@ -57,7 +58,6 @@
     "eslint-plugin-jest-dom": "^3.9.0",
     "eslint-plugin-react-hooks": "^2.5.1",
     "eslint-plugin-testing-library": "^4.6.0",
-    "faker": "5.1.0",
     "jest-axe": "^5.0.1",
     "jest-emotion": "^11.0.0",
     "mutationobserver-shim": "^0.3.7",