@pingux/astro 1.1.0-alpha.15 → 1.1.0-alpha.16

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

@@ -61,21 +61,29 @@ 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.
+    // 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)(_index.Button, {
-      onPress: state.close
-    }, "Close Panel"), (0, _react2.jsx)(_index.AccordionGroup, args, (0, _react2.jsx)(_collections.Item, {
-      key: "accordionKey",
-      textValue: "accordionKey",
-      label: "Accordion Label",
-      "data-id": "accordionItem"
-    }, (0, _react2.jsx)(_index.Text, null, "Render me!"))))))
+    }, "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."))))
   );
 };
 
@@ -83,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),
@@ -100,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)(_index.Button, {
-    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."))));
@@ -118,7 +142,10 @@ 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'
     }
@@ -141,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)(_index.Button, {
     onPress: toggleMessagesOpen
   }, "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)(_index.Button, {
+      ref: outerTriggerRef,
       onPress: state.open
     }, "Open Panel"), outer), messagesOpen && (0, _react2.jsx)(_index.Messages, {
       sx: {
@@ -188,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)(_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)(_index.Button, {
-      onPress: state.close
+      onPress: function onPress() {
+        onClose(state, triggerRef);
+      }
     }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
       pt: "md"
     }, "Children render here."))))

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

@@ -53,4 +53,88 @@ test('custom overlayPanel gets custom width', function () {
 
   expect(overlayPanel).toBeInTheDocument();
   expect(overlayPanel).toHaveStyleRule('width', '240px');
+});
+test('onClose callback fires when provided', function () {
+  var onClose = jest.fn();
+  getComponent({
+    onClose: onClose,
+    children: (0, _react2.jsx)("div", null, "Test")
+  });
+
+  var overlayPanel = _testWrapper.screen.getByTestId(testId);
+
+  _testWrapper.fireEvent.keyDown(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+
+  _testWrapper.fireEvent.keyUp(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+
+  expect(onClose).toHaveBeenCalled();
+});
+test('neither callback fires when not provided', function () {
+  var onClose = jest.fn();
+  getComponent({
+    children: (0, _react2.jsx)("div", null, "Test")
+  });
+
+  var overlayPanel = _testWrapper.screen.getByTestId(testId);
+
+  _testWrapper.fireEvent.keyDown(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+
+  _testWrapper.fireEvent.keyUp(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+
+  expect(onClose).not.toHaveBeenCalled();
+});
+test('triggerRef.current.focus() fires when provided', function () {
+  var onClose = jest.fn();
+  var focusFunction = jest.fn();
+  var state = {
+    close: onClose
+  };
+  var triggerRef = {
+    current: {
+      focus: focusFunction
+    }
+  };
+  getComponent({
+    state: state,
+    children: (0, _react2.jsx)("div", null, "Test"),
+    triggerRef: triggerRef
+  });
+
+  var overlayPanel = _testWrapper.screen.getByTestId(testId);
+
+  _testWrapper.fireEvent.keyDown(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+
+  _testWrapper.fireEvent.keyUp(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+
+  expect(focusFunction).toHaveBeenCalled();
 });

package/lib/cjs/hooks/useOverlayPanelState/useOverlayPanelState.js

@@ -24,11 +24,30 @@ var useOverlayPanelState = function useOverlayPanelState() {
   var isDefaultOpen = props.isDefaultOpen,
       isOpen = props.isOpen,
       onOpenChange = props.onOpenChange;
-  return (0, _overlays.useOverlayTriggerState)({
+  var state = (0, _overlays.useOverlayTriggerState)({
     defaultOpen: isDefaultOpen,
     isOpen: isOpen,
     onOpenChange: onOpenChange
   });
+
+  var onClose = function onClose(stateProp, triggerRef, onCloseProp) {
+    if (stateProp) {
+      stateProp.close();
+    }
+
+    if (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) {
+      triggerRef.current.focus();
+    }
+
+    if (onCloseProp) {
+      onCloseProp();
+    }
+  };
+
+  return {
+    state: state,
+    onClose: onClose
+  };
 };
 
 var _default = useOverlayPanelState;

package/lib/cjs/hooks/useOverlayPanelState/useOverlayPanelState.test.js

@@ -13,8 +13,12 @@ test('default useOverlayPanelState', function () {
       result = _renderHook.result;
 
   expect(result.current).toEqual(expect.objectContaining({
-    open: expect.any(Function),
-    close: expect.any(Function),
-    toggle: expect.any(Function)
+    state: {
+      open: expect.any(Function),
+      close: expect.any(Function),
+      toggle: expect.any(Function),
+      isOpen: expect.any(Boolean)
+    },
+    onClose: expect.any(Function)
   }));
 });

package/lib/components/OverlayPanel/OverlayPanel.js

@@ -1,11 +1,13 @@
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+import React, { forwardRef, useRef, useImperativeHandle, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
+import { FocusScope } from '@react-aria/focus';
 import Box from '../Box';
-import { useStatusClasses } from '../../hooks';
+import { useStatusClasses, useOverlayPanelState } from '../../hooks';
 import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var OverlayPanel = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -13,13 +15,25 @@ var OverlayPanel = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var children = props.children,
       isOpen = props.isOpen,
+      onCloseProp = props.onClose,
       className = props.className,
+      state = props.state,
       size = props.size,
-      others = _objectWithoutProperties(props, ["children", "isOpen", "className", "size"]);
+      triggerRef = props.triggerRef,
+      others = _objectWithoutProperties(props, ["children", "isOpen", "onClose", "className", "state", "size", "triggerRef"]);
+
+  var _useOverlayPanelState = useOverlayPanelState(),
+      onClose = _useOverlayPanelState.onClose;
 
   var overlayPanelRef = useRef();
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      contain = _useState2[0],
+      setIsContained = _useState2[1];
   /* istanbul ignore next */
 
+
   useImperativeHandle(ref, function () {
     return overlayPanelRef.current;
   });
@@ -29,14 +43,32 @@ var OverlayPanel = /*#__PURE__*/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 ___EmotionJSX(Box, _extends({
-    variant: "overlayPanel.overlayPanel"
+  var handleClose = function handleClose(e) {
+    e.stopPropagation();
+
+    if (e.key === 'Escape') {
+      setIsContained(false);
+    }
+  };
+
+  useEffect(function () {
+    if (!contain && onClose) {
+      onClose(state, triggerRef, onCloseProp);
+    }
+  }, [contain]);
+  return ___EmotionJSX(FocusScope, {
+    autoFocus: true,
+    contain: contain
+  }, ___EmotionJSX(Box, _extends({
+    variant: "overlayPanel.overlayPanel",
+    ref: overlayPanelRef
   }, others, {
-    className: classNames
+    className: classNames,
+    onKeyUp: handleClose
   }), ___EmotionJSX(Box, {
     variant: "overlayPanel.overlayPanelBody",
     className: classNames
-  }, children));
+  }, children)));
 });
 OverlayPanel.propTypes = {
   /** Sets the open state of the menu. */
@@ -48,7 +80,19 @@ OverlayPanel.propTypes = {
   /** JSX styling that is passed into the component. */
   sx: PropTypes.shape({
     width: PropTypes.string
-  })
+  }),
+
+  /** State object that is passed in from the useOverlayPanelState hook */
+  state: PropTypes.shape({
+    close: PropTypes.func
+  }),
+
+  /** Callback function that runs when the esc key is used to close the OverlayPanel. */
+  onClose: PropTypes.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.shape({})
 };
 OverlayPanel.defaultProps = {
   size: 'medium'

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

@@ -1,10 +1,10 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { Item } from '@react-stately/collections';
 import { useOverlayPanelState } from '../../hooks';
 import OverlayPanel from './OverlayPanel';
-import { OverlayProvider, Box, Text, List, ListItem, Separator, Messages, Button, AccordionGroup } from '../../index';
+import { OverlayProvider, Box, Text, List, ListItem, Separator, Messages, Button } from '../../index';
 import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -37,28 +37,43 @@ export default {
 export var Default = function Default(_ref) {
   var args = _extends({}, _ref);
 
-  var state = useOverlayPanelState();
+  var _useOverlayPanelState = useOverlayPanelState(),
+      state = _useOverlayPanelState.state,
+      onClose = _useOverlayPanelState.onClose;
+
+  var triggerRef = useRef();
   return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
-    // readers when an overlay opens.
+    // readers when an overlay is open.
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(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."), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
+      ref: triggerRef,
       onPress: state.open
-    }, "Open Panel"), ___EmotionJSX(OverlayPanel, _extends({
-      isOpen: state.isOpen
-    }, args), ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
-      onPress: state.close
-    }, "Close Panel"), ___EmotionJSX(AccordionGroup, args, ___EmotionJSX(Item, {
-      key: "accordionKey",
-      textValue: "accordionKey",
-      label: "Accordion Label",
-      "data-id": "accordionItem"
-    }, ___EmotionJSX(Text, null, "Render me!"))))))
+    }, "Open Panel"), state.isOpen && ___EmotionJSX(OverlayPanel, _extends({
+      isOpen: state.isOpen,
+      state: state
+    }, args, {
+      triggerRef: triggerRef
+    }), ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
+      onPress: function onPress() {
+        onClose(state, triggerRef);
+      }
+    }, "Close Panel"), ___EmotionJSX(Text, {
+      pt: "md"
+    }, "Children render here."))))
   );
 };
 export var InnerPanel = function InnerPanel(_ref2) {
   var args = _extends({}, _ref2);
 
-  var state = useOverlayPanelState();
-  var innerState = useOverlayPanelState();
+  var _useOverlayPanelState2 = useOverlayPanelState(),
+      state = _useOverlayPanelState2.state,
+      onClose = _useOverlayPanelState2.onClose;
+
+  var _useOverlayPanelState3 = useOverlayPanelState(),
+      innerState = _useOverlayPanelState3.state,
+      onCloseInner = _useOverlayPanelState3.onClose;
+
+  var outerTriggerRef = useRef();
+  var innerTriggerRef = useRef();
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -74,15 +89,22 @@ export var InnerPanel = function InnerPanel(_ref2) {
       innerState.close();
     }
 
-    state.close();
+    onClose(state, outerTriggerRef);
+  };
+
+  var closeInnerPanel = function closeInnerPanel() {
+    onCloseInner(innerState, innerTriggerRef);
   };
 
   var inner = ___EmotionJSX(React.Fragment, null, innerState.isOpen && ___EmotionJSX(OverlayPanel, _extends({
     variant: "overlayPanel.overlayPanelInner" // applies higher z-index
     ,
     isOpen: innerState.isOpen
-  }, args), ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
-    onPress: innerState.close
+  }, args, {
+    state: innerState,
+    triggerRef: innerTriggerRef
+  }), ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
+    onPress: closeInnerPanel
   }, "Close Inner Panel"), ___EmotionJSX(Text, {
     pt: "md"
   }, "Children render here."))));
@@ -93,7 +115,10 @@ export var InnerPanel = function InnerPanel(_ref2) {
     sx: {
       p: '0px'
     }
-  }, args), ___EmotionJSX(Box, {
+  }, args, {
+    state: state,
+    triggerRef: outerTriggerRef
+  }), ___EmotionJSX(Box, {
     sx: {
       p: '12px'
     }
@@ -116,39 +141,17 @@ export var InnerPanel = function InnerPanel(_ref2) {
     mr: "auto"
   }, "Form 2")), ___EmotionJSX(Separator, {
     margin: "0"
-  }), ___EmotionJSX(ListItem, {
-    title: "Form 3"
-  }, ___EmotionJSX(Text, {
-    variant: "itemTitle",
-    alignSelf: "center",
-    mr: "auto"
-  }, "Form 3")), ___EmotionJSX(Separator, {
-    margin: "0"
-  }), ___EmotionJSX(ListItem, {
-    title: "Form 4"
-  }, ___EmotionJSX(Text, {
-    variant: "itemTitle",
-    alignSelf: "center",
-    mr: "auto"
-  }, "Form 4")), ___EmotionJSX(Separator, {
-    margin: "0"
-  }), ___EmotionJSX(ListItem, {
-    title: "Form 5"
-  }, ___EmotionJSX(Text, {
-    variant: "itemTitle",
-    alignSelf: "center",
-    mr: "auto"
-  }, "Form 5")), ___EmotionJSX(Separator, {
-    margin: "0"
   })), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
     onPress: toggleMessagesOpen
   }, "Toggle Messages"), ___EmotionJSX("br", null), ___EmotionJSX(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.
     ___EmotionJSX(React.Fragment, null, ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
+      ref: outerTriggerRef,
       onPress: state.open
     }, "Open Panel"), outer), messagesOpen && ___EmotionJSX(Messages, {
       sx: {
@@ -161,20 +164,27 @@ export var InnerPanel = function InnerPanel(_ref2) {
   );
 };
 export var CustomWidth = function CustomWidth() {
-  var state = useOverlayPanelState();
+  var _useOverlayPanelState4 = useOverlayPanelState(),
+      state = _useOverlayPanelState4.state,
+      onClose = _useOverlayPanelState4.onClose;
+
+  var triggerRef = 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
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(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."), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
+      ref: triggerRef,
       onPress: state.open
-    }, "Open Panel"), ___EmotionJSX(OverlayPanel, {
+    }, "Open Panel"), state.isOpen && ___EmotionJSX(OverlayPanel, {
       isOpen: state.isOpen,
+      state: state,
+      triggerRef: triggerRef,
       sx: {
         width: '720px'
       }
     }, ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
-      onPress: state.close
+      onPress: function onPress() {
+        onClose(state, triggerRef);
+      }
     }, "Close Panel"), ___EmotionJSX(Text, {
       pt: "md"
     }, "Children render here."))))

package/lib/components/OverlayPanel/OverlayPanel.test.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import axeTest from '../../utils/testUtils/testAxe';
-import { render, screen } from '../../utils/testUtils/testWrapper';
+import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import OverlayPanel from './OverlayPanel';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-overlayPanel';
@@ -38,4 +38,76 @@ test('custom overlayPanel gets custom width', function () {
   var overlayPanel = screen.getByTestId(testId);
   expect(overlayPanel).toBeInTheDocument();
   expect(overlayPanel).toHaveStyleRule('width', '240px');
+});
+test('onClose callback fires when provided', function () {
+  var onClose = jest.fn();
+  getComponent({
+    onClose: onClose,
+    children: ___EmotionJSX("div", null, "Test")
+  });
+  var overlayPanel = screen.getByTestId(testId);
+  fireEvent.keyDown(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+  fireEvent.keyUp(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+  expect(onClose).toHaveBeenCalled();
+});
+test('neither callback fires when not provided', function () {
+  var onClose = jest.fn();
+  getComponent({
+    children: ___EmotionJSX("div", null, "Test")
+  });
+  var overlayPanel = screen.getByTestId(testId);
+  fireEvent.keyDown(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+  fireEvent.keyUp(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+  expect(onClose).not.toHaveBeenCalled();
+});
+test('triggerRef.current.focus() fires when provided', function () {
+  var onClose = jest.fn();
+  var focusFunction = jest.fn();
+  var state = {
+    close: onClose
+  };
+  var triggerRef = {
+    current: {
+      focus: focusFunction
+    }
+  };
+  getComponent({
+    state: state,
+    children: ___EmotionJSX("div", null, "Test"),
+    triggerRef: triggerRef
+  });
+  var overlayPanel = screen.getByTestId(testId);
+  fireEvent.keyDown(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+  fireEvent.keyUp(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+  expect(focusFunction).toHaveBeenCalled();
 });

package/lib/hooks/useOverlayPanelState/useOverlayPanelState.js

@@ -14,11 +14,30 @@ var useOverlayPanelState = function useOverlayPanelState() {
   var isDefaultOpen = props.isDefaultOpen,
       isOpen = props.isOpen,
       onOpenChange = props.onOpenChange;
-  return useOverlayTriggerState({
+  var state = useOverlayTriggerState({
     defaultOpen: isDefaultOpen,
     isOpen: isOpen,
     onOpenChange: onOpenChange
   });
+
+  var onClose = function onClose(stateProp, triggerRef, onCloseProp) {
+    if (stateProp) {
+      stateProp.close();
+    }
+
+    if (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) {
+      triggerRef.current.focus();
+    }
+
+    if (onCloseProp) {
+      onCloseProp();
+    }
+  };
+
+  return {
+    state: state,
+    onClose: onClose
+  };
 };
 
 export default useOverlayPanelState;

package/lib/hooks/useOverlayPanelState/useOverlayPanelState.test.js

@@ -7,8 +7,12 @@ test('default useOverlayPanelState', function () {
       result = _renderHook.result;
 
   expect(result.current).toEqual(expect.objectContaining({
-    open: expect.any(Function),
-    close: expect.any(Function),
-    toggle: expect.any(Function)
+    state: {
+      open: expect.any(Function),
+      close: expect.any(Function),
+      toggle: expect.any(Function),
+      isOpen: expect.any(Boolean)
+    },
+    onClose: expect.any(Function)
   }));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.1.0-alpha.15",
+  "version": "1.1.0-alpha.16",
   "description": "PingUX themeable React component library",
   "author": "uxdev@pingidentity.com",
   "license": "Apache-2.0",
@@ -78,7 +78,7 @@
     "@react-aria/color": "^3.0.0-beta.2",
     "@react-aria/combobox": "^3.0.0",
     "@react-aria/dialog": "^3.1.2",
-    "@react-aria/focus": "^3.2.3",
+    "@react-aria/focus": "^3.5.0",
     "@react-aria/grid": "^3.0.0-beta.1",
     "@react-aria/i18n": "^3.3.0",
     "@react-aria/interactions": "^3.5.0",