@carbon-labs/react-ui-shell 0.44.0 → 0.46.0

package/README.md

@@ -29,17 +29,19 @@ To use this package you will need to import components from both `@carbon/react`
 and `@carbon-labs/react-ui-shell` to compose the UI Shell. The following
 components are provided by `@carbon-labs/react-ui-shell`:
 
+- `HeaderDivider`
+- `HeaderPanel`
+- `HeaderPopover`
+- `HeaderPopoverActions`
+- `HeaderPopoverButton`
+- `HeaderPopoverContent`
 - `SideNav`
 - `SideNavItems`
 - `SideNavLink`
 - `SideNavMenu`
 - `SideNavMenuItem`
-- `HeaderPopover`
-- `HeaderPopoverActions`
-- `HeaderPopoverButton`
-- `HeaderPopoverContent`
-- `HeaderDivider`
-- `SharkFinIcon`
+- `SideNavSlot`
+- `TrialCountdown`
 
 ```jsx
 import { SideNav } from '@carbon-labs/react-ui-shell';

package/es/components/SideNav.js

@@ -155,6 +155,7 @@ function SideNavRenderFunction(_ref, ref) {
   useEffect(() => {
     if (sideNavRef.current) {
       const backButton = sideNavRef?.current.querySelector(`.${prefix}--side-nav__back-button`);
+      const slotElement = sideNavRef?.current.querySelector(`.${prefix}--side-nav__slot`);
       const firstElement = sideNavRef?.current?.querySelector('a, button');
       if (navType == SIDE_NAV_TYPE.PANEL || expanded) {
         if (isSm && backButton) {
@@ -165,6 +166,12 @@ function SideNavRenderFunction(_ref, ref) {
           }
         } else if (firstElement) {
           firstElement.tabIndex = 0;
+          if (slotElement) {
+            const firstElementAfterSlot = slotElement.nextElementSibling?.nextElementSibling?.querySelector('a, button');
+            if (firstElementAfterSlot) {
+              firstElementAfterSlot.tabIndex = 0;
+            }
+          }
         }
       }
     }
@@ -346,9 +353,7 @@ function SideNavRenderFunction(_ref, ref) {
   function resetNodeTabIndices() {
     const items = sideNavRef?.current?.querySelectorAll('[tabIndex="0"]') ?? [];
     items.forEach(item => {
-      if (item.classList.contains(`${prefix}--side-nav__toggle`) || item.classList.contains(`${prefix}--side-nav__back-button`) ||
-      // checks if a link is in primary nav
-      item.classList.contains(`${prefix}--side-nav__link`) && item.closest(`ul`)?.getAttribute('aria-label') === ariaLabel) {
+      if (item.classList.contains(`${prefix}--side-nav__toggle`) || item.classList.contains(`${prefix}--side-nav__back-button`) || item.closest(`.${prefix}--side-nav__slot-item`) || item.classList.contains(`${prefix}--side-nav__link`) && item.closest('ul')?.getAttribute('aria-label') === ariaLabel) {
         return;
       }
       item.tabIndex = -1;

package/es/components/SideNavMenu.js

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { SideNavIcon, Layer, Button } from '@carbon/react';
 import { breakpoints } from '../node_modules/@carbon/layout/es/index.js';
 import cx from '../_virtual/index.js';
 import PropTypes from 'prop-types';
 import React, { useContext, useState, useRef, useEffect } from 'react';
 import { CARBON_SIDENAV_ITEMS } from './_utils.js';
 import { useId } from '../internal/useId.js';
-import { SideNavIcon, Button } from '@carbon/react';
-import { Escape, ArrowLeft as ArrowLeft$1, ArrowRight } from '../internal/keyboard/keys.js';
+import { Escape, Tab, ArrowLeft as ArrowLeft$1, ArrowRight } from '../internal/keyboard/keys.js';
 import { match } from '../internal/keyboard/match.js';
 import { usePrefix } from '../internal/usePrefix.js';
 import { SideNavContext, SIDE_NAV_TYPE } from './SideNav.js';
@@ -184,6 +184,12 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
       const isMenu = node.hasAttribute('aria-expanded');
       const isExpanded = node.getAttribute('aria-expanded');
       const parent = parentSideNavMenu(node);
+      if (match(event, Tab)) {
+        const slotElement = node.closest(`.${prefix}--side-nav__slot`);
+        if (slotElement) {
+          (slotElement.nextElementSibling?.nextElementSibling?.querySelector('a, button')).tabIndex = 0;
+        }
+      }
       if (match(event, ArrowLeft$1)) {
         event.stopPropagation();
 
@@ -343,7 +349,7 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     size: 20
   })) : _ChevronDown || (_ChevronDown = /*#__PURE__*/React.createElement(ChevronDown, {
     size: 20
-  })))), primary ? /*#__PURE__*/React.createElement("div", {
+  })))), primary ? /*#__PURE__*/React.createElement(Layer, null, /*#__PURE__*/React.createElement("div", {
     className: primaryClassNames
   }, /*#__PURE__*/React.createElement(SideNavItems, {
     accessibilityLabel: {
@@ -356,7 +362,7 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     onClick: handleOnBackButtonClick,
     className: `${prefix}--side-nav__back-button`,
     renderIcon: backButtonRenderIcon
-  }, backButtonTitle), childrenToRender)) : /*#__PURE__*/React.createElement("ul", {
+  }, backButtonTitle), childrenToRender))) : /*#__PURE__*/React.createElement("ul", {
     className: `${prefix}--side-nav__menu`,
     role: "group"
   }, childrenToRender));

package/es/components/SideNavSlot.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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, { ComponentType } from 'react';
+export interface SideNavSlotProps {
+    /**
+     * Provide children to be rendered inside the `SideNavSlot`
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+    /**
+     * Provide an icon to render when the SideNav is in rail mode and collapsed.
+     * The icon will be shown instead of child component when collapsed.
+     */
+    renderIcon?: ComponentType;
+}
+export declare const SideNavSlot: React.FC<SideNavSlotProps>;

package/es/components/SideNavSlot.js

@@ -0,0 +1,54 @@
+/**
+ * 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 '../_virtual/index.js';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { usePrefix } from '../internal/usePrefix.js';
+
+const SideNavSlot = _ref => {
+  let {
+    children,
+    className: customClassName,
+    renderIcon: IconElement
+  } = _ref;
+  const prefix = usePrefix();
+  const className = cx(`${prefix}--side-nav__slot`, customClassName);
+  const handleKeyDown = e => {
+    if (e.key === 'ArrowDown') {
+      e.stopPropagation();
+    }
+  };
+  return /*#__PURE__*/React.createElement("li", {
+    className: className
+  }, IconElement && /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--side-nav__icon`
+  }, /*#__PURE__*/React.createElement(IconElement, null)), /*#__PURE__*/React.createElement("div", {
+    role: "presentation",
+    tabIndex: -1,
+    onKeyDown: handleKeyDown,
+    className: `${prefix}--side-nav__slot-item`
+  }, children));
+};
+SideNavSlot.propTypes = {
+  /**
+   * Provide children to be rendered inside the `SideNavSlot`
+   */
+  children: PropTypes.node,
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes.string,
+  /**
+   * Provide an icon to render when the SideNav is in rail mode and collapsed.
+   * The icon will be shown instead of child component when collapsed.
+   */
+  // @ts-expect-error - PropTypes are unable to cover this case.
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+};
+
+export { SideNavSlot };

package/es/index.d.ts

@@ -18,3 +18,4 @@ export { HeaderPanel } from './components/HeaderPanel';
 export { SharkFinIcon } from './components/SharkFinIcon';
 export { HeaderDivider } from './components/HeaderDivider';
 export { TrialCountdown } from './components/TrialCountdown';
+export { SideNavSlot } from './components/SideNavSlot';

package/es/index.js

@@ -17,3 +17,4 @@ export { HeaderPanel } from './components/HeaderPanel.js';
 export { SharkFinIcon } from './components/SharkFinIcon.js';
 export { HeaderDivider } from './components/HeaderDivider.js';
 export { TrialCountdown } from './components/TrialCountdown.js';
+export { SideNavSlot } from './components/SideNavSlot.js';

package/lib/components/SideNav.js

@@ -157,6 +157,7 @@ function SideNavRenderFunction(_ref, ref) {
   React.useEffect(() => {
     if (sideNavRef.current) {
       const backButton = sideNavRef?.current.querySelector(`.${prefix}--side-nav__back-button`);
+      const slotElement = sideNavRef?.current.querySelector(`.${prefix}--side-nav__slot`);
       const firstElement = sideNavRef?.current?.querySelector('a, button');
       if (navType == SIDE_NAV_TYPE.PANEL || expanded) {
         if (isSm && backButton) {
@@ -167,6 +168,12 @@ function SideNavRenderFunction(_ref, ref) {
           }
         } else if (firstElement) {
           firstElement.tabIndex = 0;
+          if (slotElement) {
+            const firstElementAfterSlot = slotElement.nextElementSibling?.nextElementSibling?.querySelector('a, button');
+            if (firstElementAfterSlot) {
+              firstElementAfterSlot.tabIndex = 0;
+            }
+          }
         }
       }
     }
@@ -348,9 +355,7 @@ function SideNavRenderFunction(_ref, ref) {
   function resetNodeTabIndices() {
     const items = sideNavRef?.current?.querySelectorAll('[tabIndex="0"]') ?? [];
     items.forEach(item => {
-      if (item.classList.contains(`${prefix}--side-nav__toggle`) || item.classList.contains(`${prefix}--side-nav__back-button`) ||
-      // checks if a link is in primary nav
-      item.classList.contains(`${prefix}--side-nav__link`) && item.closest(`ul`)?.getAttribute('aria-label') === ariaLabel) {
+      if (item.classList.contains(`${prefix}--side-nav__toggle`) || item.classList.contains(`${prefix}--side-nav__back-button`) || item.closest(`.${prefix}--side-nav__slot-item`) || item.classList.contains(`${prefix}--side-nav__link`) && item.closest('ul')?.getAttribute('aria-label') === ariaLabel) {
         return;
       }
       item.tabIndex = -1;

package/lib/components/SideNavMenu.js

@@ -7,13 +7,13 @@
 
 'use strict';
 
+var react = require('@carbon/react');
 var index$1 = require('../node_modules/@carbon/layout/es/index.js');
 var index = require('../_virtual/index.js');
 var PropTypes = require('prop-types');
 var React = require('react');
 var _utils = require('./_utils.js');
 var useId = require('../internal/useId.js');
-var react = require('@carbon/react');
 var keys = require('../internal/keyboard/keys.js');
 var match = require('../internal/keyboard/match.js');
 var usePrefix = require('../internal/usePrefix.js');
@@ -186,6 +186,12 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
       const isMenu = node.hasAttribute('aria-expanded');
       const isExpanded = node.getAttribute('aria-expanded');
       const parent = parentSideNavMenu(node);
+      if (match.match(event, keys.Tab)) {
+        const slotElement = node.closest(`.${prefix}--side-nav__slot`);
+        if (slotElement) {
+          (slotElement.nextElementSibling?.nextElementSibling?.querySelector('a, button')).tabIndex = 0;
+        }
+      }
       if (match.match(event, keys.ArrowLeft)) {
         event.stopPropagation();
 
@@ -345,7 +351,7 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     size: 20
   })) : _ChevronDown || (_ChevronDown = /*#__PURE__*/React.createElement(bucket3.ChevronDown, {
     size: 20
-  })))), primary ? /*#__PURE__*/React.createElement("div", {
+  })))), primary ? /*#__PURE__*/React.createElement(react.Layer, null, /*#__PURE__*/React.createElement("div", {
     className: primaryClassNames
   }, /*#__PURE__*/React.createElement(SideNavItems.SideNavItems, {
     accessibilityLabel: {
@@ -358,7 +364,7 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     onClick: handleOnBackButtonClick,
     className: `${prefix}--side-nav__back-button`,
     renderIcon: backButtonRenderIcon
-  }, backButtonTitle), childrenToRender)) : /*#__PURE__*/React.createElement("ul", {
+  }, backButtonTitle), childrenToRender))) : /*#__PURE__*/React.createElement("ul", {
     className: `${prefix}--side-nav__menu`,
     role: "group"
   }, childrenToRender));

package/lib/components/SideNavSlot.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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, { ComponentType } from 'react';
+export interface SideNavSlotProps {
+    /**
+     * Provide children to be rendered inside the `SideNavSlot`
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+    /**
+     * Provide an icon to render when the SideNav is in rail mode and collapsed.
+     * The icon will be shown instead of child component when collapsed.
+     */
+    renderIcon?: ComponentType;
+}
+export declare const SideNavSlot: React.FC<SideNavSlotProps>;

package/lib/components/SideNavSlot.js

@@ -0,0 +1,56 @@
+/**
+ * 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 index = require('../_virtual/index.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var usePrefix = require('../internal/usePrefix.js');
+
+const SideNavSlot = _ref => {
+  let {
+    children,
+    className: customClassName,
+    renderIcon: IconElement
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const className = index.default(`${prefix}--side-nav__slot`, customClassName);
+  const handleKeyDown = e => {
+    if (e.key === 'ArrowDown') {
+      e.stopPropagation();
+    }
+  };
+  return /*#__PURE__*/React.createElement("li", {
+    className: className
+  }, IconElement && /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--side-nav__icon`
+  }, /*#__PURE__*/React.createElement(IconElement, null)), /*#__PURE__*/React.createElement("div", {
+    role: "presentation",
+    tabIndex: -1,
+    onKeyDown: handleKeyDown,
+    className: `${prefix}--side-nav__slot-item`
+  }, children));
+};
+SideNavSlot.propTypes = {
+  /**
+   * Provide children to be rendered inside the `SideNavSlot`
+   */
+  children: PropTypes.node,
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes.string,
+  /**
+   * Provide an icon to render when the SideNav is in rail mode and collapsed.
+   * The icon will be shown instead of child component when collapsed.
+   */
+  // @ts-expect-error - PropTypes are unable to cover this case.
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+};
+
+exports.SideNavSlot = SideNavSlot;

package/lib/index.d.ts

@@ -18,3 +18,4 @@ export { HeaderPanel } from './components/HeaderPanel';
 export { SharkFinIcon } from './components/SharkFinIcon';
 export { HeaderDivider } from './components/HeaderDivider';
 export { TrialCountdown } from './components/TrialCountdown';
+export { SideNavSlot } from './components/SideNavSlot';

package/lib/index.js

@@ -19,6 +19,7 @@ var HeaderPanel = require('./components/HeaderPanel.js');
 var SharkFinIcon = require('./components/SharkFinIcon.js');
 var HeaderDivider = require('./components/HeaderDivider.js');
 var TrialCountdown = require('./components/TrialCountdown.js');
+var SideNavSlot = require('./components/SideNavSlot.js');
 
 
 
@@ -38,3 +39,4 @@ exports.HeaderPanel = HeaderPanel.HeaderPanel;
 exports.SharkFinIcon = SharkFinIcon.SharkFinIcon;
 exports.HeaderDivider = HeaderDivider.HeaderDivider;
 exports.TrialCountdown = TrialCountdown.TrialCountdown;
+exports.SideNavSlot = SideNavSlot.SideNavSlot;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-ui-shell",
-  "version": "0.44.0",
+  "version": "0.46.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -41,5 +41,5 @@
   "dependencies": {
     "@ibm/telemetry-js": "^1.9.1"
   },
-  "gitHead": "425b9b0b5fbd6937849032a39c66ccf2726d4c3b"
+  "gitHead": "25a4ee32036576869be9cb12de891826699587e8"
 }

package/scss/styles/_content.scss

@@ -8,6 +8,7 @@
 @use '@carbon/styles/scss/utilities/convert' as convert;
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
 
 $prefix: 'cds' !default;
 
@@ -30,3 +31,13 @@ div:has(.#{$prefix}--side-nav--panel.#{$prefix}--side-nav--expanded)
   ~ .#{$prefix}--content {
   margin-inline-start: $spacing-09;
 }
+
+// when rail is hidden, remove spacing that accounts for rail
+@each $breakpoint in ('sm', 'md', 'lg', 'xlg', 'max') {
+  .#{$prefix}--side-nav--rail.#{$prefix}--side-nav--hide-rail-breakpoint-down-#{$breakpoint}
+    ~ .#{$prefix}--content {
+    @include breakpoint-down($breakpoint) {
+      margin-inline-start: 0;
+    }
+  }
+}

package/scss/styles/_side-nav.scss

@@ -32,7 +32,7 @@ div:has(.#{$prefix}--header)
 }
 
 //----------------------------------------------------------------------------
-// Side-nav Collapsible
+// Collapsible
 //----------------------------------------------------------------------------
 .#{$prefix}--side-nav--collapsible.#{$prefix}--side-nav--ux {
   inline-size: 0;
@@ -43,7 +43,7 @@ div:has(.#{$prefix}--header)
 }
 
 //----------------------------------------------------------------------------
-// Treeview Side-nav
+// Treeview
 //----------------------------------------------------------------------------
 
 .#{$prefix}--side-nav__icon:not(.#{$prefix}--side-nav__submenu-chevron) {
@@ -156,7 +156,7 @@ div:has(.#{$prefix}--header)
 }
 
 //----------------------------------------------------------------------------
-// Side-nav Panel
+// Panel
 //----------------------------------------------------------------------------
 .#{$prefix}--side-nav--panel {
   z-index: 7999; /* needs to be below header */
@@ -396,6 +396,7 @@ div:has(.#{$prefix}--header)
 //----------------------------------------------------------------------------
 .#{$prefix}--side-nav--rail {
   z-index: 7999; /* needs to be below header */
+  border-inline-end: 1px solid $border-subtle;
 }
 
 @each $breakpoint in ('sm', 'md', 'lg', 'xlg', 'max') {
@@ -417,7 +418,44 @@ div:has(.#{$prefix}--header)
     background-color $transition-expansion $standard-easing;
 }
 
-// mobile
+//----------------------------------------------------------------------------
+// Slot
+//----------------------------------------------------------------------------
+.#{$prefix}--side-nav__slot {
+  display: flex;
+  align-items: center;
+  margin: 0 $spacing-05;
+  block-size: 2rem;
+}
+
+.#{$prefix}--side-nav__slot-item {
+  inline-size: 100%;
+}
+
+// icon shown when rail is collapsed
+.#{$prefix}--side-nav__slot .#{$prefix}--side-nav__icon {
+  display: none;
+}
+
+.#{$prefix}--side-nav--rail:not(.#{$prefix}--side-nav--expanded)
+  .#{$prefix}--side-nav__slot
+  .#{$prefix}--side-nav__icon {
+  display: block;
+}
+
+// hide slot item when rail collapsed
+.#{$prefix}--side-nav--rail .#{$prefix}--side-nav__slot-item {
+  display: none;
+}
+
+.#{$prefix}--side-nav--rail.#{$prefix}--side-nav--expanded
+  .#{$prefix}--side-nav__slot-item {
+  display: block;
+}
+
+//----------------------------------------------------------------------------
+// Mobile
+//----------------------------------------------------------------------------
 @include breakpoint.breakpoint-down(md) {
   .#{$prefix}--side-nav--collapsible.#{$prefix}--side-nav--expanded {
     inline-size: 100%;