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

package/README.md

@@ -26,7 +26,7 @@ yarn add @carbon-labs/react-ui-shell @carbon/react
 ## ⚡ Usage
 
 To use this package you will need to import components from both `@carbon/react`
-and `@carbon-labs/react-ui-shell`o compose the UI Shell. The following
+and `@carbon-labs/react-ui-shell` to compose the UI Shell. The following
 components are provided by `@carbon-labs/react-ui-shell`:
 
 - `SideNav`
@@ -35,6 +35,8 @@ components are provided by `@carbon-labs/react-ui-shell`:
 - `SideNavMenu`
 - `SideNavMenuItem`
 - `HeaderPanel`
+- `HeaderDivider`
+- `SharkFinIcon`
 
 ```jsx
 import { SideNav } from '@carbon-labs/react-ui-shell/es/index';

package/es/components/HeaderDivider.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 HeaderDividerProps {
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+}
+export declare const HeaderDivider: React.FC<HeaderDividerProps>;

package/es/components/HeaderDivider.js

@@ -0,0 +1,30 @@
+/**
+ * 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 HeaderDivider = _ref => {
+  let {
+    className
+  } = _ref;
+  const prefix = usePrefix();
+  const classNames = cx(`${prefix}--header__divider`, className);
+  return /*#__PURE__*/React.createElement("span", {
+    className: classNames
+  });
+};
+HeaderDivider.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes.string
+};
+
+export { HeaderDivider };

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/index.d.ts

@@ -15,3 +15,4 @@ export { SideNavMenuItem } from './components/SideNavMenuItem.js';
 export { HeaderContainer } from './components/HeaderContainer';
 export { HeaderPanel } from './components/HeaderPanel';
 export { SharkFinIcon } from './components/SharkFinIcon';
+export { HeaderDivider } from './components/HeaderDivider';

package/es/index.js

@@ -14,3 +14,4 @@ export { SideNavMenuItem } from './components/SideNavMenuItem.js';
 export { HeaderContainer } from './components/HeaderContainer.js';
 export { HeaderPanel } from './components/HeaderPanel.js';
 export { SharkFinIcon } from './components/SharkFinIcon.js';
+export { HeaderDivider } from './components/HeaderDivider.js';

package/es/node_modules/@carbon/icons-react/es/Icon.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { getAttributes } from '../../icon-helpers/es/index.js';
+import { getAttributes } from '../node_modules/@carbon/icon-helpers/es/index.js';
 import PropTypes from 'prop-types';
 import React from 'react';
 

package/lib/components/HeaderDivider.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 HeaderDividerProps {
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+}
+export declare const HeaderDivider: React.FC<HeaderDividerProps>;

package/lib/components/HeaderDivider.js

@@ -0,0 +1,32 @@
+/**
+ * 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 HeaderDivider = _ref => {
+  let {
+    className
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const classNames = index.default(`${prefix}--header__divider`, className);
+  return /*#__PURE__*/React.createElement("span", {
+    className: classNames
+  });
+};
+HeaderDivider.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes.string
+};
+
+exports.HeaderDivider = HeaderDivider;

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/index.d.ts

@@ -15,3 +15,4 @@ export { SideNavMenuItem } from './components/SideNavMenuItem.js';
 export { HeaderContainer } from './components/HeaderContainer';
 export { HeaderPanel } from './components/HeaderPanel';
 export { SharkFinIcon } from './components/SharkFinIcon';
+export { HeaderDivider } from './components/HeaderDivider';

package/lib/index.js

@@ -16,6 +16,7 @@ var SideNavMenuItem = require('./components/SideNavMenuItem.js');
 var HeaderContainer = require('./components/HeaderContainer.js');
 var HeaderPanel = require('./components/HeaderPanel.js');
 var SharkFinIcon = require('./components/SharkFinIcon.js');
+var HeaderDivider = require('./components/HeaderDivider.js');
 
 
 
@@ -29,3 +30,4 @@ exports.SideNavMenuItem = SideNavMenuItem.SideNavMenuItem;
 exports.HeaderContainer = HeaderContainer.HeaderContainer;
 exports.HeaderPanel = HeaderPanel.HeaderPanel;
 exports.SharkFinIcon = SharkFinIcon.SharkFinIcon;
+exports.HeaderDivider = HeaderDivider.HeaderDivider;

package/lib/node_modules/@carbon/icons-react/es/Icon.js

@@ -9,7 +9,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../icon-helpers/es/index.js');
+var index = require('../node_modules/@carbon/icon-helpers/es/index.js');
 var PropTypes = require('prop-types');
 var React = require('react');
 

package/package.json

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

package/scss/styles/_header-divider.scss

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ */
+@use '@carbon/styles/scss/utilities/convert' as convert;
+@use '@carbon/styles/scss/theme' as *;
+
+$prefix: 'cds' !default;
+
+.#{$prefix}--header__divider {
+  flex-shrink: 0;
+  background: $border-subtle;
+  block-size: convert.to-rem(24px);
+  inline-size: 1px;
+}

package/scss/styles/_header.scss

@@ -4,9 +4,27 @@
  * 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 '@carbon/styles/scss/theme' as *;
 
 $prefix: 'cds' !default;
 
+.#{$prefix}--header__global {
+  align-items: center;
+}
+
+.#{$prefix}--header__action {
+  flex-shrink: 0;
+}
+
 .#{$prefix}--header__action:focus {
   border-width: 2px;
 }
+
+//----------------------------------------------------------------------------
+// Menu button inside Header
+//----------------------------------------------------------------------------
+
+.#{$prefix}--header
+  .#{$prefix}--menu-button__trigger.#{$prefix}--btn--ghost:not([disabled]) {
+  color: $text-secondary;
+}

package/scss/ui-shell.scss

@@ -9,3 +9,4 @@
 @use 'styles/side-nav';
 @use 'styles/content';
 @use 'styles/shark-fin-icon.scss';
+@use 'styles/header-divider.scss';