@carbon-labs/react-ui-shell 0.27.0 → 0.28.0

package/es/components/SideNavMenu.d.ts

@@ -31,6 +31,11 @@ export interface SideNavMenuProps {
      * Specifies whether the SideNavMenu is in a large variation.
      */
     large?: boolean;
+    /**
+     *
+     * A custom onClick handler hook that runs when the SideNavMenu is toggled.
+     */
+    onMenuToggle?: () => void;
     /**
      * A custom icon to render next to the SideNavMenu title. This can be a function returning JSX or JSX itself.
      */

package/es/components/SideNavMenu.js

@@ -30,7 +30,8 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     large = false,
     renderIcon: IconElement,
     isSideNavExpanded,
-    title
+    title,
+    onMenuToggle
   } = _ref;
   const depth = propDepth;
   const {
@@ -149,6 +150,9 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
   function handleKeyDown(event) {
     if (match(event, Escape)) {
       setIsExpanded(false);
+      if (onMenuToggle) {
+        onMenuToggle();
+      }
     }
     if (isTreeview) {
       const node = event.target;
@@ -161,6 +165,9 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
         // collapse menu
         if (isMenu && sideNavExpanded) {
           if (isExpanded == 'true') {
+            if (onMenuToggle) {
+              onMenuToggle();
+            }
             setIsExpanded(false);
 
             // go to previous level's side nav menu button
@@ -185,6 +192,9 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
         // expand menu when sidenav is expanded
         if (isMenu && sideNavExpanded) {
           setIsExpanded(true);
+          if (onMenuToggle) {
+            onMenuToggle();
+          }
 
           // if already expanded, focus on first element
           if (isExpanded == 'true') {
@@ -225,6 +235,10 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     "aria-expanded": isExpanded,
     className: buttonClassName,
     onClick: () => {
+      if (onMenuToggle) {
+        onMenuToggle();
+      }
+
       // only when sidenav is panel view
       if (navType == SIDE_NAV_TYPE.PANEL && !isExpanded && firstLink.current && !sideNavExpanded) {
         setOpenPopover(!openPopover);
@@ -294,6 +308,11 @@ SideNavMenu.propTypes = {
    * Specify if this is a large variation of the SideNavMenu
    */
   large: PropTypes.bool,
+  /**
+   *
+   * A custom onClick handler hook that runs when the SideNavMenu is toggled.
+   */
+  onMenuToggle: PropTypes.func,
   /**
    * Pass in a custom icon to render next to the `SideNavMenu` title
    */

package/lib/components/SideNavMenu.d.ts

@@ -31,6 +31,11 @@ export interface SideNavMenuProps {
      * Specifies whether the SideNavMenu is in a large variation.
      */
     large?: boolean;
+    /**
+     *
+     * A custom onClick handler hook that runs when the SideNavMenu is toggled.
+     */
+    onMenuToggle?: () => void;
     /**
      * A custom icon to render next to the SideNavMenu title. This can be a function returning JSX or JSX itself.
      */

package/lib/components/SideNavMenu.js

@@ -32,7 +32,8 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     large = false,
     renderIcon: IconElement,
     isSideNavExpanded,
-    title
+    title,
+    onMenuToggle
   } = _ref;
   const depth = propDepth;
   const {
@@ -151,6 +152,9 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
   function handleKeyDown(event) {
     if (match.match(event, keys.Escape)) {
       setIsExpanded(false);
+      if (onMenuToggle) {
+        onMenuToggle();
+      }
     }
     if (isTreeview) {
       const node = event.target;
@@ -163,6 +167,9 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
         // collapse menu
         if (isMenu && sideNavExpanded) {
           if (isExpanded == 'true') {
+            if (onMenuToggle) {
+              onMenuToggle();
+            }
             setIsExpanded(false);
 
             // go to previous level's side nav menu button
@@ -187,6 +194,9 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
         // expand menu when sidenav is expanded
         if (isMenu && sideNavExpanded) {
           setIsExpanded(true);
+          if (onMenuToggle) {
+            onMenuToggle();
+          }
 
           // if already expanded, focus on first element
           if (isExpanded == 'true') {
@@ -227,6 +237,10 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     "aria-expanded": isExpanded,
     className: buttonClassName,
     onClick: () => {
+      if (onMenuToggle) {
+        onMenuToggle();
+      }
+
       // only when sidenav is panel view
       if (navType == SideNav.SIDE_NAV_TYPE.PANEL && !isExpanded && firstLink.current && !sideNavExpanded) {
         setOpenPopover(!openPopover);
@@ -296,6 +310,11 @@ SideNavMenu.propTypes = {
    * Specify if this is a large variation of the SideNavMenu
    */
   large: PropTypes.bool,
+  /**
+   *
+   * A custom onClick handler hook that runs when the SideNavMenu is toggled.
+   */
+  onMenuToggle: PropTypes.func,
   /**
    * Pass in a custom icon to render next to the `SideNavMenu` title
    */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-ui-shell",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -33,5 +33,5 @@
   "dependencies": {
     "@ibm/telemetry-js": "^1.9.1"
   },
-  "gitHead": "94522ab158f8e47f9d0312eccccd32ea35dd1ae6"
+  "gitHead": "4a8aca9677b353f76cfcd7021a2665d95a22782c"
 }