@pingux/astro 2.39.0 → 2.40.0-alpha.1

package/lib/cjs/components/TreeView/TreeViewRow.js

@@ -15,6 +15,9 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
@@ -23,18 +26,22 @@ var _FolderIcon = _interopRequireDefault(require("@pingux/mdi-react/FolderIcon")
 var _LockIcon = _interopRequireDefault(require("@pingux/mdi-react/LockIcon"));
 var _MenuDownIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuDownIcon"));
 var _MenuRightIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuRightIcon"));
+var _dnd = require("@react-aria/dnd");
+var _focus = require("@react-aria/focus");
 var _interactions = require("@react-aria/interactions");
+var _listbox = require("@react-aria/listbox");
 var _utils = require("@react-aria/utils");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _TreeViewContext = require("../../context/TreeViewContext");
 var _hooks = require("../../hooks");
 var _index = require("../../index");
+var _TreeViewSection = require("./TreeViewSection");
 var _react2 = require("@emotion/react");
-var _excluded = ["title", "mainIcon", "lastIcon", "item", "items", "isExpanded", "isSelected", "isDisabled", "isParentFocused", "iconButtonProps"];
+var _excluded = ["title", "mainIcon", "lastIcon", "item", "items", "isExpanded", "isDragging", "onKeyDown"];
 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; }
 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; }
+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) { (0, _defineProperty2["default"])(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; }
 var TreeViewRow = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var title = props.title,
     _props$mainIcon = props.mainIcon,
@@ -44,10 +51,8 @@ var TreeViewRow = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     item = props.item,
     items = props.items,
     isExpanded = props.isExpanded,
-    isSelected = props.isSelected,
-    isDisabled = props.isDisabled,
-    isParentFocused = props.isParentFocused,
-    iconButtonProps = props.iconButtonProps,
+    isDragging = props.isDragging,
+    _onKeyDown = props.onKeyDown,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var treeRowRef = (0, _react.useRef)();
   /* istanbul ignore next */
@@ -57,34 +62,112 @@ var TreeViewRow = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var key = item.key;
   var _useTreeViewContext = (0, _TreeViewContext.useTreeViewContext)(),
     state = _useTreeViewContext.state,
-    tree = _useTreeViewContext.tree;
+    dragState = _useTreeViewContext.dragState,
+    dropState = _useTreeViewContext.dropState,
+    refArray = _useTreeViewContext.refArray,
+    setRefs = _useTreeViewContext.setRefs,
+    tree = _useTreeViewContext.tree,
+    setLastFocusedItem = _useTreeViewContext.setLastFocusedItem,
+    lastFocusedItem = _useTreeViewContext.lastFocusedItem,
+    flatKeyArray = _useTreeViewContext.flatKeyArray,
+    targetKey = _useTreeViewContext.targetKey,
+    keyBeingDragged = _useTreeViewContext.keyBeingDragged;
+  var addRefToArray = function addRefToArray(thisKey, thisRef) {
+    setRefs(function (prev) {
+      return (0, _TreeViewSection.addRefToArrayHelper)(prev, thisKey, thisRef);
+    });
+  };
+  var removeRefFromArray = function removeRefFromArray() {
+    setRefs(function (prev) {
+      return (0, _TreeViewSection.removeRefFromArrayHelper)(prev, key);
+    });
+  };
+
+  // this runs on mount
+  (0, _react.useEffect)(function () {
+    addRefToArray(key, treeRowRef);
+  }, []);
+
+  // cleanup, that runs on dismount.
+  (0, _react.useEffect)(function () {
+    return function () {
+      return removeRefFromArray(key, refArray);
+    };
+  }, []);
   var _useHover = (0, _interactions.useHover)({}),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
-  var pressIcon = function pressIcon(e) {
+  var pressIcon = function pressIcon() {
     state.toggleKey(item.key);
-    if (iconButtonProps !== null && iconButtonProps !== void 0 && iconButtonProps.onPress) {
-      iconButtonProps.onPress(e);
-    }
   };
+  var _useOption = (0, _listbox.useOption)({
+      key: key
+    }, state, treeRowRef),
+    optionProps = _useOption.optionProps,
+    isDisabled = _useOption.isDisabled,
+    isSelected = _useOption.isSelected;
   var pressRow = function pressRow() {
+    if (isSelected) {
+      tree.setSelectedKeys([]);
+      return;
+    }
     tree.setSelectedKeys([item.key]);
   };
-  var _usePress = (0, _interactions.usePress)(_objectSpread(_objectSpread({}, others), {}, {
-      ref: treeRowRef,
-      onPress: pressRow
-    })),
-    isPressed = _usePress.isPressed,
-    pressProps = _usePress.pressProps;
+  var _useDroppableItem = (0, _dnd.useDroppableItem)({
+      target: {
+        type: 'item',
+        key: item.key,
+        dropPosition: 'on'
+      }
+    }, dropState, treeRowRef),
+    dropProps = _useDroppableItem.dropProps,
+    isDropTarget = _useDroppableItem.isDropTarget;
+  var _useDraggableItem = (0, _dnd.useDraggableItem)({
+      hasDragButton: true,
+      key: item.key
+    }, dragState),
+    dragProps = _useDraggableItem.dragProps;
+  var _useFocusRing = (0, _focus.useFocusRing)(),
+    focusProps = _useFocusRing.focusProps,
+    isFocused = _useFocusRing.isFocused;
+  var _useFocusRing2 = (0, _focus.useFocusRing)({
+      within: true
+    }),
+    focusWithinProps = _useFocusRing2.focusProps,
+    isFocusedWithin = _useFocusRing2.isFocused;
+
+  // we do not allow for items to be dropped on themselves, or on their children
+  var validateDropTarget = function validateDropTarget() {
+    var _foundTargetItem$pare, _context;
+    var foundTargetItem = (0, _find["default"])(flatKeyArray).call(flatKeyArray, function (_item) {
+      return _item.key === targetKey;
+    });
+    if (!isDropTarget || foundTargetItem !== null && foundTargetItem !== void 0 && (_foundTargetItem$pare = foundTargetItem.parentKeys) !== null && _foundTargetItem$pare !== void 0 && (0, _includes["default"])(_foundTargetItem$pare).call(_foundTargetItem$pare, keyBeingDragged) || foundTargetItem.key === keyBeingDragged || (0, _includes["default"])(_context = (0, _from["default"])(state.disabledKeys)).call(_context, foundTargetItem.key)) {
+      return false;
+    }
+    if (isDropTarget) {
+      return true;
+    }
+    return false;
+  };
+  var isValidDropTarget = (0, _react.useMemo)(function () {
+    return validateDropTarget();
+  }, [targetKey, isDropTarget]);
   var _useStatusClasses = (0, _hooks.useStatusClasses)('', {
       isHovered: isHovered,
       isSelected: isSelected,
       isExpanded: isExpanded,
-      isPressed: isPressed,
-      isDisabled: isDisabled
+      isDisabled: isDisabled,
+      isDragging: isDragging,
+      isDropTarget: isValidDropTarget,
+      isFocused: isFocused
     }),
     classNames = _useStatusClasses.classNames;
-  var mergedProps = (0, _utils.mergeProps)(hoverProps, pressProps, others);
+  var mergedProps = (0, _utils.mergeProps)(hoverProps, others, optionProps, dragProps, dropProps, focusProps, focusWithinProps, {
+    onFocus: function onFocus() {
+      setLastFocusedItem(key);
+    }
+  });
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     ref: treeRowRef,
     isRow: true,
@@ -96,10 +179,20 @@ var TreeViewRow = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         border: 'none'
       }
     },
+    variant: "treeView.rowWrapper",
     className: classNames,
     key: "".concat(key, " box"),
-    role: "gridcell"
-  }, mergedProps), (items === null || items === void 0 ? void 0 : items.length) > 0 && (0, _react2.jsx)(_index.IconButtonToggle, {
+    "data-droptarget": isDropTarget
+  }, mergedProps, {
+    role: "gridcell",
+    tabIndex: "-1"
+  }, lastFocusedItem === key && {
+    tabIndex: 0
+  }, {
+    onKeyDown: function onKeyDown(e) {
+      _onKeyDown(e);
+    }
+  }), (items === null || items === void 0 ? void 0 : items.length) > 0 && (0, _react2.jsx)(_index.IconButtonToggle, {
     onToggle: pressIcon,
     isToggled: isExpanded,
     defaultIcon: _MenuRightIcon["default"],
@@ -108,12 +201,11 @@ var TreeViewRow = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       size: 25,
       title: "".concat(title, " expand or collapse button")
     },
-    buttonProps: _objectSpread(_objectSpread({
-      'aria-label': "".concat(title, " expand or collapse button")
-    }, isParentFocused && {
+    buttonProps: _objectSpread({
+      'aria-label': "".concat(title, " expand or collapse button"),
+      tabIndex: '-1'
+    }, lastFocusedItem === key && isFocusedWithin && {
       tabIndex: 0
-    }), !isParentFocused && {
-      tabIndex: -1
     })
   }), (0, _react2.jsx)(_index.Box, {
     isRow: true,
@@ -123,7 +215,8 @@ var TreeViewRow = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "treeView.treeRow",
     sx: !items && {
       ml: '36px'
-    }
+    },
+    onClick: pressRow
   }, (0, _react2.jsx)(_index.Icon, {
     color: "focus",
     icon: mainIcon,
@@ -142,14 +235,12 @@ var TreeViewRow = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 });
 TreeViewRow.propTypes = {
   isSelected: _propTypes["default"].bool,
+  isDragging: _propTypes["default"].bool,
+  onKeyDown: _propTypes["default"].func,
   isDisabled: _propTypes["default"].bool,
   isExpanded: _propTypes["default"].bool,
-  isParentFocused: _propTypes["default"].bool,
   title: _propTypes["default"].string,
   items: _propTypes["default"].arrayOf(_propTypes["default"].shape({})),
-  iconButtonProps: _propTypes["default"].shape({
-    onPress: _propTypes["default"].func
-  }),
   item: _propTypes["default"].shape({
     key: _propTypes["default"].string
   }),

package/lib/cjs/components/TreeView/TreeViewSection.js

@@ -9,20 +9,17 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.removeRefFromArrayHelper = exports.onKeyDownSection = exports["default"] = exports.addRefToArrayHelper = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _some = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/some"));
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
 var _react = _interopRequireWildcard(require("react"));
-var _focus = require("@react-aria/focus");
 var _listbox = require("@react-aria/listbox");
-var _utils = require("@react-aria/utils");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _TreeViewContext = require("../../context/TreeViewContext");
-var _hooks = require("../../hooks");
 var _index2 = require("../../index");
+var _InsertionIndicator = _interopRequireDefault(require("./InsertionIndicator"));
 var _TreeView = require("./TreeView");
 var _TreeViewKeyboardDelegate = require("./TreeViewKeyboardDelegate");
 var _TreeViewRow = _interopRequireDefault(require("./TreeViewRow"));
@@ -72,12 +69,11 @@ var onKeyDownSection = function onKeyDownSection(e, state, key, tree, isSelected
       }
       break;
     case 40:
-      _TreeViewKeyboardDelegate.sectionPressHandlers.onDownPress(e, key, refArray, flatKeyArray);
       e.preventDefault();
       e.stopPropagation();
+      _TreeViewKeyboardDelegate.sectionPressHandlers.onDownPress(e, key, refArray, flatKeyArray);
       break;
     default:
-      /* istanbul ignore next */
       break;
   }
 };
@@ -129,85 +125,48 @@ var TreeViewSection = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     state = _useTreeViewContext.state,
     tree = _useTreeViewContext.tree,
     refArray = _useTreeViewContext.refArray,
-    setRefs = _useTreeViewContext.setRefs,
     flatKeyArray = _useTreeViewContext.flatKeyArray,
-    pageLength = _useTreeViewContext.pageLength,
-    setLastFocusedItem = _useTreeViewContext.setLastFocusedItem,
-    lastFocusedItem = _useTreeViewContext.lastFocusedItem;
+    dragState = _useTreeViewContext.dragState,
+    dropState = _useTreeViewContext.dropState,
+    pageLength = _useTreeViewContext.pageLength;
   var _useOption = (0, _listbox.useOption)({
       key: key
     }, state, treeSectionRef),
-    optionProps = _useOption.optionProps,
-    isDisabled = _useOption.isDisabled,
-    isSelected = _useOption.isSelected;
-  var _useFocusRing = (0, _focus.useFocusRing)(),
-    focusProps = _useFocusRing.focusProps,
-    isFocused = _useFocusRing.isFocused;
-  var _useFocusRing2 = (0, _focus.useFocusRing)({
-      within: true
-    }),
-    focusPropsWithin = _useFocusRing2.focusProps,
-    isFocusedWithin = _useFocusRing2.isFocused;
+    isSelected = _useOption.isSelected,
+    isDisabled = _useOption.isDisabled;
   var isExpanded = state.expandedKeys.has(key);
+  var isDragging = dragState.isDragging(item.key);
   var onKeyDownFunction = function onKeyDownFunction(e) {
-    onKeyDownSection(e, state, key, tree, isSelected, isExpanded, focusManager, flatKeyArray, refArray, pageLength, isFocused);
+    onKeyDownSection(e, state, key, tree, isSelected, isExpanded, focusManager, flatKeyArray, refArray, pageLength, true);
     if (onKeyDown) {
       onKeyDown(e, key);
     }
   };
-  var addRefToArray = function addRefToArray(thisKey, thisRef) {
-    setRefs(function (prev) {
-      return addRefToArrayHelper(prev, thisKey, thisRef);
-    });
-  };
-  var removeRefFromArray = function removeRefFromArray() {
-    setRefs(function (prev) {
-      return removeRefFromArrayHelper(prev, key);
-    });
-  };
-
-  // adds and removes refs on mount and dismount
-  (0, _react.useEffect)(function () {
-    // this  runs on mount
-    addRefToArray(key, treeSectionRef);
-    return function () {
-      // this runs on cleanup
-      removeRefFromArray(key, refArray);
-    };
-  }, []);
-  var mergedProps = (0, _utils.mergeProps)(focusPropsWithin, focusProps, optionProps, {
-    onFocus: function onFocus() {
-      return setLastFocusedItem(key);
-    }
-  });
-  var _useStatusClasses = (0, _hooks.useStatusClasses)('', {
-      isFocused: isFocused
-    }),
-    classNames = _useStatusClasses.classNames;
-  return (0, _react2.jsx)(_index2.Box, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_InsertionIndicator["default"], {
+    target: {
+      type: 'item',
+      key: item.key,
+      dropPosition: 'before'
+    },
+    dropState: dropState
+  }), (0, _react2.jsx)(_index2.Box, {
     ref: treeSectionRef,
     "aria-expanded": isExpanded,
-    "aria-disabled": isDisabled
-  }, mergedProps, {
+    "aria-disabled": isDisabled,
     role: "row",
     variant: "treeView.wrapper",
-    className: classNames,
     "aria-selected": isSelected,
+    tabIndex: "-1",
     "aria-level": level,
     "aria-setsize": setSize,
-    "aria-posinset": position + 1,
-    onKeyDown: function onKeyDown(e) {
-      return onKeyDownFunction(e);
-    },
-    tabIndex: lastFocusedItem === key ? 0 : -1
-  }), (0, _react2.jsx)(_TreeViewRow["default"], {
+    "aria-posinset": position + 1
+  }, (0, _react2.jsx)(_TreeViewRow["default"], {
     item: item,
     title: title,
     items: items,
+    isDragging: isDragging,
     isExpanded: isExpanded,
-    isSelected: isSelected,
-    isDisabled: isDisabled,
-    isParentFocused: isFocusedWithin
+    onKeyDown: onKeyDownFunction
   }), isExpanded && (0, _react2.jsx)(_index2.Box, {
     role: "rowgroup",
     key: "".concat(item.key, " ul"),
@@ -218,8 +177,8 @@ var TreeViewSection = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       }
     }
   }, (0, _map["default"])(_context3 = (0, _from["default"])(items)).call(_context3, function (_item, _index) {
-    var _item$value$items;
-    return (0, _TreeView.SectionOrItemRender)(((_item$value$items = _item.value.items) === null || _item$value$items === void 0 ? void 0 : _item$value$items.length) > 0, (0, _react2.jsx)(TreeViewSection, {
+    var _item$children;
+    return (0, _TreeView.SectionOrItemRender)(((_item$children = _item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) > 0, (0, _react2.jsx)(TreeViewSection, {
       item: _item,
       items: _item.children,
       title: _item.value.title,
@@ -237,7 +196,14 @@ var TreeViewSection = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       position: _index,
       setSize: items.length
     }));
-  })));
+  }))), (0, _react2.jsx)(_InsertionIndicator["default"], {
+    target: {
+      type: 'item',
+      key: item.key,
+      dropPosition: 'after'
+    },
+    dropState: dropState
+  }));
 });
 TreeViewSection.propTypes = {
   items: _propTypes["default"].arrayOf(_propTypes["default"].shape({})),

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",