@pingux/astro 1.1.0-alpha.6 → 1.1.0

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

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _GlobeIcon = _interopRequireDefault(require("mdi-react/GlobeIcon"));
+
+var _ViewDashboardIcon = _interopRequireDefault(require("mdi-react/ViewDashboardIcon"));
+
+var _AccountMultipleIcon = _interopRequireDefault(require("mdi-react/AccountMultipleIcon"));
+
+var _TransitConnectionVariantIcon = _interopRequireDefault(require("mdi-react/TransitConnectionVariantIcon"));
+
+var _EmoticonHappyOutlineIcon = _interopRequireDefault(require("mdi-react/EmoticonHappyOutlineIcon"));
+
+var _FingerprintIcon = _interopRequireDefault(require("mdi-react/FingerprintIcon"));
+
+var _ScaleBalanceIcon = _interopRequireDefault(require("mdi-react/ScaleBalanceIcon"));
+
+var _VerifiedIcon = _interopRequireDefault(require("mdi-react/VerifiedIcon"));
+
+var _NavBar = _interopRequireDefault(require("./NavBar"));
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+var data = [{
+  icon: _GlobeIcon["default"],
+  key: 'Overview',
+  heading: 'Overview',
+  children: ['Users', 'Group', 'Populations', 'Attributes', 'A roles title that is really really really really long']
+}, {
+  icon: _ViewDashboardIcon["default"],
+  key: 'Dashboard',
+  heading: 'Dashboard',
+  children: ['Users', 'Group', 'Populations', 'Attributes', 'Roles']
+}, {
+  icon: _AccountMultipleIcon["default"],
+  key: 'Identities',
+  heading: 'Identities',
+  children: ['Users', 'Group', 'Populations', 'Attributes', 'Roles']
+}, {
+  icon: _TransitConnectionVariantIcon["default"],
+  key: 'Connections',
+  heading: 'Connections',
+  children: ['Users', 'Group', 'Populations', 'Attributes', 'Roles']
+}, {
+  icon: _EmoticonHappyOutlineIcon["default"],
+  key: 'Experiences',
+  heading: 'Experiences',
+  children: ['Users', 'Group', 'Populations', 'Attributes', 'Roles']
+}];
+var secondData = [{
+  icon: _FingerprintIcon["default"],
+  key: 'MFA',
+  heading: 'MFA',
+  children: ['Users', {
+    subTitle: 'PingOne Services'
+  }, 'Group', 'Populations', 'Attributes', 'Roles']
+}, {
+  icon: _ScaleBalanceIcon["default"],
+  key: 'Risk',
+  heading: 'Risk',
+  children: ['Users', 'Group', 'Populations', 'Attributes', 'Roles']
+}, {
+  icon: _VerifiedIcon["default"],
+  key: 'Verify',
+  heading: 'Verify',
+  children: ['Users', 'Group', 'Populations', 'Attributes', 'Roles']
+}];
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_NavBar["default"], props, (0, _react2.jsx)(_index.Box, {
+    sx: {
+      height: '100%',
+      maxHeight: '100%',
+      overflowY: 'overlay !important'
+    }
+  }, (0, _react2.jsx)(_index.NavBarSection, {
+    items: data,
+    hasSeparator: true
+  }), (0, _react2.jsx)(_index.NavBarSection, {
+    items: secondData,
+    title: "test_title"
+  }))));
+};
+
+(0, _testAxe["default"])(getComponent);
+test('should render basic nav with children', function () {
+  getComponent();
+
+  var nav = _testWrapper.screen.queryByRole('navigation');
+
+  expect(nav).toBeInTheDocument();
+});
+test('should render title for sections that have titles', function () {
+  getComponent();
+
+  var title = _testWrapper.screen.getByText('test_title');
+
+  expect(title).toBeInTheDocument();
+});
+test('should render title for itemBodies that have subTitles', function () {
+  getComponent();
+
+  var subTitle = _testWrapper.screen.getByText('PingOne Services');
+
+  expect(subTitle).toBeInTheDocument();
+});

package/lib/cjs/components/NavBar/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _NavBar["default"];
+  }
+});
+
+var _NavBar = _interopRequireDefault(require("./NavBar"));

package/lib/cjs/components/NavBarSection/NavBarItemBody.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+var NavBarItemBody = function NavBarItemBody(props) {
+  var _context;
+
+  return (0, _react2.jsx)(_index.Box, {
+    sx: {
+      alignItems: 'flex-start',
+      mb: '15px'
+    }
+  }, (0, _map["default"])(_context = props.item.children).call(_context, function (child) {
+    return child.subTitle ? (0, _react2.jsx)(_react.Fragment, {
+      key: "fragment".concat(child.subTitle)
+    }, (0, _react2.jsx)(_index.Separator, {
+      variant: "separator.navBarSubtitleSeparator",
+      key: "separator".concat(child.subTitle)
+    }), (0, _react2.jsx)(_index.Text, {
+      key: "text".concat(child.subTitle),
+      variant: "text.navBarSubtitle",
+      sx: {
+        mb: '10px',
+        ml: '45px'
+      }
+    }, child.subTitle)) : child;
+  }));
+};
+
+NavBarItemBody.propTypes = {
+  item: _propTypes["default"].shape({
+    children: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]))
+  })
+};
+var _default = NavBarItemBody;
+exports["default"] = _default;

package/lib/cjs/components/NavBarSection/NavBarItemHeader.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+var NavBarItemHeader = function NavBarItemHeader(props) {
+  var item = props.item;
+  var icon = item.icon;
+  return (0, _react2.jsx)(_index.Box, {
+    variant: "boxes.navBarItemHeaderContainer",
+    isRow: true
+  }, icon && (0, _react2.jsx)(_index.Icon, {
+    icon: icon,
+    size: 20,
+    sx: {
+      mr: '10px',
+      color: 'white',
+      fill: 'white'
+    }
+  }), (0, _react2.jsx)(_index.Text, {
+    variant: "navBarHeaderText"
+  }, props.item.heading));
+};
+
+NavBarItemHeader.propTypes = {
+  item: _propTypes["default"].shape({
+    heading: _propTypes["default"].string,
+    icon: _propTypes["default"].elementType
+  })
+};
+var _default = NavBarItemHeader;
+exports["default"] = _default;

package/lib/cjs/components/NavBarSection/NavBarSection.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _index = require("../../index");
+
+var _NavBarItemBody = _interopRequireDefault(require("./NavBarItemBody"));
+
+var _NavBarItemHeader = _interopRequireDefault(require("./NavBarItemHeader"));
+
+var _react2 = require("@emotion/react");
+
+/**
+ * Composed component that creates an AccordionGrid group
+ * with title, and separator options.
+ *
+ */
+var NavBarSection = function NavBarSection(props) {
+  var hasSeparator = props.hasSeparator,
+      title = props.title,
+      items = props.items;
+  return (0, _react2.jsx)(_react["default"].Fragment, null, title && (0, _react2.jsx)(_index.Text, {
+    variant: "text.navBarSubtitle",
+    sx: {
+      mt: '25px',
+      mb: '15px',
+      ml: '15px'
+    }
+  }, title), (0, _react2.jsx)(_index.AccordionGridGroup, {
+    items: items
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      headerProps: {
+        variant: 'accordion.accordionGridHeaderNav'
+      },
+      textValue: item
+    }, (0, _react2.jsx)(_NavBarItemHeader["default"], {
+      item: item
+    }), (0, _react2.jsx)(_NavBarItemBody["default"], {
+      item: item
+    }));
+  }), hasSeparator && (0, _react2.jsx)(_index.Box, {
+    sx: {
+      pl: '15px',
+      pr: '15px',
+      mt: '25px'
+    }
+  }, (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSeparator"
+  })));
+};
+
+NavBarSection.defaultProps = {
+  hasSeparator: false
+};
+NavBarSection.propTypes = {
+  /** If true, a separator will render at the end of the section */
+  hasSeparator: _propTypes["default"].bool,
+
+  /** If present, this string will render at the top of the section */
+  title: _propTypes["default"].string,
+
+  /**
+   * *For performance reasons, use this prop instead of Array.map when iteratively rendering Items*.
+   * For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections).
+  */
+  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({}))
+};
+var _default = NavBarSection;
+exports["default"] = _default;

package/lib/cjs/components/NavBarSection/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _NavBarSection["default"];
+  }
+});
+
+var _NavBarSection = _interopRequireDefault(require("./NavBarSection"));

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

@@ -18,12 +18,16 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _focus = require("@react-aria/focus");
+
 var _Box = _interopRequireDefault(require("../Box"));
 
 var _hooks = require("../../hooks");
@@ -37,12 +41,25 @@ var OverlayPanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var children = props.children,
       isOpen = props.isOpen,
+      onCloseProp = props.onClose,
       className = props.className,
+      state = props.state,
       size = props.size,
-      others = (0, _objectWithoutProperties2["default"])(props, ["children", "isOpen", "className", "size"]);
+      triggerRef = props.triggerRef,
+      others = (0, _objectWithoutProperties2["default"])(props, ["children", "isOpen", "onClose", "className", "state", "size", "triggerRef"]);
+
+  var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
+      onClose = _useOverlayPanelState.onClose;
+
   var overlayPanelRef = (0, _react.useRef)();
+
+  var _useState = (0, _react.useState)(true),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      contain = _useState2[0],
+      setIsContained = _useState2[1];
   /* istanbul ignore next */
 
+
   (0, _react.useImperativeHandle)(ref, function () {
     return overlayPanelRef.current;
   });
@@ -52,14 +69,32 @@ var OverlayPanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, "is-".concat((props === null || props === void 0 ? void 0 : (_props$sx = props.sx) === null || _props$sx === void 0 ? void 0 : _props$sx.width) ? 'custom' : size), size)),
       classNames = _useStatusClasses.classNames;
 
-  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
-    variant: "overlayPanel.overlayPanel"
+  var handleClose = function handleClose(e) {
+    e.stopPropagation();
+
+    if (e.key === 'Escape') {
+      setIsContained(false);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    if (!contain && onClose) {
+      onClose(state, triggerRef, onCloseProp);
+    }
+  }, [contain]);
+  return (0, _react2.jsx)(_focus.FocusScope, {
+    autoFocus: true,
+    contain: contain
+  }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    variant: "overlayPanel.overlayPanel",
+    ref: overlayPanelRef
   }, others, {
-    className: classNames
+    className: classNames,
+    onKeyUp: handleClose
   }), (0, _react2.jsx)(_Box["default"], {
     variant: "overlayPanel.overlayPanelBody",
     className: classNames
-  }, children));
+  }, children)));
 });
 OverlayPanel.propTypes = {
   /** Sets the open state of the menu. */
@@ -71,7 +106,19 @@ OverlayPanel.propTypes = {
   /** JSX styling that is passed into the component. */
   sx: _propTypes["default"].shape({
     width: _propTypes["default"].string
-  })
+  }),
+
+  /** State object that is passed in from the useOverlayPanelState hook */
+  state: _propTypes["default"].shape({
+    close: _propTypes["default"].func
+  }),
+
+  /** Callback function that runs when the esc key is used to close the OverlayPanel. */
+  onClose: _propTypes["default"].func,
+
+  /** Ref that is connected to the button that triggers the overlay state.
+   Focus will return to this ref when the keyboard is used to close the OverlayPanel. */
+  triggerRef: _propTypes["default"].shape({})
 };
 OverlayPanel.defaultProps = {
   size: 'medium'

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

@@ -22,8 +22,6 @@ var _collections = require("@react-stately/collections");
 
 var _hooks = require("../../hooks");
 
-var _Button = _interopRequireDefault(require("../Button/Button"));
-
 var _OverlayPanel = _interopRequireDefault(require("./OverlayPanel"));
 
 var _index = require("../../index");
@@ -63,15 +61,26 @@ exports["default"] = _default;
 
 var Default = function Default(_ref) {
   var args = (0, _extends2["default"])({}, _ref);
-  var state = (0, _hooks.useOverlayPanelState)();
+
+  var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
+      state = _useOverlayPanelState.state,
+      onClose = _useOverlayPanelState.onClose;
+
+  var triggerRef = (0, _react.useRef)();
   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)(_Button["default"], {
+    // 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, {
+      ref: triggerRef,
       onPress: state.open
-    }, "Open Panel"), (0, _react2.jsx)(_OverlayPanel["default"], (0, _extends2["default"])({
-      isOpen: state.isOpen
-    }, args), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_Button["default"], {
-      onPress: state.close
+    }, "Open Panel"), state.isOpen && (0, _react2.jsx)(_OverlayPanel["default"], (0, _extends2["default"])({
+      isOpen: state.isOpen,
+      state: state
+    }, args, {
+      triggerRef: triggerRef
+    }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
+      onPress: function onPress() {
+        onClose(state, triggerRef);
+      }
     }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
       pt: "md"
     }, "Children render here."))))
@@ -82,8 +91,17 @@ exports.Default = Default;
 
 var InnerPanel = function InnerPanel(_ref2) {
   var args = (0, _extends2["default"])({}, _ref2);
-  var state = (0, _hooks.useOverlayPanelState)();
-  var innerState = (0, _hooks.useOverlayPanelState)();
+
+  var _useOverlayPanelState2 = (0, _hooks.useOverlayPanelState)(),
+      state = _useOverlayPanelState2.state,
+      onClose = _useOverlayPanelState2.onClose;
+
+  var _useOverlayPanelState3 = (0, _hooks.useOverlayPanelState)(),
+      innerState = _useOverlayPanelState3.state,
+      onCloseInner = _useOverlayPanelState3.onClose;
+
+  var outerTriggerRef = (0, _react.useRef)();
+  var innerTriggerRef = (0, _react.useRef)();
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -99,15 +117,22 @@ var InnerPanel = function InnerPanel(_ref2) {
       innerState.close();
     }
 
-    state.close();
+    onClose(state, outerTriggerRef);
+  };
+
+  var closeInnerPanel = function closeInnerPanel() {
+    onCloseInner(innerState, innerTriggerRef);
   };
 
   var inner = (0, _react2.jsx)(_react["default"].Fragment, null, innerState.isOpen && (0, _react2.jsx)(_OverlayPanel["default"], (0, _extends2["default"])({
     variant: "overlayPanel.overlayPanelInner" // applies higher z-index
     ,
     isOpen: innerState.isOpen
-  }, args), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_Button["default"], {
-    onPress: innerState.close
+  }, args, {
+    state: innerState,
+    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."))));
@@ -117,11 +142,14 @@ var InnerPanel = function InnerPanel(_ref2) {
     sx: {
       p: '0px'
     }
-  }, args), (0, _react2.jsx)(_index.Box, {
+  }, args, {
+    state: state,
+    triggerRef: outerTriggerRef
+  }), (0, _react2.jsx)(_index.Box, {
     sx: {
       p: '12px'
     }
-  }, (0, _react2.jsx)(_Button["default"], {
+  }, (0, _react2.jsx)(_index.Button, {
     onPress: closeOuterPanel
   }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
     pt: "md",
@@ -140,38 +168,16 @@ var InnerPanel = function InnerPanel(_ref2) {
     mr: "auto"
   }, "Form 2")), (0, _react2.jsx)(_index.Separator, {
     margin: "0"
-  }), (0, _react2.jsx)(_index.ListItem, {
-    title: "Form 3"
-  }, (0, _react2.jsx)(_index.Text, {
-    variant: "itemTitle",
-    alignSelf: "center",
-    mr: "auto"
-  }, "Form 3")), (0, _react2.jsx)(_index.Separator, {
-    margin: "0"
-  }), (0, _react2.jsx)(_index.ListItem, {
-    title: "Form 4"
-  }, (0, _react2.jsx)(_index.Text, {
-    variant: "itemTitle",
-    alignSelf: "center",
-    mr: "auto"
-  }, "Form 4")), (0, _react2.jsx)(_index.Separator, {
-    margin: "0"
-  }), (0, _react2.jsx)(_index.ListItem, {
-    title: "Form 5"
-  }, (0, _react2.jsx)(_index.Text, {
-    variant: "itemTitle",
-    alignSelf: "center",
-    mr: "auto"
-  }, "Form 5")), (0, _react2.jsx)(_index.Separator, {
-    margin: "0"
-  })), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_Button["default"], {
+  })), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
     onPress: toggleMessagesOpen
-  }, "Toggle Messages"), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_Button["default"], {
+  }, "Toggle Messages"), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
+    ref: innerTriggerRef,
     onPress: innerState.open
   }, "Open Inner Panel"), inner)));
   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)(_Button["default"], {
+    (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
+      ref: outerTriggerRef,
       onPress: state.open
     }, "Open Panel"), outer), messagesOpen && (0, _react2.jsx)(_index.Messages, {
       sx: {
@@ -187,20 +193,27 @@ var InnerPanel = function InnerPanel(_ref2) {
 exports.InnerPanel = InnerPanel;
 
 var CustomWidth = function CustomWidth() {
-  var state = (0, _hooks.useOverlayPanelState)();
+  var _useOverlayPanelState4 = (0, _hooks.useOverlayPanelState)(),
+      state = _useOverlayPanelState4.state,
+      onClose = _useOverlayPanelState4.onClose;
+
+  var triggerRef = (0, _react.useRef)();
   return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
-    //
-    // For a custom width, provide the width via the 'sx' prop
-    (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)(_Button["default"], {
+    (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
-    }, "Open Panel"), (0, _react2.jsx)(_OverlayPanel["default"], {
+    }, "Open Panel"), state.isOpen && (0, _react2.jsx)(_OverlayPanel["default"], {
       isOpen: state.isOpen,
+      state: state,
+      triggerRef: triggerRef,
       sx: {
         width: '720px'
       }
-    }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_Button["default"], {
-      onPress: state.close
+    }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
+      onPress: function onPress() {
+        onClose(state, triggerRef);
+      }
     }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
       pt: "md"
     }, "Children render here."))))