@pingux/astro 2.105.0 → 2.106.0-alpha.0

package/lib/cjs/components/OverlayPanel/OverlayPanel.stories.d.ts

@@ -3,6 +3,6 @@ import { OverlayPanelProps } from '../../types';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 export declare const Default: StoryFn<OverlayPanelProps>;
-export declare const CustomWidth: StoryFn;
 export declare const Expandable: StoryFn;
 export declare const InnerPanel: StoryFn<OverlayPanelProps>;
+export declare const Customization: StoryFn;

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

@@ -8,24 +8,19 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.InnerPanel = exports.Expandable = exports.Default = exports.CustomWidth = void 0;
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+exports["default"] = exports.InnerPanel = exports.Expandable = exports.Default = exports.Customization = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactStately = require("react-stately");
+var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon"));
 var _ArrowCollapseIcon = _interopRequireDefault(require("@pingux/mdi-react/ArrowCollapseIcon"));
 var _ArrowTopRightBottomLeftIcon = _interopRequireDefault(require("@pingux/mdi-react/ArrowTopRightBottomLeftIcon"));
-var _ChevronRightIcon = _interopRequireDefault(require("@pingux/mdi-react/ChevronRightIcon"));
-var _CloseIcon = _interopRequireDefault(require("@pingux/mdi-react/CloseIcon"));
-var _CogIcon = _interopRequireDefault(require("@pingux/mdi-react/CogIcon"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _hooks = require("../../hooks");
 var _index = require("../../index");
-var _images = require("../../utils/devUtils/constants/images");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _panelSizes = require("../../utils/devUtils/constants/panelSizes");
-var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _OverlayPanel = _interopRequireDefault(require("./OverlayPanel.mdx"));
 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); }
@@ -72,62 +67,54 @@ var Default = function Default(_ref) {
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay is open.
-    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Box, {
+      sx: {
+        gap: '25px'
+      }
+    }, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Button, {
       ref: triggerRef,
       onPress: state.open,
-      "aria-expanded": state.isOpen
+      "aria-expanded": state.isOpen,
+      sx: {
+        maxWidth: 'fit-content'
+      }
     }, "Open Panel"), (state.isOpen || state.isTransitioning) && (0, _react2.jsx)(_index.OverlayPanel, (0, _extends2["default"])({
       isOpen: state.isOpen,
       isTransitioning: state.isTransitioning,
       state: state
     }, args, {
-      triggerRef: triggerRef
-    }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
-      onPress: function onPress() {
-        onClose(state, triggerRef);
-      },
-      "aria-expanded": state.isOpen
-    }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
-      pt: "md"
-    }, "Children render here."))))
-  );
-};
-exports.Default = Default;
-var CustomWidth = function CustomWidth() {
-  var _useOverlayPanelState2 = (0, _hooks.useOverlayPanelState)(),
-    state = _useOverlayPanelState2.state,
-    onClose = _useOverlayPanelState2.onClose;
-  var triggerRef = (0, _react.useRef)(null);
-  return (
-    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
-    // readers when an overlay opens.
-    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
-      ref: triggerRef,
-      onPress: state.open,
-      "aria-expanded": state.isOpen
-    }, "Open Panel"), (state.isOpen || state.isTransitioning) && (0, _react2.jsx)(_index.OverlayPanel, {
-      isTransitioning: state.isTransitioning,
-      isOpen: state.isOpen,
-      state: state,
       triggerRef: triggerRef,
       sx: {
-        width: '720px'
+        p: 0
+      }
+    }), (0, _react2.jsx)(_index.PanelHeader, {
+      data: {
+        icon: _AccountIcon["default"],
+        text: 'Fons Vernall',
+        subtext: 'rad_developer@pingidentity.com'
       }
-    }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
+    }, (0, _react2.jsx)(_index.PanelHeaderCloseButton, {
       onPress: function onPress() {
         onClose(state, triggerRef);
-      },
-      "aria-expanded": state.isOpen
-    }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
-      pt: "md"
-    }, "Children render here."))))
+      }
+    })), (0, _react2.jsx)(_index.Box, {
+      sx: {
+        p: 25
+      }
+    }, (0, _react2.jsx)(_index.Text, null, "Children render here.")))))
   );
 };
-exports.CustomWidth = CustomWidth;
+exports.Default = Default;
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.overlayPanel["default"]
+  }
+};
 var Expandable = function Expandable() {
-  var _useOverlayPanelState3 = (0, _hooks.useOverlayPanelState)(),
-    state = _useOverlayPanelState3.state,
-    onClose = _useOverlayPanelState3.onClose;
+  var _useOverlayPanelState2 = (0, _hooks.useOverlayPanelState)(),
+    state = _useOverlayPanelState2.state,
+    onClose = _useOverlayPanelState2.onClose;
   var triggerRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -137,229 +124,26 @@ var Expandable = function Expandable() {
     overlayPanel: {
       padding: 0,
       transition: 'width 500ms, right 500ms'
-    },
-    header: {
-      height: '110px',
-      bg: '#F7F8FD',
-      infoAndButtonsContainer: {
-        justifyContent: 'space-between',
-        padding: '20px 20px 0 20px'
-      },
-      pingOneAuthorizeContainer: {
-        gap: '18px',
-        alignItems: 'center',
-        width: 'fit-content'
-      },
-      breadcrumbsContainer: {
-        marginLeft: '78px',
-        fontSize: 'md',
-        fontWeight: 500
-      }
-    },
-    contentContainer: {
-      padding: '15px 25px 0 25px'
-    },
-    tabs: {
-      justifyContent: 'center'
-    },
-    tabPanel: {
-      height: 'calc(100vh - 255px)',
-      overflow: 'scroll'
-    },
-    switchField: {
-      rowGap: 'xs',
-      display: 'grid !important',
-      gridTemplateColumns: 'max-content auto',
-      fontSize: 'sm',
-      fontWeight: 500,
-      color: 'text.secondary',
-      '& > div:first-child': {
-        order: 2
-      }
-    },
-    colorField: {
-      width: '30px',
-      height: '20px'
-    },
-    tabContent: {
-      gap: 'md',
-      width: isExpanded ? '100%' : '400px',
-      transition: 'width 500ms'
     }
   };
-  var multivaluesFieldItems = [{
-    id: 1,
-    name: 'node 1',
-    key: 'node1'
-  }, {
-    id: 2,
-    name: 'node 2',
-    key: 'node2'
-  }];
-  var onCloseHandler = function onCloseHandler() {
-    return onClose(state, triggerRef);
+  var onCloseFunction = function onCloseFunction() {
+    onClose(state, triggerRef);
+    setIsExpanded(false);
   };
-  var _useState3 = (0, _react.useState)('#EACE91'),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    color = _useState4[0],
-    setColor = _useState4[1];
-  var handleColorChange = (0, _react.useCallback)(function (colorVal) {
-    if (typeof colorVal === 'string') {
-      setColor(colorVal);
-    } else if (colorVal.rgb) {
-      var _context, _context2, _context3;
-      var rgb = colorVal.rgb;
-      var r = rgb.r,
-        b = rgb.b,
-        g = rgb.g,
-        a = rgb.a;
-      setColor((0, _concat["default"])(_context = (0, _concat["default"])(_context2 = (0, _concat["default"])(_context3 = "rgba(".concat(r, ", ")).call(_context3, g, ", ")).call(_context2, b, ", ")).call(_context, a, ")"));
-    }
-  }, []);
-  var header = (0, _react2.jsx)(_index.Box, {
-    sx: sx.header
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    sx: sx.header.infoAndButtonsContainer
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    sx: sx.header.pingOneAuthorizeContainer
-  }, (0, _react2.jsx)(_index.Avatar, {
-    src: _images.pingImg,
-    sx: {
-      width: '40px',
-      height: '40px'
-    }
-  }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
-    variant: "bodyStrong",
-    fontSize: "md"
-  }, "PingOne Authorize"), (0, _react2.jsx)(_index.Text, {
-    variant: "subtitle",
-    fontSize: "sm"
-  }, "ID: kcdhaweyf2d"), (0, _react2.jsx)(_index.Text, {
-    variant: "subtitle",
-    fontSize: "sm"
-  }, "ConnectionID: 234UI3fu4hj4itge35553rj3ty4gyeczcb90"))), (0, _react2.jsx)(_index.Box, {
-    isRow: true
-  }, (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "settings-icon",
-    size: 20
-  }, (0, _react2.jsx)(_CogIcon["default"], null)), (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "expand-icon",
-    size: 20,
-    onPress: function onPress() {
-      return setIsExpanded(!isExpanded);
-    }
-  }, isExpanded ? (0, _react2.jsx)(_ArrowCollapseIcon["default"], null) : (0, _react2.jsx)(_ArrowTopRightBottomLeftIcon["default"], null)), (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "close-icon",
-    size: 20,
-    onPress: onCloseHandler
-  }, (0, _react2.jsx)(_CloseIcon["default"], null)))), (0, _react2.jsx)(_index.Box, {
-    sx: sx.header.breadcrumbsContainer
-  }, (0, _react2.jsx)(_index.Breadcrumbs, {
-    icon: _ChevronRightIcon["default"]
-  }, (0, _react2.jsx)(_reactStately.Item, {
-    key: "home",
-    "data-id": "home"
-  }, "Capability"), (0, _react2.jsx)(_reactStately.Item, {
-    key: "editGroups",
-    variant: "neutralText",
-    "data-id": "editGroups"
-  }, "Make Decision Request"))));
-  var generalTabContent = (0, _react2.jsx)(_index.Box, {
-    sx: sx.tabContent
-  }, (0, _react2.jsx)(_index.TextField, {
-    label: "Node Title",
-    defaultValue: "The Value of the Text Input"
-  }), (0, _react2.jsx)(_index.TextField, {
-    label: "Node Description",
-    defaultValue: "The Value of the Text Input"
-  }), (0, _react2.jsx)(_index.ColorField, {
-    value: color,
-    label: "Node Background Color",
-    buttonProps: {
-      sx: sx.colorField
-    },
-    onChange: handleColorChange
-  }), (0, _react2.jsx)(_index.SwitchField, {
-    hintText: "Example Hint",
-    labelProps: {
-      sx: sx.switchField
-    },
-    label: "Expire Authentication Token",
-    value: "expire-authentication-token"
-  }), (0, _react2.jsx)(_index.SwitchField, {
-    hintText: "Example Hint",
-    labelProps: {
-      sx: sx.switchField
-    },
-    label: "Expire Flow Instance Cache",
-    value: "expire-flow-instance-cache"
-  }), (0, _react2.jsx)(_index.MultivaluesField, {
-    items: multivaluesFieldItems,
-    label: "Expire Node Instance Cache List",
-    inputProps: {
-      hintText: 'Example Hint'
-    }
-  }, function (item) {
-    return (0, _react2.jsx)(_reactStately.Item, {
-      key: item.key,
-      "data-id": item.name
-    }, item.name);
-  }));
-  var settingsTabContent = (0, _react2.jsx)(_index.Box, {
-    sx: sx.tabContent
-  }, (0, _react2.jsx)(_index.SwitchField, {
-    hintText: "Example Hint",
-    labelProps: {
-      sx: sx.switchField
-    },
-    label: "Expire Authentication Token",
-    value: "expire-authentication-token"
-  }), (0, _react2.jsx)(_index.SwitchField, {
-    hintText: "Example Hint",
-    labelProps: {
-      sx: sx.switchField
-    },
-    label: "Expire Flow Instance Cache",
-    value: "expire-flow-instance-cache"
-  }), (0, _react2.jsx)(_index.SwitchField, {
-    hintText: "Example Hint",
-    labelProps: {
-      sx: sx.switchField
-    },
-    label: "Expire Node Instance Cache",
-    value: "expire-node-instance-cache"
-  }));
-  var schemaTabContent = (0, _react2.jsx)(_index.Box, {
-    sx: sx.tabContent
-  }, (0, _react2.jsx)(_index.TextField, {
-    hintText: "Example Hint",
-    label: "Log field Title",
-    defaultValue: "The Value of the Text Input"
-  }), (0, _react2.jsx)(_index.TextField, {
-    hintText: "Example Hint",
-    label: "Log field Description",
-    defaultValue: "The Value of the Text Input"
-  }));
-  var footer = (0, _react2.jsx)(_index.ButtonBar, {
-    sx: {
-      backgroundColor: 'background.base'
-    }
-  }, (0, _react2.jsx)(_index.Button, {
-    onPress: onCloseHandler,
-    variant: "primary"
-  }, "Save"), (0, _react2.jsx)(_index.Button, {
-    onPress: onCloseHandler,
-    variant: "link"
-  }, "Cancel"));
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
-    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Box, {
+      sx: {
+        gap: '25px'
+      }
+    }, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Button, {
       ref: triggerRef,
       onPress: state.open,
-      "aria-expanded": state.isOpen
+      "aria-expanded": state.isOpen,
+      sx: {
+        maxWidth: 'fit-content'
+      }
     }, "Open Panel"), (state.isOpen || state.isTransitioning) && (0, _react2.jsx)(_index.OverlayPanel, {
       isTransitioning: state.isTransitioning,
       isOpen: state.isOpen,
@@ -367,41 +151,40 @@ var Expandable = function Expandable() {
       triggerRef: triggerRef,
       sx: sx.overlayPanel,
       size: isExpanded ? 'full' : 'medium'
-    }, header, (0, _react2.jsx)(_index.Box, {
-      sx: sx.contentContainer
-    }, (0, _react2.jsx)(_index.Tabs, {
-      tabListProps: sx.tabs,
-      tabPanelProps: sx.tabPanel
-    }, (0, _react2.jsx)(_index.Tab, {
-      key: "tab1",
-      title: "General"
-    }, generalTabContent), (0, _react2.jsx)(_index.Tab, {
-      key: "tab2",
-      title: "Settings"
-    }, settingsTabContent), (0, _react2.jsx)(_index.Tab, {
-      key: "tab3",
-      title: "Schema"
-    }, schemaTabContent))), footer))
+    }, (0, _react2.jsx)(_index.PanelHeader, {
+      data: {
+        icon: _AccountIcon["default"],
+        text: 'Fons Vernall',
+        subtext: 'rad_developer@pingidentity.com'
+      }
+    }, (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "expand-icon",
+      size: 20,
+      onPress: function onPress() {
+        return setIsExpanded(!isExpanded);
+      }
+    }, isExpanded ? (0, _react2.jsx)(_ArrowCollapseIcon["default"], null) : (0, _react2.jsx)(_ArrowTopRightBottomLeftIcon["default"], null)), (0, _react2.jsx)(_index.PanelHeaderCloseButton, {
+      onPress: function onPress() {
+        onCloseFunction();
+      }
+    })), (0, _react2.jsx)(_index.Box, {
+      sx: {
+        p: 25
+      }
+    }, (0, _react2.jsx)(_index.Text, null, "Children render here")))))
   );
 };
 exports.Expandable = Expandable;
 var InnerPanel = function InnerPanel(_ref2) {
   var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref2), _ref2));
+  var _useOverlayPanelState3 = (0, _hooks.useOverlayPanelState)(),
+    state = _useOverlayPanelState3.state,
+    onClose = _useOverlayPanelState3.onClose;
   var _useOverlayPanelState4 = (0, _hooks.useOverlayPanelState)(),
-    state = _useOverlayPanelState4.state,
-    onClose = _useOverlayPanelState4.onClose;
-  var _useOverlayPanelState5 = (0, _hooks.useOverlayPanelState)(),
-    innerState = _useOverlayPanelState5.state,
-    onCloseInner = _useOverlayPanelState5.onClose;
+    innerState = _useOverlayPanelState4.state,
+    onCloseInner = _useOverlayPanelState4.onClose;
   var outerTriggerRef = (0, _react.useRef)(null);
   var innerTriggerRef = (0, _react.useRef)(null);
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    messagesOpen = _useState6[0],
-    setMessagesOpen = _useState6[1];
-  var toggleMessagesOpen = function toggleMessagesOpen() {
-    setMessagesOpen(!messagesOpen);
-  };
   var closeOuterPanel = function closeOuterPanel() {
     if (innerState.isOpen) {
       innerState.close();
@@ -420,18 +203,7 @@ var InnerPanel = function InnerPanel(_ref2) {
     triggerRef: innerTriggerRef
   }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
     onPress: closeInnerPanel
-  }, "Close Inner Panel"), (0, _react2.jsx)(_index.Text, {
-    pt: "md"
-  }, "Children render here.")));
-  var items = [{
-    key: 'Form 1',
-    id: 1,
-    name: 'Form 1'
-  }, {
-    key: 'Form 2',
-    id: 2,
-    name: 'Form 2'
-  }];
+  }, "Close Inner Panel")));
   var outer =
   // should have higher z-index applied
   (state.isOpen || state.isTransitioning) && (0, _react2.jsx)(_index.OverlayPanel, (0, _extends2["default"])({
@@ -443,29 +215,22 @@ var InnerPanel = function InnerPanel(_ref2) {
   }, args, {
     state: state,
     triggerRef: outerTriggerRef
-  }), (0, _react2.jsx)(_index.Box, {
+  }), (0, _react2.jsx)(_index.PanelHeader, {
+    data: {
+      icon: _AccountIcon["default"],
+      text: 'Fons Vernall',
+      subtext: 'rad_developer@pingidentity.com'
+    }
+  }, (0, _react2.jsx)(_index.PanelHeaderCloseButton, {
+    onPress: function onPress() {
+      closeOuterPanel();
+    }
+  })), (0, _react2.jsx)(_index.Box, {
     sx: {
-      p: '12px'
+      p: '25px',
+      gap: '25px'
     }
-  }, (0, _react2.jsx)(_index.Button, {
-    onPress: closeOuterPanel,
-    "aria-expanded": state.isOpen
-  }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
-    pt: "md",
-    mb: "24px"
-  }, "Children render here."), (0, _react2.jsx)(_index.ListView, {
-    items: items
-  }, function (item) {
-    return (0, _react2.jsx)(_reactStately.Item, {
-      key: item.id
-    }, (0, _react2.jsx)(_index.ListViewItem, {
-      data: {
-        text: item.name
-      }
-    }));
-  }), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
-    onPress: toggleMessagesOpen
-  }, "Toggle Messages"), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
+  }, (0, _react2.jsx)(_index.Text, null, "Children render here."), (0, _react2.jsx)(_index.Button, {
     ref: innerTriggerRef,
     onPress: innerState.open,
     "aria-expanded": innerState.isOpen
@@ -473,19 +238,64 @@ var InnerPanel = function InnerPanel(_ref2) {
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
-    (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Box, {
+      sx: {
+        gap: '25px'
+      }
+    }, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Button, {
       ref: outerTriggerRef,
       onPress: state.open,
-      "aria-expanded": state.isOpen
-    }, "Open Panel"), outer), messagesOpen && (0, _react2.jsx)(_index.Messages, {
+      "aria-expanded": state.isOpen,
       sx: {
-        zIndex: 11
-      },
-      onClose: toggleMessagesOpen
-    }, (0, _react2.jsx)(_reactStately.Item, {
-      key: "message2",
-      status: _statuses["default"].SUCCESS
-    }, "Z Index higher than inner pannel")))
+        maxWidth: 'fit-content'
+      }
+    }, "Open Panel"), outer))
+  );
+};
+exports.InnerPanel = InnerPanel;
+var Customization = function Customization() {
+  var _useOverlayPanelState5 = (0, _hooks.useOverlayPanelState)(),
+    state = _useOverlayPanelState5.state,
+    onClose = _useOverlayPanelState5.onClose;
+  var triggerRef = (0, _react.useRef)(null);
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Box, {
+      sx: {
+        gap: '25px'
+      }
+    }, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Button, {
+      ref: triggerRef,
+      onPress: state.open,
+      "aria-expanded": state.isOpen,
+      sx: {
+        maxWidth: 'fit-content'
+      }
+    }, "Open Panel"), (state.isOpen || state.isTransitioning) && (0, _react2.jsx)(_index.OverlayPanel, {
+      isTransitioning: state.isTransitioning,
+      isOpen: state.isOpen,
+      state: state,
+      triggerRef: triggerRef,
+      sx: {
+        width: '720px',
+        p: 0
+      }
+    }, (0, _react2.jsx)(_index.PanelHeader, {
+      data: {
+        icon: _AccountIcon["default"],
+        text: 'Fons Vernall',
+        subtext: 'rad_developer@pingidentity.com'
+      }
+    }, (0, _react2.jsx)(_index.PanelHeaderCloseButton, {
+      onPress: function onPress() {
+        onClose(state, triggerRef);
+      }
+    })), (0, _react2.jsx)(_index.Box, {
+      sx: {
+        p: 25
+      }
+    }, (0, _react2.jsx)(_index.Text, null, "Children render here.")))))
   );
 };
-exports.InnerPanel = InnerPanel;
+exports.Customization = Customization;

package/lib/cjs/components/Text/Text.styles.d.ts

@@ -110,6 +110,9 @@ export declare const text: {
         fontFamily: string;
     };
     panelHeaderSubtext: {
+        textOverflow: string;
+        overflow: string;
+        whiteSpace: string;
         alignSelf: string;
         fontSize: string;
         mt: string;
@@ -123,6 +126,9 @@ export declare const text: {
         wordBreak: wordBreak;
     };
     panelHeaderText: {
+        textOverflow: string;
+        overflow: string;
+        whiteSpace: string;
         alignSelf: string;
         fontSize: string;
         color: string;

package/lib/cjs/components/Text/Text.styles.js

@@ -211,8 +211,8 @@ var text = _objectSpread(_objectSpread(_objectSpread({
     color: 'text.secondary',
     fontFamily: 'standard'
   },
-  panelHeaderSubtext: listViewItemSubtext,
-  panelHeaderText: listViewItemText,
+  panelHeaderSubtext: _objectSpread(_objectSpread({}, listViewItemSubtext), textEllipsis),
+  panelHeaderText: _objectSpread(_objectSpread({}, listViewItemText), textEllipsis),
   sectionTitle: sectionTitle,
   subtitle: subtitle,
   tabLabel: tabLabel,

package/lib/cjs/styles/themeOverrides/stories/OverlayPanel.chromatic.stories.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("../../../index").OverlayPanelProps & React.RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;