@pingux/astro 2.40.0-alpha.0 → 2.40.0-alpha.2

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

@@ -15,12 +15,16 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _reactAria = require("react-aria");
 var _CheckIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckIcon"));
 var _CloseIcon = _interopRequireDefault(require("@pingux/mdi-react/CloseIcon"));
+var _interactions = require("@react-aria/interactions");
 var _storybookAddonDesigns = require("storybook-addon-designs");
+var _hooks = require("../hooks");
 var _index = require("../index");
 var _figmaLinks = require("../utils/designUtils/figmaLinks");
 var _react2 = require("@emotion/react");
@@ -50,6 +54,14 @@ var inputProps = {
   ariaLabel: 'Example aria label'
 };
 var sx = {
+  containerFocused: {
+    padding: 0,
+    position: 'relative',
+    borderColor: 'accent.60',
+    borderStyle: 'solid',
+    borderRadius: '3px 2px 2px 3px',
+    borderWidth: '1px'
+  },
   editablePreview: {
     whiteSpace: 'pre-line',
     width: '100%',
@@ -63,37 +75,61 @@ var sx = {
     fontSize: 'md',
     fontWeight: 1,
     lineHeight: '18px',
+    '&:hover': {
+      cursor: 'pointer',
+      bg: 'accent.95'
+    },
     '&:focus': {
       outline: 'none',
-      boxShadow: 'focus',
+      borderRadius: '2px',
       borderColor: 'active',
+      borderWidth: '2px',
+      borderStyle: 'solid',
+      paddingLeft: '3px',
+      paddingBottom: '4px'
+    },
+    '&.is-pressed': {
       borderWidth: '1px',
-      borderStyle: 'solid'
+      paddingLeft: '4px',
+      paddingBottom: 'xs'
     }
   },
   editableInputWrapper: {
-    marginRight: '30px',
-    flexGrow: 1
+    marginRight: '36px',
+    flexGrow: 1,
+    '&.is-focused textarea': {
+      outline: 'none'
+    },
+    '& label': {
+      margin: 0
+    },
+    '& textarea': {
+      minHeight: '45px',
+      height: '45px',
+      padding: '13px 35px 15px 18px',
+      lineHeight: '100%',
+      resize: 'vertical'
+    }
   },
   editableInpuTextArea: {
     maxHeight: '150px'
   },
   editableControlWrapper: {
     position: 'absolute',
-    right: '0',
-    top: '27.5%',
+    right: '5px',
+    top: 'calc(50% - 13px)',
     alignItems: 'center',
     justifyContent: 'space-between'
   },
   editableControlIconButton: {
-    marginRight: 'md',
+    marginRight: '20px',
     width: '20px',
     height: '20px'
   }
 };
 var Default = function Default() {
   return (0, _react2.jsx)(Editable, {
-    value: "Some value..."
+    value: "Inline Editable text"
   }, (0, _react2.jsx)(EditablePreview, null), (0, _react2.jsx)(EditableInput, {
     inputProps: inputProps
   }), (0, _react2.jsx)(EditableControl, {
@@ -118,6 +154,7 @@ var Editable = function Editable(props) {
     isEditing = props.isEditing;
   var editableContextValue = {
     isEditing: isEditing || false,
+    isFocused: false,
     prevValue: '',
     value: value || ''
   };
@@ -126,7 +163,8 @@ var Editable = function Editable(props) {
     editableContext = _useState2[0],
     setEditableContext = _useState2[1];
   return (0, _react2.jsx)(_index.Box, {
-    sx: {
+    sx: editableContext.isEditing && editableContext.isFocused ? sx.containerFocused : {
+      padding: '1px',
       position: 'relative'
     }
   }, (0, _react2.jsx)(EditableAreaProvider, {
@@ -148,6 +186,12 @@ var EditablePreview = function EditablePreview() {
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     hasFocus = _useState4[0],
     setFocus = _useState4[1];
+  var editablePreview = (0, _react.useRef)(null);
+  var _usePress = (0, _interactions.usePress)({
+      ref: editablePreview
+    }),
+    pressProps = _usePress.pressProps,
+    isPressed = _usePress.isPressed;
   var editablePreviewDynamicSx = {
     backgroundColor: hasFocus ? 'accent.95' : 'white',
     borderBottom: editableContext.isEditing ? '0px' : '1px dashed',
@@ -155,6 +199,10 @@ var EditablePreview = function EditablePreview() {
       background: editableContext.isEditing ? 'white' : 'accent.95'
     }
   };
+  var _useStatusClasses = (0, _hooks.useStatusClasses)('', {
+      isPressed: isPressed
+    }),
+    classNames = _useStatusClasses.classNames;
   (0, _react.useEffect)(function () {
     if (hasFocus && editableContext.isEditing) {
       setFocus(false);
@@ -172,7 +220,8 @@ var EditablePreview = function EditablePreview() {
       }));
     }
   };
-  return (0, _react2.jsx)(_index.Box, {
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, pressProps, {
+    ref: editablePreview,
     tabIndex: editableContext.isEditing ? '-1' : '0',
     display: editableContext.isEditing ? 'none' : 'flex',
     "aria-hidden": editableContext.isEditing,
@@ -187,8 +236,9 @@ var EditablePreview = function EditablePreview() {
       return setFocus(false);
     },
     placeholder: "Click or press enter to edit text",
+    className: classNames,
     sx: _objectSpread(_objectSpread({}, editablePreviewDynamicSx), sx.editablePreview)
-  }, editableContext.value);
+  }), editableContext.value);
 };
 
 /**
@@ -212,6 +262,14 @@ var EditableInput = function EditableInput(props) {
     _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
     editingValue = _useState8[0],
     setEditingValue = _useState8[1];
+  var _useFocusRing = (0, _reactAria.useFocusRing)(),
+    focusProps = _useFocusRing.focusProps,
+    isFocusVisible = _useFocusRing.isFocusVisible;
+  (0, _react.useEffect)(function () {
+    setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
+      isFocused: isFocusVisible
+    }));
+  }, [isFocusVisible]);
   (0, _react.useEffect)(function () {
     setEditingValue(editableContext.value);
   }, [editableContext.value]);
@@ -245,12 +303,18 @@ var EditableInput = function EditableInput(props) {
       }));
     }
   };
+  var _useStatusClasses2 = (0, _hooks.useStatusClasses)('', {
+      isFocused: isFocusVisible
+    }),
+    classNames = _useStatusClasses2.classNames;
   return (0, _react2.jsx)(_index.Box, {
     display: editableContext.isEditing ? 'flex' : 'none',
     "aria-hidden": !editableContext.isEditing,
+    className: classNames,
     sx: sx.editableInputWrapper
-  }, (0, _react2.jsx)(_index.TextAreaField, {
-    rows: 1,
+  }, (0, _react2.jsx)(_index.TextAreaField, (0, _extends2["default"])({
+    rows: 1
+  }, focusProps, {
     ref: editableInput,
     role: "textbox",
     contenteditable: "true",
@@ -259,9 +323,8 @@ var EditableInput = function EditableInput(props) {
     onKeyDown: handleKeyDown,
     value: editingValue,
     "aria-label": ariaLabel,
-    sx: sx.editableInpuTextArea,
-    isUnresizable: true
-  }));
+    sx: sx.editableInpuTextArea
+  })));
 };
 
 /**

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

@@ -10,11 +10,11 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.LabelValuePairs = exports.EditPanel = exports.DisplayPanel = exports.ColorBlockButton = exports.AddAttributeButton = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactStately = require("react-stately");
+var _ChevronRightIcon = _interopRequireDefault(require("@pingux/mdi-react/ChevronRightIcon"));
 var _PencilIcon = _interopRequireDefault(require("@pingux/mdi-react/PencilIcon"));
 var _PlusIcon = _interopRequireDefault(require("@pingux/mdi-react/PlusIcon"));
 var _hooks = require("../hooks");
@@ -107,12 +107,46 @@ var data = {
   }
 };
 var OverlayWrapper = function OverlayWrapper(_ref) {
-  var children = _ref.children;
+  var _context, _context2, _context3;
+  var children = _ref.children,
+    isEditPanel = _ref.isEditPanel;
   var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)({
       isDefaultOpen: true
     }),
     state = _useOverlayPanelState.state;
   var triggerRef = (0, _react.useRef)();
+  var personalInfo = data.personalInfo;
+  var fields = personalInfo.fields;
+  var renderBreadcrumbs = (0, _react2.jsx)(_index.Breadcrumbs, {
+    icon: _ChevronRightIcon["default"]
+  }, (0, _react2.jsx)(_index.Item, {
+    "aria-label": personalInfo.label,
+    href: "https://www.pingidentity.com",
+    key: personalInfo.key,
+    variant: "buttons.link"
+  }, (0, _concat["default"])(_context = "".concat(fields[0].value, " ")).call(_context, fields[1].value)), (0, _react2.jsx)(_index.Item, {
+    "aria-label": "Edit",
+    key: "editKey",
+    variant: "buttons.link"
+  }, "Edit"));
+  var image = {
+    src: _UserImage["default"],
+    alt: 'user image'
+  };
+  var panelHeaderProps = isEditPanel ? {
+    data: {
+      image: image
+    },
+    slots: {
+      rightOfData: renderBreadcrumbs
+    }
+  } : {
+    data: {
+      image: image,
+      text: (0, _concat["default"])(_context2 = "".concat(fields[0].value, " ")).call(_context2, fields[1].value),
+      subtext: (0, _concat["default"])(_context3 = "".concat(fields[0].value.toLowerCase())).call(_context3, fields[1].value.toLowerCase())
+    }
+  };
   return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
     ref: triggerRef,
     onPress: state.open
@@ -121,21 +155,18 @@ var OverlayWrapper = function OverlayWrapper(_ref) {
     isTransitioning: state.isTransitioning,
     size: "large",
     p: "0"
-  }, (0, _react2.jsx)(_index.PanelHeader, {
-    data: {
-      image: {
-        src: _UserImage["default"],
-        alt: 'user image'
-      },
-      text: data.personalInfo.fields[0].value,
-      subtext: data.personalInfo.fields[1].value
-    }
-  }, (0, _react2.jsx)(_index.PanelHeaderSwitchField, null), (0, _react2.jsx)(_index.PanelHeaderMenu, null), (0, _react2.jsx)(_index.PanelHeaderCloseButton, {
+  }, (0, _react2.jsx)(_index.PanelHeader, panelHeaderProps, !isEditPanel && (0, _react2.jsx)(_index.PanelHeaderSwitchField, null), !isEditPanel && (0, _react2.jsx)(_index.PanelHeaderMenu, null, (0, _react2.jsx)(_index.Item, {
+    key: "enable"
+  }, "Enable user"), (0, _react2.jsx)(_index.Item, {
+    key: "disable"
+  }, "Disable user"), (0, _react2.jsx)(_index.Item, {
+    key: "delete"
+  }, "Delete user")), (0, _react2.jsx)(_index.PanelHeaderCloseButton, {
     onPress: state.close
   })), children));
 };
 var DisplayPanel = function DisplayPanel() {
-  var _context, _context2;
+  var _context4, _context5;
   var renderProfileTab = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     gap: "md",
@@ -149,13 +180,13 @@ var DisplayPanel = function DisplayPanel() {
     isRow: true,
     justifyContent: "space-between"
   }, (0, _react2.jsx)(_index.AccordionGroup, {
-    defaultExpandedKeys: (0, _map["default"])(_context = (0, _keys["default"])(data)).call(_context, function (item) {
+    defaultExpandedKeys: (0, _map["default"])(_context4 = (0, _keys["default"])(data)).call(_context4, function (item) {
       return data[item].key;
     }),
     labelHeadingTag: "h2"
-  }, (0, _map["default"])(_context2 = (0, _keys["default"])(data)).call(_context2, function (item) {
-    var _context3;
-    return (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _map["default"])(_context5 = (0, _keys["default"])(data)).call(_context5, function (item) {
+    var _context6;
+    return (0, _react2.jsx)(_index.Item, {
       "data-id": data[item].label,
       key: data[item].key,
       label: data[item].label,
@@ -173,7 +204,7 @@ var DisplayPanel = function DisplayPanel() {
     }), data[item].badges && (0, _react2.jsx)(_index.Box, {
       isRow: true,
       gap: "sm"
-    }, (0, _map["default"])(_context3 = data[item].badges).call(_context3, function (badge) {
+    }, (0, _map["default"])(_context6 = data[item].badges).call(_context6, function (badge) {
       return (0, _react2.jsx)(_index.Badge, {
         label: badge,
         variant: "defaultBadge",
@@ -366,8 +397,10 @@ var editData = {
   }
 };
 var EditPanel = function EditPanel() {
-  var _context4, _context5, _context6;
-  return (0, _react2.jsx)(OverlayWrapper, null, (0, _react2.jsx)(_index.Box, {
+  var _context7, _context8, _context9;
+  return (0, _react2.jsx)(OverlayWrapper, {
+    isEditPanel: true
+  }, (0, _react2.jsx)(_index.Box, {
     p: "lg",
     pb: "0"
   }, (0, _react2.jsx)(_index.Box, {
@@ -382,16 +415,16 @@ var EditPanel = function EditPanel() {
     label: "Population",
     isRequired: true,
     defaultSelectedKey: "population"
-  }, (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _react2.jsx)(_index.Item, {
     key: "population"
   }, "Denver"))), (0, _react2.jsx)(_index.AccordionGroup, {
-    defaultExpandedKeys: (0, _concat["default"])(_context4 = []).call(_context4, (0, _map["default"])(_context5 = (0, _keys["default"])(editData)).call(_context5, function (item) {
+    defaultExpandedKeys: (0, _concat["default"])(_context7 = []).call(_context7, (0, _map["default"])(_context8 = (0, _keys["default"])(editData)).call(_context8, function (item) {
       return editData[item].key;
     }), ['preferencesKey', 'customAttributesKey', 'jsonAttributesKey']),
     labelHeadingTag: "h2"
-  }, (0, _map["default"])(_context6 = (0, _keys["default"])(editData)).call(_context6, function (item) {
-    var _context7;
-    return (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _map["default"])(_context9 = (0, _keys["default"])(editData)).call(_context9, function (item) {
+    var _context10;
+    return (0, _react2.jsx)(_index.Item, {
       "data-id": editData[item].label,
       key: editData[item].key,
       label: editData[item].label,
@@ -404,7 +437,7 @@ var EditPanel = function EditPanel() {
       previewHeight: 40,
       previewWidth: 40,
       previewImage: _UserImage["default"]
-    }), (0, _map["default"])(_context7 = editData[item].fields).call(_context7, function (_ref5) {
+    }), (0, _map["default"])(_context10 = editData[item].fields).call(_context10, function (_ref5) {
       var label = _ref5.label,
         value = _ref5.value,
         slot = _ref5.slot;
@@ -415,7 +448,7 @@ var EditPanel = function EditPanel() {
         defaultValue: value
       }), slot);
     })));
-  }), (0, _react2.jsx)(_reactStately.Item, {
+  }), (0, _react2.jsx)(_index.Item, {
     "data-id": "preferences",
     key: "preferencesKey",
     label: "Preferences",
@@ -426,19 +459,19 @@ var EditPanel = function EditPanel() {
   }, (0, _react2.jsx)(_index.SelectField, {
     label: "Preferred Language",
     defaultSelectedKey: "language"
-  }, (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _react2.jsx)(_index.Item, {
     key: "language"
   }, "Select a Language")), (0, _react2.jsx)(_index.SelectField, {
     label: "Locale",
     defaultSelectedKey: "language"
-  }, (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _react2.jsx)(_index.Item, {
     key: "language"
   }, "Select a locale")), (0, _react2.jsx)(_index.SelectField, {
     label: "Timezone",
     defaultSelectedKey: "language"
-  }, (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _react2.jsx)(_index.Item, {
     key: "language"
-  }, "Select a timezone")))), (0, _react2.jsx)(_reactStately.Item, {
+  }, "Select a timezone")))), (0, _react2.jsx)(_index.Item, {
     "data-id": "customAttributes",
     key: "customAttributesKey",
     label: "Custom Attributes",
@@ -447,7 +480,7 @@ var EditPanel = function EditPanel() {
     fontWeight: "-1",
     fontSize: "md",
     textAlign: "center"
-  }, "Click + Add to select a custom attribute")), (0, _react2.jsx)(_reactStately.Item, {
+  }, "Click + Add to select a custom attribute")), (0, _react2.jsx)(_index.Item, {
     "data-id": "jsonAttributes",
     key: "jsonAttributesKey",
     label: "JSON Attributes",

package/lib/recipes/InlineEditing.stories.js

@@ -6,14 +6,18 @@ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 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 _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 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, { createContext, useContext, useEffect, useRef, useState } from 'react';
+import { useFocusRing } from 'react-aria';
 import CheckIcon from '@pingux/mdi-react/CheckIcon';
 import CloseIcon from '@pingux/mdi-react/CloseIcon';
+import { usePress } from '@react-aria/interactions';
 import { withDesign } from 'storybook-addon-designs';
+import { useStatusClasses } from '../hooks';
 import { Box, Icon, IconButton, TextAreaField } from '../index';
 import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -38,6 +42,14 @@ var inputProps = {
   ariaLabel: 'Example aria label'
 };
 var sx = {
+  containerFocused: {
+    padding: 0,
+    position: 'relative',
+    borderColor: 'accent.60',
+    borderStyle: 'solid',
+    borderRadius: '3px 2px 2px 3px',
+    borderWidth: '1px'
+  },
   editablePreview: {
     whiteSpace: 'pre-line',
     width: '100%',
@@ -51,37 +63,61 @@ var sx = {
     fontSize: 'md',
     fontWeight: 1,
     lineHeight: '18px',
+    '&:hover': {
+      cursor: 'pointer',
+      bg: 'accent.95'
+    },
     '&:focus': {
       outline: 'none',
-      boxShadow: 'focus',
+      borderRadius: '2px',
       borderColor: 'active',
+      borderWidth: '2px',
+      borderStyle: 'solid',
+      paddingLeft: '3px',
+      paddingBottom: '4px'
+    },
+    '&.is-pressed': {
       borderWidth: '1px',
-      borderStyle: 'solid'
+      paddingLeft: '4px',
+      paddingBottom: 'xs'
     }
   },
   editableInputWrapper: {
-    marginRight: '30px',
-    flexGrow: 1
+    marginRight: '36px',
+    flexGrow: 1,
+    '&.is-focused textarea': {
+      outline: 'none'
+    },
+    '& label': {
+      margin: 0
+    },
+    '& textarea': {
+      minHeight: '45px',
+      height: '45px',
+      padding: '13px 35px 15px 18px',
+      lineHeight: '100%',
+      resize: 'vertical'
+    }
   },
   editableInpuTextArea: {
     maxHeight: '150px'
   },
   editableControlWrapper: {
     position: 'absolute',
-    right: '0',
-    top: '27.5%',
+    right: '5px',
+    top: 'calc(50% - 13px)',
     alignItems: 'center',
     justifyContent: 'space-between'
   },
   editableControlIconButton: {
-    marginRight: 'md',
+    marginRight: '20px',
     width: '20px',
     height: '20px'
   }
 };
 export var Default = function Default() {
   return ___EmotionJSX(Editable, {
-    value: "Some value..."
+    value: "Inline Editable text"
   }, ___EmotionJSX(EditablePreview, null), ___EmotionJSX(EditableInput, {
     inputProps: inputProps
   }), ___EmotionJSX(EditableControl, {
@@ -105,6 +141,7 @@ var Editable = function Editable(props) {
     isEditing = props.isEditing;
   var editableContextValue = {
     isEditing: isEditing || false,
+    isFocused: false,
     prevValue: '',
     value: value || ''
   };
@@ -113,7 +150,8 @@ var Editable = function Editable(props) {
     editableContext = _useState2[0],
     setEditableContext = _useState2[1];
   return ___EmotionJSX(Box, {
-    sx: {
+    sx: editableContext.isEditing && editableContext.isFocused ? sx.containerFocused : {
+      padding: '1px',
       position: 'relative'
     }
   }, ___EmotionJSX(EditableAreaProvider, {
@@ -135,6 +173,12 @@ var EditablePreview = function EditablePreview() {
     _useState4 = _slicedToArray(_useState3, 2),
     hasFocus = _useState4[0],
     setFocus = _useState4[1];
+  var editablePreview = useRef(null);
+  var _usePress = usePress({
+      ref: editablePreview
+    }),
+    pressProps = _usePress.pressProps,
+    isPressed = _usePress.isPressed;
   var editablePreviewDynamicSx = {
     backgroundColor: hasFocus ? 'accent.95' : 'white',
     borderBottom: editableContext.isEditing ? '0px' : '1px dashed',
@@ -142,6 +186,10 @@ var EditablePreview = function EditablePreview() {
       background: editableContext.isEditing ? 'white' : 'accent.95'
     }
   };
+  var _useStatusClasses = useStatusClasses('', {
+      isPressed: isPressed
+    }),
+    classNames = _useStatusClasses.classNames;
   useEffect(function () {
     if (hasFocus && editableContext.isEditing) {
       setFocus(false);
@@ -159,7 +207,8 @@ var EditablePreview = function EditablePreview() {
       }));
     }
   };
-  return ___EmotionJSX(Box, {
+  return ___EmotionJSX(Box, _extends({}, pressProps, {
+    ref: editablePreview,
     tabIndex: editableContext.isEditing ? '-1' : '0',
     display: editableContext.isEditing ? 'none' : 'flex',
     "aria-hidden": editableContext.isEditing,
@@ -174,8 +223,9 @@ var EditablePreview = function EditablePreview() {
       return setFocus(false);
     },
     placeholder: "Click or press enter to edit text",
+    className: classNames,
     sx: _objectSpread(_objectSpread({}, editablePreviewDynamicSx), sx.editablePreview)
-  }, editableContext.value);
+  }), editableContext.value);
 };
 
 /**
@@ -199,6 +249,14 @@ var EditableInput = function EditableInput(props) {
     _useState8 = _slicedToArray(_useState7, 2),
     editingValue = _useState8[0],
     setEditingValue = _useState8[1];
+  var _useFocusRing = useFocusRing(),
+    focusProps = _useFocusRing.focusProps,
+    isFocusVisible = _useFocusRing.isFocusVisible;
+  useEffect(function () {
+    setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
+      isFocused: isFocusVisible
+    }));
+  }, [isFocusVisible]);
   useEffect(function () {
     setEditingValue(editableContext.value);
   }, [editableContext.value]);
@@ -232,12 +290,18 @@ var EditableInput = function EditableInput(props) {
       }));
     }
   };
+  var _useStatusClasses2 = useStatusClasses('', {
+      isFocused: isFocusVisible
+    }),
+    classNames = _useStatusClasses2.classNames;
   return ___EmotionJSX(Box, {
     display: editableContext.isEditing ? 'flex' : 'none',
     "aria-hidden": !editableContext.isEditing,
+    className: classNames,
     sx: sx.editableInputWrapper
-  }, ___EmotionJSX(TextAreaField, {
-    rows: 1,
+  }, ___EmotionJSX(TextAreaField, _extends({
+    rows: 1
+  }, focusProps, {
     ref: editableInput,
     role: "textbox",
     contenteditable: "true",
@@ -246,9 +310,8 @@ var EditableInput = function EditableInput(props) {
     onKeyDown: handleKeyDown,
     value: editingValue,
     "aria-label": ariaLabel,
-    sx: sx.editableInpuTextArea,
-    isUnresizable: true
-  }));
+    sx: sx.editableInpuTextArea
+  })));
 };
 
 /**

package/lib/recipes/PanelContent.stories.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { useRef } from 'react';
-import { Item } from 'react-stately';
+import ChevronRightIcon from '@pingux/mdi-react/ChevronRightIcon';
 import PencilIcon from '@pingux/mdi-react/PencilIcon';
 import PlusIcon from '@pingux/mdi-react/PlusIcon';
 import { useOverlayPanelState } from '../hooks';
-import { AccordionGroup, Badge, Box, Button, ButtonBar, CheckboxField, EditButton, Icon, Image, ImageUploadField, NoticeIcon, OverlayPanel, OverlayProvider, PanelHeader, PanelHeaderCloseButton, PanelHeaderMenu, PanelHeaderSwitchField, SelectField, Tab, Tabs, Text, TextField } from '../index';
+import { AccordionGroup, Badge, Box, Breadcrumbs, Button, ButtonBar, CheckboxField, EditButton, Icon, Image, ImageUploadField, Item, NoticeIcon, OverlayPanel, OverlayProvider, PanelHeader, PanelHeaderCloseButton, PanelHeaderMenu, PanelHeaderSwitchField, SelectField, Tab, Tabs, Text, TextField } from '../index';
 import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks.ts';
 import UserImage from '../utils/devUtils/assets/UserImage.png';
 import statuses from '../utils/devUtils/constants/statuses';
@@ -93,12 +93,46 @@ var data = {
   }
 };
 var OverlayWrapper = function OverlayWrapper(_ref) {
-  var children = _ref.children;
+  var _context, _context2, _context3;
+  var children = _ref.children,
+    isEditPanel = _ref.isEditPanel;
   var _useOverlayPanelState = useOverlayPanelState({
       isDefaultOpen: true
     }),
     state = _useOverlayPanelState.state;
   var triggerRef = useRef();
+  var personalInfo = data.personalInfo;
+  var fields = personalInfo.fields;
+  var renderBreadcrumbs = ___EmotionJSX(Breadcrumbs, {
+    icon: ChevronRightIcon
+  }, ___EmotionJSX(Item, {
+    "aria-label": personalInfo.label,
+    href: "https://www.pingidentity.com",
+    key: personalInfo.key,
+    variant: "buttons.link"
+  }, _concatInstanceProperty(_context = "".concat(fields[0].value, " ")).call(_context, fields[1].value)), ___EmotionJSX(Item, {
+    "aria-label": "Edit",
+    key: "editKey",
+    variant: "buttons.link"
+  }, "Edit"));
+  var image = {
+    src: UserImage,
+    alt: 'user image'
+  };
+  var panelHeaderProps = isEditPanel ? {
+    data: {
+      image: image
+    },
+    slots: {
+      rightOfData: renderBreadcrumbs
+    }
+  } : {
+    data: {
+      image: image,
+      text: _concatInstanceProperty(_context2 = "".concat(fields[0].value, " ")).call(_context2, fields[1].value),
+      subtext: _concatInstanceProperty(_context3 = "".concat(fields[0].value.toLowerCase())).call(_context3, fields[1].value.toLowerCase())
+    }
+  };
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
     ref: triggerRef,
     onPress: state.open
@@ -107,21 +141,18 @@ var OverlayWrapper = function OverlayWrapper(_ref) {
     isTransitioning: state.isTransitioning,
     size: "large",
     p: "0"
-  }, ___EmotionJSX(PanelHeader, {
-    data: {
-      image: {
-        src: UserImage,
-        alt: 'user image'
-      },
-      text: data.personalInfo.fields[0].value,
-      subtext: data.personalInfo.fields[1].value
-    }
-  }, ___EmotionJSX(PanelHeaderSwitchField, null), ___EmotionJSX(PanelHeaderMenu, null), ___EmotionJSX(PanelHeaderCloseButton, {
+  }, ___EmotionJSX(PanelHeader, panelHeaderProps, !isEditPanel && ___EmotionJSX(PanelHeaderSwitchField, null), !isEditPanel && ___EmotionJSX(PanelHeaderMenu, null, ___EmotionJSX(Item, {
+    key: "enable"
+  }, "Enable user"), ___EmotionJSX(Item, {
+    key: "disable"
+  }, "Disable user"), ___EmotionJSX(Item, {
+    key: "delete"
+  }, "Delete user")), ___EmotionJSX(PanelHeaderCloseButton, {
     onPress: state.close
   })), children));
 };
 export var DisplayPanel = function DisplayPanel() {
-  var _context, _context2;
+  var _context4, _context5;
   var renderProfileTab = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
     isRow: true,
     gap: "md",
@@ -135,12 +166,12 @@ export var DisplayPanel = function DisplayPanel() {
     isRow: true,
     justifyContent: "space-between"
   }, ___EmotionJSX(AccordionGroup, {
-    defaultExpandedKeys: _mapInstanceProperty(_context = _Object$keys(data)).call(_context, function (item) {
+    defaultExpandedKeys: _mapInstanceProperty(_context4 = _Object$keys(data)).call(_context4, function (item) {
       return data[item].key;
     }),
     labelHeadingTag: "h2"
-  }, _mapInstanceProperty(_context2 = _Object$keys(data)).call(_context2, function (item) {
-    var _context3;
+  }, _mapInstanceProperty(_context5 = _Object$keys(data)).call(_context5, function (item) {
+    var _context6;
     return ___EmotionJSX(Item, {
       "data-id": data[item].label,
       key: data[item].key,
@@ -159,7 +190,7 @@ export var DisplayPanel = function DisplayPanel() {
     }), data[item].badges && ___EmotionJSX(Box, {
       isRow: true,
       gap: "sm"
-    }, _mapInstanceProperty(_context3 = data[item].badges).call(_context3, function (badge) {
+    }, _mapInstanceProperty(_context6 = data[item].badges).call(_context6, function (badge) {
       return ___EmotionJSX(Badge, {
         label: badge,
         variant: "defaultBadge",
@@ -349,8 +380,10 @@ var editData = {
   }
 };
 export var EditPanel = function EditPanel() {
-  var _context4, _context5, _context6;
-  return ___EmotionJSX(OverlayWrapper, null, ___EmotionJSX(Box, {
+  var _context7, _context8, _context9;
+  return ___EmotionJSX(OverlayWrapper, {
+    isEditPanel: true
+  }, ___EmotionJSX(Box, {
     p: "lg",
     pb: "0"
   }, ___EmotionJSX(Box, {
@@ -368,12 +401,12 @@ export var EditPanel = function EditPanel() {
   }, ___EmotionJSX(Item, {
     key: "population"
   }, "Denver"))), ___EmotionJSX(AccordionGroup, {
-    defaultExpandedKeys: _concatInstanceProperty(_context4 = []).call(_context4, _mapInstanceProperty(_context5 = _Object$keys(editData)).call(_context5, function (item) {
+    defaultExpandedKeys: _concatInstanceProperty(_context7 = []).call(_context7, _mapInstanceProperty(_context8 = _Object$keys(editData)).call(_context8, function (item) {
       return editData[item].key;
     }), ['preferencesKey', 'customAttributesKey', 'jsonAttributesKey']),
     labelHeadingTag: "h2"
-  }, _mapInstanceProperty(_context6 = _Object$keys(editData)).call(_context6, function (item) {
-    var _context7;
+  }, _mapInstanceProperty(_context9 = _Object$keys(editData)).call(_context9, function (item) {
+    var _context10;
     return ___EmotionJSX(Item, {
       "data-id": editData[item].label,
       key: editData[item].key,
@@ -387,7 +420,7 @@ export var EditPanel = function EditPanel() {
       previewHeight: 40,
       previewWidth: 40,
       previewImage: UserImage
-    }), _mapInstanceProperty(_context7 = editData[item].fields).call(_context7, function (_ref5) {
+    }), _mapInstanceProperty(_context10 = editData[item].fields).call(_context10, function (_ref5) {
       var label = _ref5.label,
         value = _ref5.value,
         slot = _ref5.slot;

package/package.json

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