@pingux/astro 2.39.0 → 2.40.0-alpha.1

package/lib/components/TreeView/TreeViewRow.js

@@ -1,3 +1,12 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["title", "mainIcon", "lastIcon", "item", "items", "isExpanded", "isDragging", "onKeyDown"];
+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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(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; }
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
@@ -6,23 +15,21 @@ 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 _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["title", "mainIcon", "lastIcon", "item", "items", "isExpanded", "isSelected", "isDisabled", "isParentFocused", "iconButtonProps"];
-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, { forwardRef, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import FolderIcon from '@pingux/mdi-react/FolderIcon';
 import LockIcon from '@pingux/mdi-react/LockIcon';
 import MenuDownIcon from '@pingux/mdi-react/MenuDownIcon';
 import MenuRight from '@pingux/mdi-react/MenuRightIcon';
-import { useHover, usePress } from '@react-aria/interactions';
+import { useDraggableItem, useDroppableItem } from '@react-aria/dnd';
+import { useFocusRing } from '@react-aria/focus';
+import { useHover } from '@react-aria/interactions';
+import { useOption } from '@react-aria/listbox';
 import { mergeProps } from '@react-aria/utils';
 import PropTypes from 'prop-types';
 import { useTreeViewContext } from '../../context/TreeViewContext';
 import { useStatusClasses } from '../../hooks';
 import { Box, Icon, IconButtonToggle, Text } from '../../index';
+import { addRefToArrayHelper, removeRefFromArrayHelper } from './TreeViewSection';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TreeViewRow = /*#__PURE__*/forwardRef(function (props, ref) {
   var title = props.title,
@@ -33,10 +40,8 @@ var TreeViewRow = /*#__PURE__*/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 = _objectWithoutProperties(props, _excluded);
   var treeRowRef = useRef();
   /* istanbul ignore next */
@@ -46,34 +51,112 @@ var TreeViewRow = /*#__PURE__*/forwardRef(function (props, ref) {
   var key = item.key;
   var _useTreeViewContext = 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 addRefToArrayHelper(prev, thisKey, thisRef);
+    });
+  };
+  var removeRefFromArray = function removeRefFromArray() {
+    setRefs(function (prev) {
+      return removeRefFromArrayHelper(prev, key);
+    });
+  };
+
+  // this runs on mount
+  useEffect(function () {
+    addRefToArray(key, treeRowRef);
+  }, []);
+
+  // cleanup, that runs on dismount.
+  useEffect(function () {
+    return function () {
+      return removeRefFromArray(key, refArray);
+    };
+  }, []);
   var _useHover = 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 = 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 = usePress(_objectSpread(_objectSpread({}, others), {}, {
-      ref: treeRowRef,
-      onPress: pressRow
-    })),
-    isPressed = _usePress.isPressed,
-    pressProps = _usePress.pressProps;
+  var _useDroppableItem = useDroppableItem({
+      target: {
+        type: 'item',
+        key: item.key,
+        dropPosition: 'on'
+      }
+    }, dropState, treeRowRef),
+    dropProps = _useDroppableItem.dropProps,
+    isDropTarget = _useDroppableItem.isDropTarget;
+  var _useDraggableItem = useDraggableItem({
+      hasDragButton: true,
+      key: item.key
+    }, dragState),
+    dragProps = _useDraggableItem.dragProps;
+  var _useFocusRing = useFocusRing(),
+    focusProps = _useFocusRing.focusProps,
+    isFocused = _useFocusRing.isFocused;
+  var _useFocusRing2 = 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 = _findInstanceProperty(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 && _includesInstanceProperty(_foundTargetItem$pare).call(_foundTargetItem$pare, keyBeingDragged) || foundTargetItem.key === keyBeingDragged || _includesInstanceProperty(_context = _Array$from(state.disabledKeys)).call(_context, foundTargetItem.key)) {
+      return false;
+    }
+    if (isDropTarget) {
+      return true;
+    }
+    return false;
+  };
+  var isValidDropTarget = useMemo(function () {
+    return validateDropTarget();
+  }, [targetKey, isDropTarget]);
   var _useStatusClasses = useStatusClasses('', {
       isHovered: isHovered,
       isSelected: isSelected,
       isExpanded: isExpanded,
-      isPressed: isPressed,
-      isDisabled: isDisabled
+      isDisabled: isDisabled,
+      isDragging: isDragging,
+      isDropTarget: isValidDropTarget,
+      isFocused: isFocused
     }),
     classNames = _useStatusClasses.classNames;
-  var mergedProps = mergeProps(hoverProps, pressProps, others);
+  var mergedProps = mergeProps(hoverProps, others, optionProps, dragProps, dropProps, focusProps, focusWithinProps, {
+    onFocus: function onFocus() {
+      setLastFocusedItem(key);
+    }
+  });
   return ___EmotionJSX(Box, _extends({
     ref: treeRowRef,
     isRow: true,
@@ -85,10 +168,20 @@ var TreeViewRow = /*#__PURE__*/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 && ___EmotionJSX(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 && ___EmotionJSX(IconButtonToggle, {
     onToggle: pressIcon,
     isToggled: isExpanded,
     defaultIcon: MenuRight,
@@ -97,12 +190,11 @@ var TreeViewRow = /*#__PURE__*/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
     })
   }), ___EmotionJSX(Box, {
     isRow: true,
@@ -112,7 +204,8 @@ var TreeViewRow = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "treeView.treeRow",
     sx: !items && {
       ml: '36px'
-    }
+    },
+    onClick: pressRow
   }, ___EmotionJSX(Icon, {
     color: "focus",
     icon: mainIcon,
@@ -131,14 +224,12 @@ var TreeViewRow = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 TreeViewRow.propTypes = {
   isSelected: PropTypes.bool,
+  isDragging: PropTypes.bool,
+  onKeyDown: PropTypes.func,
   isDisabled: PropTypes.bool,
   isExpanded: PropTypes.bool,
-  isParentFocused: PropTypes.bool,
   title: PropTypes.string,
   items: PropTypes.arrayOf(PropTypes.shape({})),
-  iconButtonProps: PropTypes.shape({
-    onPress: PropTypes.func
-  }),
   item: PropTypes.shape({
     key: PropTypes.string
   }),

package/lib/components/TreeView/TreeViewSection.js

@@ -1,17 +1,14 @@
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _someInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/some";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
-import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
-import { useFocusRing } from '@react-aria/focus';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { useOption } from '@react-aria/listbox';
-import { mergeProps } from '@react-aria/utils';
 import PropTypes from 'prop-types';
 import { useTreeViewContext } from '../../context/TreeViewContext';
-import { useStatusClasses } from '../../hooks';
 import { Box, TreeViewItem } from '../../index';
+import InsertionIndicator from './InsertionIndicator';
 import { SectionOrItemRender } from './TreeView';
 import { sectionPressHandlers } from './TreeViewKeyboardDelegate';
 import TreeViewRow from './TreeViewRow';
@@ -59,12 +56,11 @@ export var onKeyDownSection = function onKeyDownSection(e, state, key, tree, isS
       }
       break;
     case 40:
-      sectionPressHandlers.onDownPress(e, key, refArray, flatKeyArray);
       e.preventDefault();
       e.stopPropagation();
+      sectionPressHandlers.onDownPress(e, key, refArray, flatKeyArray);
       break;
     default:
-      /* istanbul ignore next */
       break;
   }
 };
@@ -113,85 +109,48 @@ var TreeViewSection = /*#__PURE__*/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 = useOption({
       key: key
     }, state, treeSectionRef),
-    optionProps = _useOption.optionProps,
-    isDisabled = _useOption.isDisabled,
-    isSelected = _useOption.isSelected;
-  var _useFocusRing = useFocusRing(),
-    focusProps = _useFocusRing.focusProps,
-    isFocused = _useFocusRing.isFocused;
-  var _useFocusRing2 = 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
-  useEffect(function () {
-    // this  runs on mount
-    addRefToArray(key, treeSectionRef);
-    return function () {
-      // this runs on cleanup
-      removeRefFromArray(key, refArray);
-    };
-  }, []);
-  var mergedProps = mergeProps(focusPropsWithin, focusProps, optionProps, {
-    onFocus: function onFocus() {
-      return setLastFocusedItem(key);
-    }
-  });
-  var _useStatusClasses = useStatusClasses('', {
-      isFocused: isFocused
-    }),
-    classNames = _useStatusClasses.classNames;
-  return ___EmotionJSX(Box, _extends({
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(InsertionIndicator, {
+    target: {
+      type: 'item',
+      key: item.key,
+      dropPosition: 'before'
+    },
+    dropState: dropState
+  }), ___EmotionJSX(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
-  }), ___EmotionJSX(TreeViewRow, {
+    "aria-posinset": position + 1
+  }, ___EmotionJSX(TreeViewRow, {
     item: item,
     title: title,
     items: items,
+    isDragging: isDragging,
     isExpanded: isExpanded,
-    isSelected: isSelected,
-    isDisabled: isDisabled,
-    isParentFocused: isFocusedWithin
+    onKeyDown: onKeyDownFunction
   }), isExpanded && ___EmotionJSX(Box, {
     role: "rowgroup",
     key: "".concat(item.key, " ul"),
@@ -202,8 +161,8 @@ var TreeViewSection = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     }
   }, _mapInstanceProperty(_context3 = _Array$from(items)).call(_context3, function (_item, _index) {
-    var _item$value$items;
-    return SectionOrItemRender(((_item$value$items = _item.value.items) === null || _item$value$items === void 0 ? void 0 : _item$value$items.length) > 0, ___EmotionJSX(TreeViewSection, {
+    var _item$children;
+    return SectionOrItemRender(((_item$children = _item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) > 0, ___EmotionJSX(TreeViewSection, {
       item: _item,
       items: _item.children,
       title: _item.value.title,
@@ -221,7 +180,14 @@ var TreeViewSection = /*#__PURE__*/forwardRef(function (props, ref) {
       position: _index,
       setSize: items.length
     }));
-  })));
+  }))), ___EmotionJSX(InsertionIndicator, {
+    target: {
+      type: 'item',
+      key: item.key,
+      dropPosition: 'after'
+    },
+    dropState: dropState
+  }));
 });
 TreeViewSection.propTypes = {
   items: PropTypes.arrayOf(PropTypes.shape({})),

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;