@carbon-labs/react-ui-shell 0.26.0 → 0.27.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/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/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.27.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -33,5 +33,5 @@
   "dependencies": {
     "@ibm/telemetry-js": "^1.9.1"
   },
-  "gitHead": "8aa4567ca14b852315e2731e22e230f4667ec5ad"
+  "gitHead": "94522ab158f8e47f9d0312eccccd32ea35dd1ae6"
 }

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;
+  }
+}