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

package/es/components/SideNav.js

@@ -344,6 +344,11 @@ function SideNavRenderFunction(_ref, ref) {
       setInternalIsTreeview(value);
     }
   };
+  const SideNavToggleButton = /*#__PURE__*/React.createElement(SideNavToggle, {
+    className: !expandedState ? `${prefix}--side-nav__toggle--collapsed` : '',
+    renderIcon: expandedState ? SidePanelClose : SidePanelOpen,
+    onClick: () => setExpandedState(!expandedState)
+  }, sideNavToggleText);
   return /*#__PURE__*/React.createElement(SideNavContext.Provider, {
     value: {
       expanded,
@@ -364,10 +369,9 @@ function SideNavRenderFunction(_ref, ref) {
     ref: navRef,
     className: `${prefix}--side-nav__navigation ${className}`,
     inert: !isRail && navType !== SIDE_NAV_TYPE.PANEL && !(expanded || isLg) ? -1 : undefined
-  }, accessibilityLabel, eventHandlers, other), childrenToRender, navType === SIDE_NAV_TYPE.PANEL && /*#__PURE__*/React.createElement(SideNavToggle, {
-    renderIcon: expandedState ? SidePanelClose : SidePanelOpen,
-    onClick: () => setExpandedState(!expandedState)
-  }, sideNavToggleText)));
+  }, accessibilityLabel, eventHandlers, other), childrenToRender, navType === SIDE_NAV_TYPE.PANEL && (expandedState ? SideNavToggleButton : /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--side-nav__toggle-container`
+  }, SideNavToggleButton))));
 }
 const SideNav = /*#__PURE__*/React.forwardRef(SideNavRenderFunction);
 SideNav.displayName = 'SideNav';

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/es/components/SideNavToggle.d.ts

@@ -6,6 +6,10 @@
  */
 import React, { ReactNode } from 'react';
 interface SideNavToggleProps {
+    /**
+     * Specify an optional className to be applied to the button node
+     */
+    className?: string;
     /**
      * Specify the text content for the link
      */

package/es/components/SideNavToggle.js

@@ -6,6 +6,7 @@
  */
 
 import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
+import cx from '../_virtual/index.js';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { SideNavIcon } from '@carbon/react';
@@ -13,6 +14,7 @@ import { usePrefix } from '../internal/usePrefix.js';
 
 const SideNavToggle = /*#__PURE__*/React.forwardRef(function SideNavToggle(_ref, ref) {
   let {
+    className: customClassName,
     renderIcon: IconElement,
     tabIndex,
     children,
@@ -20,7 +22,9 @@ const SideNavToggle = /*#__PURE__*/React.forwardRef(function SideNavToggle(_ref,
   } = _ref;
   const prefix = usePrefix();
   return /*#__PURE__*/React.createElement("button", _extends({
-    className: `${prefix}--side-nav__toggle`,
+    className: cx(customClassName, {
+      [`${prefix}--side-nav__toggle`]: true
+    }),
     ref: ref,
     type: "button",
     tabIndex: tabIndex ?? 0
@@ -34,6 +38,10 @@ SideNavToggle.propTypes = {
    * Specify the text content for the toggle
    */
   children: PropTypes.node,
+  /**
+   * Specify an optional className to be applied to the button node
+   */
+  className: PropTypes.string,
   /**
    * Provide an optional function to be called when clicked
    */

package/lib/components/SideNav.js

@@ -346,6 +346,11 @@ function SideNavRenderFunction(_ref, ref) {
       setInternalIsTreeview(value);
     }
   };
+  const SideNavToggleButton = /*#__PURE__*/React.createElement(SideNavToggle.SideNavToggle, {
+    className: !expandedState ? `${prefix}--side-nav__toggle--collapsed` : '',
+    renderIcon: expandedState ? bucket15.SidePanelClose : bucket15.SidePanelOpen,
+    onClick: () => setExpandedState(!expandedState)
+  }, sideNavToggleText);
   return /*#__PURE__*/React.createElement(SideNavContext.Provider, {
     value: {
       expanded,
@@ -366,10 +371,9 @@ function SideNavRenderFunction(_ref, ref) {
     ref: navRef,
     className: `${prefix}--side-nav__navigation ${className}`,
     inert: !isRail && navType !== SIDE_NAV_TYPE.PANEL && !(expanded || isLg) ? -1 : undefined
-  }, accessibilityLabel, eventHandlers, other), childrenToRender, navType === SIDE_NAV_TYPE.PANEL && /*#__PURE__*/React.createElement(SideNavToggle.SideNavToggle, {
-    renderIcon: expandedState ? bucket15.SidePanelClose : bucket15.SidePanelOpen,
-    onClick: () => setExpandedState(!expandedState)
-  }, sideNavToggleText)));
+  }, accessibilityLabel, eventHandlers, other), childrenToRender, navType === SIDE_NAV_TYPE.PANEL && (expandedState ? SideNavToggleButton : /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--side-nav__toggle-container`
+  }, SideNavToggleButton))));
 }
 const SideNav = /*#__PURE__*/React.forwardRef(SideNavRenderFunction);
 SideNav.displayName = 'SideNav';

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/lib/components/SideNavToggle.d.ts

@@ -6,6 +6,10 @@
  */
 import React, { ReactNode } from 'react';
 interface SideNavToggleProps {
+    /**
+     * Specify an optional className to be applied to the button node
+     */
+    className?: string;
     /**
      * Specify the text content for the link
      */

package/lib/components/SideNavToggle.js

@@ -10,6 +10,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
+var index = require('../_virtual/index.js');
 var PropTypes = require('prop-types');
 var React = require('react');
 var react = require('@carbon/react');
@@ -17,6 +18,7 @@ var usePrefix = require('../internal/usePrefix.js');
 
 const SideNavToggle = /*#__PURE__*/React.forwardRef(function SideNavToggle(_ref, ref) {
   let {
+    className: customClassName,
     renderIcon: IconElement,
     tabIndex,
     children,
@@ -24,7 +26,9 @@ const SideNavToggle = /*#__PURE__*/React.forwardRef(function SideNavToggle(_ref,
   } = _ref;
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({
-    className: `${prefix}--side-nav__toggle`,
+    className: index.default(customClassName, {
+      [`${prefix}--side-nav__toggle`]: true
+    }),
     ref: ref,
     type: "button",
     tabIndex: tabIndex ?? 0
@@ -38,6 +42,10 @@ SideNavToggle.propTypes = {
    * Specify the text content for the toggle
    */
   children: PropTypes.node,
+  /**
+   * Specify an optional className to be applied to the button node
+   */
+  className: PropTypes.string,
   /**
    * Provide an optional function to be called when clicked
    */

package/package.json

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

package/scss/styles/_side-nav.scss

@@ -335,3 +335,14 @@ div:has(.#{$prefix}--header)
     overflow: visible;
   }
 }
+
+.#{$prefix}--side-nav__toggle-container {
+  position: absolute;
+  background: $background;
+  inline-size: 100%;
+  inset-block-end: 0;
+
+  .#{$prefix}--side-nav__toggle.#{$prefix}--side-nav__toggle--collapsed:hover {
+    background: $background-hover;
+  }
+}