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

package/lib/components/SideNavMenu.js

@@ -17,9 +17,11 @@ var match = require('../internal/keyboard/match.js');
 var usePrefix = require('../internal/usePrefix.js');
 var SideNav = require('./SideNav.js');
 var useMergedRefs = require('../internal/useMergedRefs.js');
+var SharkFinIcon = require('./SharkFinIcon.js');
+var SideNavFlyoutMenu = require('./SideNavFlyoutMenu.js');
 var bucket3 = require('../node_modules/@carbon/icons-react/es/generated/bucket-3.js');
 
-var _ChevronDown;
+var _SharkFinIcon, _ChevronDown;
 const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref) {
   let {
     className: customClassName,
@@ -86,6 +88,42 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     }
     return child;
   });
+
+  /**
+    Defining the children parameter with the type ReactNode | ReactNode[]. This allows for various possibilities:
+    a single element, an array of elements, or null or undefined.
+  **/
+  function hasActiveDescendant(children) {
+    if (Array.isArray(children)) {
+      return children.some(child => {
+        if (! /*#__PURE__*/React.isValidElement(child)) {
+          setActive(false);
+          return false;
+        }
+
+        /** Explicitly defining the expected prop types (isActive and 'aria-current) for the children to ensure type
+        safety when accessing their props.
+        **/
+        const props = child.props;
+        if (props.isActive === true || props['aria-current'] || props.children instanceof Array && hasActiveDescendant(props.children)) {
+          setActive(true);
+          return true;
+        }
+        return false;
+      });
+    }
+
+    // We use React.isValidElement(child) to check if the child is a valid React element before accessing its props
+
+    if (/*#__PURE__*/React.isValidElement(children)) {
+      const props = children.props;
+      if (props.isActive === true || props['aria-current']) {
+        setActive(true);
+        return true;
+      }
+    }
+    return false;
+  }
   React.useEffect(() => {
     if (navType == SideNav.SIDE_NAV_TYPE.PANEL) {
       // grab first link to redirect if clicked when not expanded
@@ -121,8 +159,9 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
       const parent = parentSideNavMenu(node);
       if (match.match(event, keys.ArrowLeft)) {
         event.stopPropagation();
-        if (isMenu) {
-          // collapse menu
+
+        // collapse menu
+        if (isMenu && sideNavExpanded) {
           if (isExpanded == 'true') {
             setIsExpanded(false);
 
@@ -145,8 +184,8 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
       if (match.match(event, keys.ArrowRight)) {
         event.stopPropagation();
 
-        // expand menu
-        if (isMenu) {
+        // expand menu when sidenav is expanded
+        if (isMenu && sideNavExpanded) {
           setIsExpanded(true);
 
           // if already expanded, focus on first element
@@ -165,7 +204,7 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
   // save expanded state before SideNav collapse
   const [lastExpandedState, setLastExpandedState] = React.useState(isExpanded);
 
-  // reset when SideNav is panel
+  // reset to opened/collapsed menu state when Panel SideNav is toggled
   React.useEffect(() => {
     if (navType == SideNav.SIDE_NAV_TYPE.PANEL && !sideNavExpanded) {
       setLastExpandedState(isExpanded);
@@ -174,42 +213,53 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
       setIsExpanded(lastExpandedState);
     }
   }, [sideNavExpanded]);
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    React.createElement("li", {
-      role: isTreeview ? 'treeitem' : undefined,
-      "aria-expanded": isExpanded,
-      className: className,
-      ref: listRef,
-      onKeyDown: handleKeyDown
-    }, /*#__PURE__*/React.createElement("button", {
-      "aria-expanded": isExpanded,
-      className: buttonClassName,
-      onClick: () => {
-        // only when sidenav is panel view
-        if (navType == SideNav.SIDE_NAV_TYPE.PANEL && !isExpanded && firstLink.current && !sideNavExpanded) {
-          window.location.href = firstLink.current;
-        } else {
-          setIsExpanded(!isExpanded);
-          setLastExpandedState(!isExpanded);
-        }
-      },
-      ref: menuRef,
-      type: "button",
-      tabIndex: isTreeview ? -1 : 0
-    }, IconElement && /*#__PURE__*/React.createElement(react.SideNavIcon, null, /*#__PURE__*/React.createElement(IconElement, null)), /*#__PURE__*/React.createElement("span", {
-      className: `${prefix}--side-nav__submenu-title`
-    }, title), /*#__PURE__*/React.createElement(react.SideNavIcon, {
-      className: `${prefix}--side-nav__submenu-chevron`,
-      small: true
-    }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React.createElement(bucket3.ChevronDown, {
-      size: 20
-    })))), /*#__PURE__*/React.createElement("ul", {
-      className: `${prefix}--side-nav__menu`,
-      role: "group"
-    }, childrenToRender))
-  );
+  const [openPopover, setOpenPopover] = React.useState(false);
+  const content =
+  /*#__PURE__*/
+  // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+  React.createElement("li", {
+    role: isTreeview ? 'treeitem' : undefined,
+    "aria-expanded": isExpanded,
+    className: className,
+    ref: listRef,
+    onKeyDown: handleKeyDown
+  }, /*#__PURE__*/React.createElement("button", {
+    "aria-expanded": isExpanded,
+    className: buttonClassName,
+    onClick: () => {
+      // only when sidenav is panel view
+      if (navType == SideNav.SIDE_NAV_TYPE.PANEL && !isExpanded && firstLink.current && !sideNavExpanded) {
+        setOpenPopover(!openPopover);
+        // window.location.href = firstLink.current;
+      } else {
+        setIsExpanded(!isExpanded);
+        setLastExpandedState(!isExpanded);
+      }
+    },
+    ref: menuRef,
+    type: "button",
+    tabIndex: isTreeview ? -1 : 0
+  }, IconElement && /*#__PURE__*/React.createElement(react.SideNavIcon, null, /*#__PURE__*/React.createElement(IconElement, null)), !sideNavExpanded && /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--side-nav--panel-submenu-caret-container`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--side-nav--panel-submenu-caret`
+  }, _SharkFinIcon || (_SharkFinIcon = /*#__PURE__*/React.createElement(SharkFinIcon.SharkFinIcon, null)))), /*#__PURE__*/React.createElement("span", {
+    className: `${prefix}--side-nav__submenu-title`
+  }, title), /*#__PURE__*/React.createElement(react.SideNavIcon, {
+    className: `${prefix}--side-nav__submenu-chevron`,
+    small: true
+  }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React.createElement(bucket3.ChevronDown, {
+    size: 20
+  })))), /*#__PURE__*/React.createElement("ul", {
+    className: `${prefix}--side-nav__menu`,
+    role: "group"
+  }, childrenToRender));
+  return navType == SideNav.SIDE_NAV_TYPE.PANEL && !sideNavExpanded ? /*#__PURE__*/React.createElement(SideNavFlyoutMenu.SideNavFlyoutMenu, {
+    selected: active,
+    className: `${prefix}--side-nav-flyout-menu`,
+    title: title,
+    menuContent: children
+  }, content) : content;
 });
 SideNavMenu.displayName = 'SideNavMenu';
 SideNavMenu.propTypes = {
@@ -251,6 +301,10 @@ SideNavMenu.propTypes = {
    */
   // @ts-expect-error - PropTypes are unable to cover this case.
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   *  The boolean to show the flyout menu has been selected.
+   */
+  selected: PropTypes.bool,
   /**
    * Optional prop to specify the tabIndex of the button. If undefined, it will be applied default validation
    */
@@ -261,37 +315,4 @@ SideNavMenu.propTypes = {
   title: PropTypes.string.isRequired
 };
 
-/**
-Defining the children parameter with the type ReactNode | ReactNode[]. This allows for various possibilities:
-a single element, an array of elements, or null or undefined.
-**/
-function hasActiveDescendant(children) {
-  if (Array.isArray(children)) {
-    return children.some(child => {
-      if (! /*#__PURE__*/React.isValidElement(child)) {
-        return false;
-      }
-
-      /** Explicitly defining the expected prop types (isActive and 'aria-current) for the children to ensure type
-      safety when accessing their props.
-      **/
-      const props = child.props;
-      if (props.isActive === true || props['aria-current'] || props.children instanceof Array && hasActiveDescendant(props.children)) {
-        return true;
-      }
-      return false;
-    });
-  }
-
-  // We use React.isValidElement(child) to check if the child is a valid React element before accessing its props
-
-  if (/*#__PURE__*/React.isValidElement(children)) {
-    const props = children.props;
-    if (props.isActive === true || props['aria-current']) {
-      return true;
-    }
-  }
-  return false;
-}
-
 exports.SideNavMenu = SideNavMenu;

package/lib/components/SideNavMenuItem.d.ts

@@ -21,6 +21,10 @@ export interface SideNavMenuItemProps extends ComponentProps<typeof Link> {
      * `aria-current="page"`, as well.
      */
     isActive?: boolean;
+    /**
+     * Specify whether the link is part of a "SideNavMenu" in "flyout menu" mode.
+     */
+    isFlyoutMenuItem?: boolean;
     /**
      * Optionally provide an href for the underlying li`
      */

package/lib/components/SideNavMenuItem.js

@@ -15,7 +15,9 @@ var react = require('@carbon/react');
 var Link = require('./Link.js');
 var usePrefix = require('../internal/usePrefix.js');
 var SideNav = require('./SideNav.js');
+var bucket3 = require('../node_modules/@carbon/icons-react/es/generated/bucket-3.js');
 
+var _SideNavIcon;
 const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(props, ref) {
   const prefix = usePrefix.usePrefix();
   const {
@@ -23,16 +25,21 @@ const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(p
     className: customClassName,
     as: Component = Link.default,
     isActive,
+    isFlyoutMenuItem,
     renderIcon: IconElement,
     ...rest
   } = props;
   const {
     isTreeview
   } = React.useContext(SideNav.SideNavContext);
-  const className = index.default(`${prefix}--side-nav__menu-item`, customClassName);
+  const className = index.default({
+    [`${prefix}--side-nav__menu-item`]: true,
+    [`${prefix}--side-nav__menu-item--flyout-menu-item`]: isFlyoutMenuItem
+  }, customClassName);
   const linkClassName = index.default({
     [`${prefix}--side-nav__link`]: true,
-    [`${prefix}--side-nav__link--current`]: isActive
+    [`${prefix}--side-nav__link--active`]: isActive && isFlyoutMenuItem,
+    [`${prefix}--side-nav__link--current`]: isActive && !isFlyoutMenuItem
   });
   return /*#__PURE__*/React.createElement("li", {
     className: className
@@ -42,9 +49,11 @@ const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(p
     className: linkClassName,
     tabIndex: isTreeview ? -1 : 0,
     ref: ref
-  }), IconElement && /*#__PURE__*/React.createElement(react.SideNavIcon, {
+  }), IconElement && !isFlyoutMenuItem && /*#__PURE__*/React.createElement(react.SideNavIcon, {
     small: true
-  }, /*#__PURE__*/React.createElement(IconElement, null)), /*#__PURE__*/React.createElement(react.SideNavLinkText, null, children)));
+  }, /*#__PURE__*/React.createElement(IconElement, null)), isActive && isFlyoutMenuItem && (_SideNavIcon || (_SideNavIcon = /*#__PURE__*/React.createElement(react.SideNavIcon, {
+    small: true
+  }, /*#__PURE__*/React.createElement(bucket3.Checkmark, null)))), /*#__PURE__*/React.createElement(react.SideNavLinkText, null, children)));
 });
 SideNavMenuItem.displayName = 'SideNavMenuItem';
 SideNavMenuItem.propTypes = {
@@ -70,6 +79,10 @@ SideNavMenuItem.propTypes = {
    * `aria-current="page"`, as well.
    */
   isActive: PropTypes.bool,
+  /**
+   * Specify whether the link is part of a "SideNavMenu" in "flyout menu" mode.
+   */
+  isFlyoutMenuItem: PropTypes.bool,
   /**
    * Provide an icon to render in the side navigation link. Should be a React class.
    */

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

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

package/lib/index.js

@@ -15,6 +15,7 @@ var SideNavMenu = require('./components/SideNavMenu.js');
 var SideNavMenuItem = require('./components/SideNavMenuItem.js');
 var HeaderContainer = require('./components/HeaderContainer.js');
 var HeaderPanel = require('./components/HeaderPanel.js');
+var SharkFinIcon = require('./components/SharkFinIcon.js');
 
 
 
@@ -27,3 +28,4 @@ exports.SideNavMenu = SideNavMenu.SideNavMenu;
 exports.SideNavMenuItem = SideNavMenuItem.SideNavMenuItem;
 exports.HeaderContainer = HeaderContainer.HeaderContainer;
 exports.HeaderPanel = HeaderPanel.HeaderPanel;
+exports.SharkFinIcon = SharkFinIcon.SharkFinIcon;

package/lib/internal/keyboard/keys.js

@@ -21,6 +21,12 @@ const Tab = {
   keyCode: 9,
   code: 'Tab'
 };
+const Enter = {
+  key: 'Enter',
+  which: 13,
+  keyCode: 13,
+  code: 'Enter'
+};
 const Escape = {
   key: ['Escape',
   // IE11 Escape
@@ -29,6 +35,12 @@ const Escape = {
   keyCode: 27,
   code: 'Esc'
 };
+const Space = {
+  key: ' ',
+  which: 32,
+  keyCode: 32,
+  code: 'Space'
+};
 const End = {
   key: 'End',
   which: 35,
@@ -71,6 +83,8 @@ exports.ArrowLeft = ArrowLeft;
 exports.ArrowRight = ArrowRight;
 exports.ArrowUp = ArrowUp;
 exports.End = End;
+exports.Enter = Enter;
 exports.Escape = Escape;
 exports.Home = Home;
+exports.Space = Space;
 exports.Tab = Tab;

package/lib/internal/setupGetInstanceId.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Generic utility to initialize a method that will return a unique instance id
+ * for a component.
+ */
+export default function setupGetInstanceId(): () => number;

package/lib/internal/setupGetInstanceId.js

@@ -0,0 +1,23 @@
+/**
+ * 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';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * Generic utility to initialize a method that will return a unique instance id
+ * for a component.
+ */
+function setupGetInstanceId() {
+  let instanceId = 0;
+  return function getInstanceId() {
+    return ++instanceId;
+  };
+}
+
+exports.default = setupGetInstanceId;

package/lib/internal/useId.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Generate a unique ID for React <=17 with an optional prefix prepended to it.
+ * This is an internal utility, not intended for public usage.
+ * @param {string} [prefix] the optional prefix id
+ * @returns {string}
+ */
+export function useCompatibleId(prefix?: string | undefined): string;
+/**
+ * Generate a unique id if a given `id` is not provided
+ * This is an internal utility, not intended for public usage.
+ * @param {string|undefined} id the provided id
+ * @returns {string}
+ */
+export function useFallbackId(id: string | undefined): string;
+/**
+ * Generate a unique ID for React >=18 with an optional prefix prepended to it.
+ * This is an internal utility, not intended for public usage.
+ * @param {string} [prefix] the optional prefix id
+ * @returns {string}
+ */
+export function useId(prefix?: string | undefined): string;

package/lib/internal/useId.js

@@ -0,0 +1,103 @@
+/**
+ * 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 React = require('react');
+var setupGetInstanceId = require('./setupGetInstanceId.js');
+var useIdPrefix = require('./useIdPrefix.js');
+var environment = require('./environment.js');
+
+// This file was heavily inspired by:
+//
+// 1. Reach UI and their work on their auto-id package:
+//    https://github.com/reach/reach-ui/blob/86a046f54d53b6420e392b3fa56dd991d9d4e458/packages/auto-id/src/index.ts
+//
+// 2. Floating UI and their work on react >=18 compatibility
+//    https://github.com/floating-ui/floating-ui/blob/%40floating-ui/utils%400.2.5/packages/react/src/hooks/useId.ts
+//
+// The problem that this solves is an id mismatch when auto-generating
+// ids on both the server and the client. When using server-side rendering,
+// there can be the chance of a mismatch between what the server renders and
+// what the client renders when the id value is auto-generated.
+//
+// To get around this, we set the initial value of the `id` to `null` and then
+// conditionally use `useLayoutEffect` on the client and `useEffect` on the
+// server. On the client, `useLayoutEffect` will patch up the id to the correct
+// value. On the server, `useEffect` will not run.
+//
+// This ensures that we won't encounter a mismatch in ids between server and
+// client, at the cost of runtime patching of the id value in
+// `useLayoutEffect`
+//
+// React 18 introduced a new hook called `useId` that takes care of hydration
+// mismatches. If the user is running React 18 or higher, the native hook is
+// used via the `useReactId` function. If the user is running React 17 or
+// lower, `useCompatibleId` is used.
+
+
+// This tricks bundlers so they can't statically analyze this and produce
+// compilation warnings/errors.
+// https://github.com/webpack/webpack/issues/14814
+// https://github.com/mui/material-ui/issues/41190
+const _React = {
+  ...React
+};
+const instanceId = setupGetInstanceId.default();
+const useIsomorphicLayoutEffect = environment.canUseDOM ? React.useLayoutEffect : React.useEffect;
+let serverHandoffCompleted = false;
+const defaultId = 'id';
+
+/**
+ * Generate a unique ID for React <=17 with an optional prefix prepended to it.
+ * This is an internal utility, not intended for public usage.
+ * @param {string} [prefix] the optional prefix id
+ * @returns {string}
+ */
+function useCompatibleId() {
+  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultId;
+  const contextPrefix = useIdPrefix.useIdPrefix();
+  const [id, setId] = React.useState(() => {
+    if (serverHandoffCompleted) {
+      return `${contextPrefix ? `${contextPrefix}-` : ``}${prefix}-${instanceId()}`;
+    }
+    return null;
+  });
+  useIsomorphicLayoutEffect(() => {
+    if (id === null) {
+      setId(`${contextPrefix ? `${contextPrefix}-` : ``}${prefix}-${instanceId()}`);
+    }
+  }, [instanceId]);
+  React.useEffect(() => {
+    if (serverHandoffCompleted === false) {
+      serverHandoffCompleted = true;
+    }
+  }, []);
+  return id;
+}
+
+/**
+ * Generate a unique ID for React >=18 with an optional prefix prepended to it.
+ * This is an internal utility, not intended for public usage.
+ * @param {string} [prefix] the optional prefix id
+ * @returns {string}
+ */
+function useReactId() {
+  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultId;
+  const contextPrefix = useIdPrefix.useIdPrefix();
+  return `${contextPrefix ? `${contextPrefix}-` : ``}${prefix}-${_React.useId()}`;
+}
+
+/**
+ * Uses React 18's built-in `useId()` when available, or falls back to a
+ * slightly less performant (requiring a double render) implementation for
+ * earlier React versions.
+ */
+const useId = _React.useId ? useReactId : useCompatibleId;
+
+exports.useCompatibleId = useCompatibleId;
+exports.useId = useId;

package/lib/internal/useIdPrefix.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 declare const IdPrefixContext: React.Context<string | null | undefined>;
+/**
+ *
+ */
+export declare function useIdPrefix(): string | null | undefined;

package/lib/internal/useIdPrefix.js

@@ -0,0 +1,22 @@
+/**
+ * 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 React = require('react');
+
+const IdPrefixContext = /*#__PURE__*/React.createContext(null);
+
+/**
+ *
+ */
+function useIdPrefix() {
+  return React.useContext(IdPrefixContext);
+}
+
+exports.IdPrefixContext = IdPrefixContext;
+exports.useIdPrefix = useIdPrefix;

package/lib/internal/usePrefix.d.ts

@@ -6,4 +6,9 @@
  */
 import React from 'react';
 export declare const PrefixContext: React.Context<string>;
+/**
+ * An internal function to return the prefix used in components and styles.
+ *
+ * @returns a react context including the prefix
+ */
 export declare function usePrefix(): string;

package/lib/internal/usePrefix.js

@@ -18,6 +18,12 @@ var React = require('react');
  */
 
 const PrefixContext = /*#__PURE__*/React.createContext('cds');
+
+/**
+ * An internal function to return the prefix used in components and styles.
+ *
+ * @returns a react context including the prefix
+ */
 function usePrefix() {
   return React.useContext(PrefixContext);
 }

package/package.json

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

package/scss/styles/_shark-fin-icon.scss

@@ -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.
+ */
+
+@use '@carbon/styles/scss/theme' as *;
+
+$prefix: 'cds' !default;
+
+.#{$prefix}--side-nav__icon.#{$prefix}--shark-fin__icon {
+  fill: $icon-secondary;
+}