@carbon-labs/react-ui-shell 0.68.0 → 0.70.0

package/README.md

@@ -41,6 +41,7 @@ components are provided by `@carbon-labs/react-ui-shell`:
 - `SideNavMenu`
 - `SideNavMenuItem`
 - `SideNavSlot`
+- `SideNavTitle`
 - `TrialCountdown`
 
 ```jsx

package/es/components/SideNavMenu.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { ArrowLeft, ChevronRight, ChevronDown } from '@carbon/icons-react';
+import { ChevronRight, ChevronDown, ArrowLeft } from '@carbon/icons-react';
 import { SideNavIcon, Layer, Button } from '@carbon/react';
 import { breakpoints } from '../node_modules/@carbon/layout/es/index.js';
 import cx from 'classnames';
@@ -332,7 +332,7 @@ const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(
     ref: menuRef,
     type: "button",
     tabIndex: isTreeview ? -1 : 0
-  }, IconElement && /*#__PURE__*/React__default.createElement(SideNavIcon, null, /*#__PURE__*/React__default.createElement(IconElement, null)), !sideNavExpanded && /*#__PURE__*/React__default.createElement("div", {
+  }, IconElement && /*#__PURE__*/React__default.createElement(SideNavIcon, null, /*#__PURE__*/React__default.createElement(IconElement, null)), !sideNavExpanded && navType == SIDE_NAV_TYPE.PANEL && /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--side-nav--panel-submenu-caret-container`
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--side-nav--panel-submenu-caret`

package/es/components/SideNavTitle.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+export interface SideNavTitleProps {
+    /**
+     * Provide the contents of the SideNavTitle.
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+}
+export declare const SideNavTitle: React.FC<SideNavTitleProps>;

package/es/components/SideNavTitle.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import { usePrefix } from '../internal/usePrefix.js';
+import { SideNavDivider } from '@carbon/react';
+
+var _SideNavDivider;
+const SideNavTitle = ({
+  children,
+  className: customClassName
+}) => {
+  const prefix = usePrefix();
+  const className = cx(`${prefix}--side-nav__title`, customClassName);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("li", {
+    className: className
+  }, children), _SideNavDivider || (_SideNavDivider = /*#__PURE__*/React__default.createElement(SideNavDivider, null)));
+};
+SideNavTitle.propTypes = {
+  /**
+   * Provide the contents of the SideNavTitle.
+   */
+  children: PropTypes.node,
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes.string
+};
+
+export { SideNavTitle };

package/es/index.d.ts

@@ -19,3 +19,4 @@ export { HeaderDivider } from './components/HeaderDivider';
 export { TrialCountdown } from './components/TrialCountdown';
 export * as Profile from './components/Profile';
 export { SideNavSlot } from './components/SideNavSlot';
+export { SideNavTitle } from './components/SideNavTitle';

package/es/index.js

@@ -19,3 +19,4 @@ export { TrialCountdown } from './components/TrialCountdown.js';
 import * as Profile from './components/Profile.js';
 export { Profile };
 export { SideNavSlot } from './components/SideNavSlot.js';
+export { SideNavTitle } from './components/SideNavTitle.js';

package/lib/components/SideNavMenu.js

@@ -334,7 +334,7 @@ const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(
     ref: menuRef,
     type: "button",
     tabIndex: isTreeview ? -1 : 0
-  }, IconElement && /*#__PURE__*/React__default.createElement(react.SideNavIcon, null, /*#__PURE__*/React__default.createElement(IconElement, null)), !sideNavExpanded && /*#__PURE__*/React__default.createElement("div", {
+  }, IconElement && /*#__PURE__*/React__default.createElement(react.SideNavIcon, null, /*#__PURE__*/React__default.createElement(IconElement, null)), !sideNavExpanded && navType == SideNav.SIDE_NAV_TYPE.PANEL && /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--side-nav--panel-submenu-caret-container`
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--side-nav--panel-submenu-caret`

package/lib/components/SideNavTitle.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+export interface SideNavTitleProps {
+    /**
+     * Provide the contents of the SideNavTitle.
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+}
+export declare const SideNavTitle: React.FC<SideNavTitleProps>;

package/lib/components/SideNavTitle.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+var cx = require('classnames');
+var PropTypes = require('prop-types');
+var React__default = require('react');
+var usePrefix = require('../internal/usePrefix.js');
+var react = require('@carbon/react');
+
+var _SideNavDivider;
+const SideNavTitle = ({
+  children,
+  className: customClassName
+}) => {
+  const prefix = usePrefix.usePrefix();
+  const className = cx(`${prefix}--side-nav__title`, customClassName);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("li", {
+    className: className
+  }, children), _SideNavDivider || (_SideNavDivider = /*#__PURE__*/React__default.createElement(react.SideNavDivider, null)));
+};
+SideNavTitle.propTypes = {
+  /**
+   * Provide the contents of the SideNavTitle.
+   */
+  children: PropTypes.node,
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes.string
+};
+
+exports.SideNavTitle = SideNavTitle;

package/lib/index.d.ts

@@ -19,3 +19,4 @@ export { HeaderDivider } from './components/HeaderDivider';
 export { TrialCountdown } from './components/TrialCountdown';
 export * as Profile from './components/Profile';
 export { SideNavSlot } from './components/SideNavSlot';
+export { SideNavTitle } from './components/SideNavTitle';

package/lib/index.js

@@ -20,6 +20,7 @@ var HeaderDivider = require('./components/HeaderDivider.js');
 var TrialCountdown = require('./components/TrialCountdown.js');
 var Profile = require('./components/Profile.js');
 var SideNavSlot = require('./components/SideNavSlot.js');
+var SideNavTitle = require('./components/SideNavTitle.js');
 
 
 
@@ -40,3 +41,4 @@ exports.HeaderDivider = HeaderDivider.HeaderDivider;
 exports.TrialCountdown = TrialCountdown.TrialCountdown;
 exports.Profile = Profile;
 exports.SideNavSlot = SideNavSlot.SideNavSlot;
+exports.SideNavTitle = SideNavTitle.SideNavTitle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-ui-shell",
-  "version": "0.68.0",
+  "version": "0.70.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -42,5 +42,5 @@
   "dependencies": {
     "@ibm/telemetry-js": "^1.9.1"
   },
-  "gitHead": "d3da5ef4a94c2af71e3c06af5104b0b726473351"
+  "gitHead": "7ee50abce7452bb5bc94f5de474ffb7f72a0f234"
 }

package/scss/styles/_content.scss

@@ -16,7 +16,7 @@ $prefix: 'cds' !default;
 .#{$prefix}--side-nav--panel ~ .#{$prefix}--content,
 div:has(.#{$prefix}--side-nav--panel) ~ .#{$prefix}--content {
   margin-inline-start: $spacing-09;
-  transition: margin-inline-start $duration-fast-02, transform $duration-fast-02;
+  transition: $fast-02 motion(exit, productive);
 }
 
 .#{$prefix}--side-nav--panel.#{$prefix}--side-nav--expanded
@@ -24,6 +24,8 @@ div:has(.#{$prefix}--side-nav--panel) ~ .#{$prefix}--content {
 div:has(.#{$prefix}--side-nav--panel.#{$prefix}--side-nav--expanded)
   ~ .#{$prefix}--content {
   margin-inline-start: convert.to-rem(256px);
+  transition: $moderate-01 motion(standard, productive);
+  transition-delay: 40ms;
 }
 
 // should not be a grid influencer when used with overlay

package/scss/styles/_side-nav.scss

@@ -29,7 +29,17 @@ div:has(.#{$prefix}--header)
 }
 
 .#{$prefix}--side-nav {
+  z-index: z('header') - 1;
   overflow: visible;
+
+  // closing side-nav transition
+  transition: $fast-02 motion(exit, productive);
+}
+
+.#{$prefix}--side-nav.#{$prefix}--side-nav--expanded {
+  // opening side-nav transition
+  transition: $moderate-01 motion(standard, productive);
+  transition-delay: 40ms;
 }
 
 //----------------------------------------------------------------------------
@@ -129,6 +139,21 @@ div:has(.#{$prefix}--header)
   }
 }
 
+// SideNavTitle
+.#{$prefix}--side-nav__title {
+  @include type-style('label-01');
+
+  display: none;
+  color: $text-secondary;
+  padding-block-start: $spacing-05;
+  padding-inline-start: $spacing-05;
+  white-space: nowrap;
+}
+
+.#{$prefix}--side-nav--expanded .#{$prefix}--side-nav__title {
+  display: block;
+}
+
 // SideNavMenu
 // Level 2 / Doublewide Level 3
 // without icon
@@ -302,22 +327,25 @@ div:has(.#{$prefix}--header)
   inset-block-start: 0;
   inset-inline-start: 100%;
   transform: translateX(-100%);
-  transition: color $duration-fast-02, background-color $duration-fast-02,
-    outline $duration-fast-02;
+  transition: $fast-02 motion(exit, productive);
   will-change: inline-size;
 }
 
 .#{$prefix}--side-nav__menu-secondary-wrapper-expanded {
+  box-shadow: $spacing-02 0 convert.to-rem(6px) convert.to-rem(-3px) $shadow;
+
   inline-size: 16rem;
   overflow-y: auto;
   transform: translateX(0);
+  transition: $moderate-01 motion(standard, productive);
+  transition-delay: 40ms;
 }
 
 //----------------------------------------------------------------------------
 // Panel
 //----------------------------------------------------------------------------
 .#{$prefix}--side-nav--panel {
-  z-index: 7999; /* needs to be below header */
+  z-index: z('header') - 2;
   overflow: visible;
   border-inline-end: 1px solid $border-subtle;
 
@@ -554,10 +582,15 @@ div:has(.#{$prefix}--header)
 // Rail
 //----------------------------------------------------------------------------
 .#{$prefix}--side-nav--rail {
-  z-index: 7999; /* needs to be below header */
+  z-index: z('header') - 2;
   border-inline-end: 1px solid $border-subtle;
 }
 
+.#{$prefix}--side-nav--rail.#{$prefix}--side-nav--expanded {
+  border-inline-end: none;
+  box-shadow: $spacing-02 0 convert.to-rem(6px) convert.to-rem(-3px) $shadow;
+}
+
 @each $breakpoint in ('sm', 'md', 'lg', 'xlg', 'max') {
   .#{$prefix}--side-nav--rail.#{$prefix}--side-nav--hide-rail-breakpoint-down-#{$breakpoint} {
     @include breakpoint-down($breakpoint) {
@@ -568,13 +601,9 @@ div:has(.#{$prefix}--header)
 
 // allow overlay to display at all breakpoints
 .#{$prefix}--side-nav__overlay-active {
-  z-index: z('overlay');
-  background-color: $overlay;
+  background-color: transparent;
   block-size: 100vh;
   inline-size: 100vw;
-  opacity: 1;
-  transition: opacity $transition-expansion $standard-easing,
-    background-color $transition-expansion $standard-easing;
 }
 
 //----------------------------------------------------------------------------