feat(SideNav): add onOverlayClick handler (#8296)

* feat(SideNav): add onOverlayClick handler

* docs(UIShell): collapse side nav on overlay click

* chore: update snapshots

Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: 3 people

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -7151,6 +7151,9 @@ Map {
       "isRail": Object {
         "type": "bool",
       },
+      "onOverlayClick": Object {
+        "type": "func",
+      },
       "onToggle": Object {
         "type": "func",
       },

packages/react/src/components/UIShell/SideNav.js

@@ -33,6 +33,7 @@ const SideNav = React.forwardRef(function SideNav(props, ref) {
     isPersistent,
     addFocusListeners,
     addMouseListeners,
+    onOverlayClick,
     ...other
   } = props;
 
@@ -121,7 +122,10 @@ const SideNav = React.forwardRef(function SideNav(props, ref) {
 
   return (
     <>
-      {isFixedNav ? null : <div className={overlayClassName} />}
+      {isFixedNav ? null : (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+        <div className={overlayClassName} onClick={onOverlayClick} />
+      )}
       <nav
         aria-hidden={!expanded}
         ref={ref}
@@ -204,6 +208,13 @@ SideNav.propTypes = {
    */
   isRail: PropTypes.bool,
 
+  /**
+   * An optional listener that is called when the SideNav overlay is clicked
+   *
+   * @param {object} event
+   */
+  onOverlayClick: PropTypes.func,
+
   /**
    * An optional listener that is called when an event that would cause
    * toggling the SideNav occurs.

packages/react/src/components/UIShell/UIShell-story.js

@@ -842,7 +842,8 @@ export const SideNavRailWHeader = withReadme(readme, () => (
           <SideNav
             aria-label="Side navigation"
             isRail
-            expanded={isSideNavExpanded}>
+            expanded={isSideNavExpanded}
+            onOverlayClick={onClickSideNavExpand}>
             <SideNavItems>
               <SideNavMenu renderIcon={Fade16} title="Category title">
                 <SideNavMenuItem href="javascript:void(0)">