@carbon/react 1.85.1 → 1.86.0

package/es/components/TreeView/TreeContext.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright IBM Corp. 2016, 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 { type MouseEvent } from 'react';
+import type { TreeNodeProps } from './TreeNode';
+interface TreeContextProps {
+    active?: string | number;
+    multiselect?: boolean;
+    onActivate?: (nodeId?: string | number) => void;
+    onTreeSelect?: (event: MouseEvent, node?: Partial<TreeNodeProps>) => void;
+    selected?: Array<string | number>;
+    size?: 'xs' | 'sm';
+}
+export declare const TreeContext: import("react").Context<TreeContextProps | null>;
+export declare const DepthContext: import("react").Context<number>;
+export {};

package/es/components/TreeView/TreeContext.js

@@ -0,0 +1,13 @@
+/**
+ * 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 { createContext } from 'react';
+
+const TreeContext = /*#__PURE__*/createContext(null);
+const DepthContext = /*#__PURE__*/createContext(-1);
+
+export { DepthContext, TreeContext };

package/es/components/TreeView/TreeNode.d.ts

@@ -52,11 +52,11 @@ export type TreeNodeProps = {
     /**
      * Callback function for when the node is selected
      */
-    onSelect?: (event: React.MouseEvent, node?: TreeNodeProps) => void;
+    onSelect?: (event: React.MouseEvent, node?: Omit<TreeNodeProps, 'children'>) => void;
     /**
      * Callback function for when a parent node is expanded or collapsed
      */
-    onToggle?: (event: React.MouseEvent, node?: TreeNodeProps) => void;
+    onToggle?: (event: React.MouseEvent | React.KeyboardEvent, node?: Omit<TreeNodeProps, 'children'>) => void;
     /**
      * Callback function for when any node in the tree is selected
      */
@@ -137,11 +137,11 @@ declare const TreeNode: React.ForwardRefExoticComponent<{
     /**
      * Callback function for when the node is selected
      */
-    onSelect?: (event: React.MouseEvent, node?: TreeNodeProps) => void;
+    onSelect?: (event: React.MouseEvent, node?: Omit<TreeNodeProps, "children">) => void;
     /**
      * Callback function for when a parent node is expanded or collapsed
      */
-    onToggle?: (event: React.MouseEvent, node?: TreeNodeProps) => void;
+    onToggle?: (event: React.MouseEvent | React.KeyboardEvent, node?: Omit<TreeNodeProps, "children">) => void;
     /**
      * Callback function for when any node in the tree is selected
      */

package/es/components/TreeView/TreeNode.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { CaretDown } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useRef, useState, useEffect, useCallback } from 'react';
+import React, { useContext, useRef, useState, useEffect, useCallback } from 'react';
 import { ArrowLeft, ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
 import { matches, match } from '../../internal/keyboard/match.js';
 import { useControllableState } from '../../internal/useControllableState.js';
@@ -17,6 +17,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { useId } from '../../internal/useId.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { IconButton } from '../IconButton/index.js';
+import { TreeContext, DepthContext } from './TreeContext.js';
 
 const extractTextContent = node => {
   if (node === null || node === undefined) return '';
@@ -87,29 +88,36 @@ const useEllipsisCheck = (label, detailsWrapperRef) => {
   };
 };
 const TreeNode = /*#__PURE__*/React.forwardRef(({
-  active,
   children,
   className,
-  depth: propDepth,
   disabled,
   id: nodeId,
   isExpanded,
   defaultIsExpanded,
   label,
-  onNodeFocusEvent,
   onSelect: onNodeSelect,
   onToggle,
-  onTreeSelect,
   renderIcon: Icon,
-  selected: propSelected,
   value,
   href,
   align = 'bottom',
   autoAlign = false,
+  // These props are fallback props if the TreeContext is not available or only TreeNode is used as a standalone component
+  active: propActive,
+  depth: propDepth,
+  selected: propSelected,
+  onTreeSelect: propOnTreeSelect,
+  onNodeFocusEvent,
   ...rest
 }, forwardedRef) => {
-  const depth = propDepth;
-  const selected = propSelected;
+  const treeContext = useContext(TreeContext);
+  const contextDepth = useContext(DepthContext);
+
+  // Prioritize direct props, and fall back to context values.
+  const depth = propDepth ?? (contextDepth !== -1 ? contextDepth : 0);
+  const active = propActive ?? treeContext?.active;
+  const selected = propSelected ?? treeContext?.selected ?? [];
+  const onTreeSelect = propOnTreeSelect ?? treeContext?.onTreeSelect;
   const detailsWrapperRef = useRef(null);
   const {
     labelTextRef,
@@ -164,30 +172,8 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
       forwardedRef.current = element;
     }
   };
-  function enhanceTreeNodes(children) {
-    return React.Children.map(children, node => {
-      if (! /*#__PURE__*/React.isValidElement(node)) return node;
-      const isTreeNode = node.type === TreeNode;
-      if (isTreeNode) {
-        return /*#__PURE__*/React.cloneElement(node, {
-          active,
-          depth: depth + 1,
-          disabled: disabled || node.props.disabled,
-          onTreeSelect,
-          onNodeFocusEvent,
-          selected,
-          tabIndex: node.props.disabled ? null : -1
-        });
-      }
-      const newChildren = enhanceTreeNodes(node.props.children);
-      return /*#__PURE__*/React.cloneElement(node, {
-        children: newChildren
-      });
-    });
-  }
-  const nodesWithProps = enhanceTreeNodes(children);
   const isActive = active === id;
-  const isSelected = selected.includes(id);
+  const isSelected = selected?.includes(id) ?? false;
   const treeNodeClasses = cx(className, `${prefix}--tree-node`, {
     [`${prefix}--tree-node--active`]: isActive,
     [`${prefix}--tree-node--disabled`]: disabled,
@@ -289,7 +275,7 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
          * When focus is on an expanded parent node, move focus to the first
          * child node
          */
-        getFocusableNode(href ? currentNode.current?.parentElement?.lastChild?.firstChild : currentNode.current?.lastChild?.firstChild).focus();
+        getFocusableNode(href ? currentNode.current?.parentElement?.lastChild?.firstChild : currentNode.current?.lastChild?.firstChild)?.focus();
       } else {
         if (!enableTreeviewControllable) {
           onToggle?.(event, {
@@ -324,12 +310,12 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
     rest?.onKeyDown?.(event);
   }
   function handleFocusEvent(event) {
-    if (event.type === 'blur') {
-      rest?.onBlur?.(event);
-    }
     if (event.type === 'focus') {
       rest?.onFocus?.(event);
     }
+    if (event.type === 'blur') {
+      rest?.onBlur?.(event);
+    }
     onNodeFocusEvent?.(event);
   }
   useEffect(() => {
@@ -369,6 +355,7 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
       setExpanded(isExpanded ?? false);
     }
   }, [children, depth, Icon, isExpanded, enableTreeviewControllable, setExpanded]);
+  const tabIndex = disabled ? undefined : rest.tabIndex ?? -1;
   const treeNodeProps = {
     ...rest,
     ['aria-current']: !href ? isActive || undefined : isActive ? 'page' : undefined,
@@ -377,95 +364,56 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
     ['aria-owns']: children ? `${id}-subtree` : undefined,
     className: treeNodeClasses,
     id,
-    onBlur: handleFocusEvent,
     onClick: handleClick,
-    onFocus: handleFocusEvent,
     onKeyDown: handleKeyDown,
-    role: 'treeitem'
+    role: 'treeitem',
+    tabIndex,
+    onFocus: handleFocusEvent,
+    onBlur: handleFocusEvent
   };
-  if (!children) {
-    if (href) {
-      return /*#__PURE__*/React.createElement("li", {
-        role: "none"
-      }, /*#__PURE__*/React.createElement("a", _extends({}, treeNodeProps, {
-        ref: setRefs,
-        href: !disabled ? href : undefined
-      }), /*#__PURE__*/React.createElement("div", {
-        className: `${prefix}--tree-node__label`,
-        ref: currentNodeLabel
-      }, Icon && /*#__PURE__*/React.createElement(Icon, {
-        className: `${prefix}--tree-node__icon`
-      }), renderLabelText())));
-    } else {
-      return /*#__PURE__*/React.createElement("li", _extends({}, treeNodeProps, {
-        ref: setRefs
-      }), /*#__PURE__*/React.createElement("div", {
-        className: `${prefix}--tree-node__label`,
-        ref: currentNodeLabel
-      }, Icon && /*#__PURE__*/React.createElement(Icon, {
-        className: `${prefix}--tree-node__icon`
-      }), renderLabelText()));
-    }
-  }
+  const nodeContent = /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--tree-node__label`,
+    ref: currentNodeLabel
+  }, children && /*#__PURE__*/React.createElement("span", {
+    className: `${prefix}--tree-parent-node__toggle`,
+    onClick: handleToggleClick
+  }, /*#__PURE__*/React.createElement(CaretDown, {
+    className: toggleClasses
+  })), /*#__PURE__*/React.createElement("span", {
+    className: `${prefix}--tree-node__label__details`
+  }, Icon && /*#__PURE__*/React.createElement(Icon, {
+    className: `${prefix}--tree-node__icon`
+  }), renderLabelText()));
   if (href) {
     return /*#__PURE__*/React.createElement("li", {
       role: "none",
-      className: `${prefix}--tree-node-link-parent`
+      className: children ? `${prefix}--tree-node-link-parent` : ''
     }, /*#__PURE__*/React.createElement("a", _extends({}, treeNodeProps, {
       "aria-expanded": !!expanded,
       ref: setRefs,
       href: !disabled ? href : undefined
-    }), /*#__PURE__*/React.createElement("div", {
-      className: `${prefix}--tree-node__label`,
-      ref: currentNodeLabel
-    }, /*#__PURE__*/React.createElement("span", {
-      className: `${prefix}--tree-parent-node__toggle`
-      // @ts-ignore
-      ,
-      disabled: disabled,
-      onClick: handleToggleClick
-    }, /*#__PURE__*/React.createElement(CaretDown, {
-      className: toggleClasses
-    })), /*#__PURE__*/React.createElement("span", {
-      className: `${prefix}--tree-node__label__details`,
-      ref: detailsWrapperRef
-    }, Icon && /*#__PURE__*/React.createElement(Icon, {
-      className: `${prefix}--tree-node__icon`
-    }), renderLabelText()))), /*#__PURE__*/React.createElement("ul", {
-      id: `${id}-subtree`,
-      role: "group",
-      className: cx(`${prefix}--tree-node__children`, {
-        [`${prefix}--tree-node--hidden`]: !expanded
-      })
-    }, nodesWithProps));
-  } else {
-    return /*#__PURE__*/React.createElement("li", _extends({}, treeNodeProps, {
-      "aria-expanded": !!expanded,
-      ref: setRefs
-    }), /*#__PURE__*/React.createElement("div", {
-      className: `${prefix}--tree-node__label`,
-      ref: currentNodeLabel
-    }, /*#__PURE__*/React.createElement("span", {
-      className: `${prefix}--tree-parent-node__toggle`
-      // @ts-ignore
-      ,
-      disabled: disabled,
-      onClick: handleToggleClick
-    }, /*#__PURE__*/React.createElement(CaretDown, {
-      className: toggleClasses
-    })), /*#__PURE__*/React.createElement("span", {
-      className: `${prefix}--tree-node__label__details`,
-      ref: detailsWrapperRef
-    }, Icon && /*#__PURE__*/React.createElement(Icon, {
-      className: `${prefix}--tree-node__icon`
-    }), renderLabelText())), /*#__PURE__*/React.createElement("ul", {
+    }), nodeContent), children && /*#__PURE__*/React.createElement("ul", {
       id: `${id}-subtree`,
       role: "group",
       className: cx(`${prefix}--tree-node__children`, {
         [`${prefix}--tree-node--hidden`]: !expanded
       })
-    }, nodesWithProps));
+    }, /*#__PURE__*/React.createElement(DepthContext.Provider, {
+      value: depth + 1
+    }, children)));
   }
+  return /*#__PURE__*/React.createElement("li", _extends({}, treeNodeProps, {
+    "aria-expanded": children ? !!expanded : undefined,
+    ref: setRefs
+  }), nodeContent, children && /*#__PURE__*/React.createElement("ul", {
+    id: `${id}-subtree`,
+    role: "group",
+    className: cx(`${prefix}--tree-node__children`, {
+      [`${prefix}--tree-node--hidden`]: !expanded
+    })
+  }, /*#__PURE__*/React.createElement(DepthContext.Provider, {
+    value: depth + 1
+  }, children)));
 });
 TreeNode.propTypes = {
   /**

package/es/components/TreeView/TreeView.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect, useMemo } from 'react';
 import { ArrowUp, ArrowDown, Home, End } from '../../internal/keyboard/keys.js';
 import { matches, match } from '../../internal/keyboard/match.js';
 import { useControllableState } from '../../internal/useControllableState.js';
@@ -16,6 +16,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { useId } from '../../internal/useId.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import TreeNode from './TreeNode.js';
+import { TreeContext, DepthContext } from './TreeContext.js';
 
 const TreeView = ({
   active: prespecifiedActive,
@@ -37,10 +38,11 @@ const TreeView = ({
   const prefix = usePrefix();
   const treeClasses = cx(className, `${prefix}--tree`, {
     // @ts-ignore - will always be false according to prop types
+
     [`${prefix}--tree--${size}`]: size !== 'default'
   });
   const treeRootRef = useRef(null);
-  const treeWalker = useRef(treeRootRef?.current);
+  const treeWalker = useRef(null);
   const controllableSelectionState = useControllableState({
     value: preselected,
     onChange: newSelected => {
@@ -86,56 +88,14 @@ const TreeView = ({
       }
     }
   }
-  function handleFocusEvent(event) {
-    if (event.type === 'blur') {
-      const {
-        relatedTarget: currentFocusedNode,
-        target: prevFocusedNode
-      } = event;
-      if (treeRootRef?.current?.contains(currentFocusedNode)) {
-        prevFocusedNode.tabIndex = -1;
-      }
-    }
-    if (event.type === 'focus') {
-      resetNodeTabIndices();
-      const {
-        relatedTarget: prevFocusedNode,
-        target: currentFocusedNode
-      } = event;
-      if (treeRootRef?.current?.contains(prevFocusedNode)) {
-        prevFocusedNode.tabIndex = -1;
-      }
-      currentFocusedNode.tabIndex = 0;
+
+  // Set the first non-disabled node to be tabbable
+  useEffect(() => {
+    const firstNode = treeRootRef.current?.querySelector(`.${prefix}--tree-node:not(.${prefix}--tree-node--disabled)`);
+    if (firstNode instanceof HTMLElement) {
+      firstNode.tabIndex = 0;
     }
-  }
-  let focusTarget = false;
-  function enhanceTreeNodes(children) {
-    return React.Children.map(children, child => {
-      if (! /*#__PURE__*/React.isValidElement(child)) return child;
-      const isTreeNode = child.type === TreeNode;
-      if (isTreeNode) {
-        const node = child;
-        const sharedNodeProps = {
-          active,
-          depth: 0,
-          onNodeFocusEvent: handleFocusEvent,
-          onTreeSelect: handleTreeSelect,
-          selected,
-          tabIndex: node.props.disabled ? undefined : -1
-        };
-        if (!focusTarget && !node.props.disabled) {
-          sharedNodeProps.tabIndex = 0;
-          focusTarget = true;
-        }
-        return /*#__PURE__*/React.cloneElement(child, sharedNodeProps);
-      }
-      const newChildren = enhanceTreeNodes(child.props.children);
-      return /*#__PURE__*/React.cloneElement(child, {
-        children: newChildren
-      });
-    });
-  }
-  const nodesWithProps = enhanceTreeNodes(children);
+  }, [children, prefix]);
   function handleKeyDown(event) {
     event.stopPropagation();
     if (matches(event, [ArrowUp, ArrowDown, Home, End])) {
@@ -159,12 +119,12 @@ const TreeView = ({
       const nodeIds = [];
       if (matches(event, [Home, End])) {
         if (multiselect && event.shiftKey && event.ctrlKey && treeWalker.current.currentNode instanceof Element && !treeWalker.current.currentNode.getAttribute('aria-disabled') && !treeWalker.current.currentNode.classList.contains(`${prefix}--tree-node--hidden`)) {
-          nodeIds.push(treeWalker.current.currentNode?.id);
+          nodeIds.push(treeWalker.current.currentNode.id);
         }
         while (match(event, Home) ? treeWalker.current.previousNode() : treeWalker.current.nextNode()) {
           nextFocusNode = treeWalker.current.currentNode;
           if (multiselect && event.shiftKey && event.ctrlKey && nextFocusNode instanceof Element && !nextFocusNode.getAttribute('aria-disabled') && !nextFocusNode.classList.contains(`${prefix}--tree-node--hidden`)) {
-            nodeIds.push(nextFocusNode?.id);
+            nodeIds.push(nextFocusNode.id);
           }
         }
       }
@@ -175,7 +135,7 @@ const TreeView = ({
         treeWalker.current.currentNode = treeWalker.current.root;
         while (treeWalker.current.nextNode()) {
           if (treeWalker.current.currentNode instanceof Element && !treeWalker.current.currentNode.getAttribute('aria-disabled') && !treeWalker.current.currentNode.classList.contains(`${prefix}--tree-node--hidden`)) {
-            nodeIds.push(treeWalker.current.currentNode?.id);
+            nodeIds.push(treeWalker.current.currentNode.id);
           }
         }
       }
@@ -191,38 +151,41 @@ const TreeView = ({
     rest?.onKeyDown?.(event);
   }
   useEffect(() => {
-    treeWalker.current = treeWalker.current ?? document.createTreeWalker(treeRootRef?.current, NodeFilter.SHOW_ELEMENT, {
-      acceptNode: function (node) {
-        if (!(node instanceof Element)) {
+    if (treeRootRef.current && !treeWalker.current) {
+      treeWalker.current = document.createTreeWalker(treeRootRef.current, NodeFilter.SHOW_ELEMENT, {
+        acceptNode: function (node) {
+          if (!(node instanceof Element)) {
+            return NodeFilter.FILTER_SKIP;
+          }
+          if (node.classList.contains(`${prefix}--tree-node--disabled`) || node.classList.contains(`${prefix}--tree-node--hidden`)) {
+            return NodeFilter.FILTER_REJECT;
+          }
+          if (node.matches(`.${prefix}--tree-node`)) {
+            return NodeFilter.FILTER_ACCEPT;
+          }
           return NodeFilter.FILTER_SKIP;
         }
-        if (node.classList.contains(`${prefix}--tree-node--disabled`) || node.classList.contains(`${prefix}--tree-node--hidden`)) {
-          return NodeFilter.FILTER_REJECT;
-        }
-        if (node.matches(`.${prefix}--tree-node`)) {
-          return NodeFilter.FILTER_ACCEPT;
-        }
-        return NodeFilter.FILTER_SKIP;
-      }
-    });
-  }, [prefix]);
-  const useActiveAndSelectedOnMount = () => useEffect(() => {
-    if (!enableTreeviewControllable) {
-      if (preselected?.length) {
-        setSelected(preselected);
-      }
-      if (prespecifiedActive) {
-        setActive(prespecifiedActive);
-      }
+      });
     }
-  }, []);
-  useActiveAndSelectedOnMount();
+  }, [prefix]);
   const labelId = `${treeId}__label`;
   const TreeLabel = () => !hideLabel ? /*#__PURE__*/React.createElement("label", {
     id: labelId,
     className: `${prefix}--label`
   }, label) : null;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TreeLabel, null), /*#__PURE__*/React.createElement("ul", _extends({}, rest, {
+  const treeContextValue = useMemo(() => ({
+    active,
+    multiselect,
+    onActivate: setActive,
+    onTreeSelect: handleTreeSelect,
+    selected,
+    size
+  }), [active, multiselect, setActive, handleTreeSelect, selected, size]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TreeLabel, null), /*#__PURE__*/React.createElement(TreeContext.Provider, {
+    value: treeContextValue
+  }, /*#__PURE__*/React.createElement(DepthContext.Provider, {
+    value: 0
+  }, /*#__PURE__*/React.createElement("ul", _extends({}, rest, {
     "aria-label": hideLabel ? label : undefined,
     "aria-labelledby": !hideLabel ? labelId : undefined,
     "aria-multiselectable": multiselect || undefined,
@@ -230,7 +193,7 @@ const TreeView = ({
     onKeyDown: handleKeyDown,
     ref: treeRootRef,
     role: "tree"
-  }), nodesWithProps));
+  }), children))));
 };
 TreeView.propTypes = {
   /**

package/es/components/UIShell/HeaderMenu.js

@@ -14,7 +14,7 @@ import { Enter, Space, Escape } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
-import deprecate from '../../prop-types/deprecate.js';
+import { deprecate } from '../../prop-types/deprecate.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 

package/es/components/UIShell/HeaderMenuItem.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 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.

package/es/components/UIShell/HeaderMenuItem.js

@@ -11,7 +11,7 @@ import React, { forwardRef } from 'react';
 import cx from 'classnames';
 import Link, { LinkPropTypes } from './Link.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import deprecate from '../../prop-types/deprecate.js';
+import { deprecate } from '../../prop-types/deprecate.js';
 
 const HeaderMenuItem = /*#__PURE__*/forwardRef(function HeaderMenuItem({
   className,

package/es/components/UIShell/HeaderName.d.ts

@@ -32,7 +32,7 @@ declare namespace HeaderName {
          */
         prefix: PropTypes.Requireable<string>;
         as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        element: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        element: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
         isSideNavExpanded: PropTypes.Requireable<boolean>;
     };
 }

package/es/components/UIShell/Link.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 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.
@@ -40,7 +40,7 @@ declare const LinkPropTypes: {
      * @deprecated Use `as` instead
      *
      */
-    element: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+    element: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
     /**
      * Property to indicate if the side nav container is open (or not). Use to
      * keep local state and styling in step with the SideNav expansion state.

package/es/components/UIShell/Link.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React from 'react';
-import deprecate from '../../prop-types/deprecate.js';
+import { deprecate } from '../../prop-types/deprecate.js';
 
 // First define the component without generics
 

package/es/components/UIShell/Switcher.d.ts

@@ -4,7 +4,7 @@
  * 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, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 export interface BaseSwitcherProps {
     /**
      * expects to receive <SwitcherItem />

package/es/components/UIShell/Switcher.js

@@ -6,13 +6,40 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { forwardRef, useRef } from 'react';
+import React, { forwardRef, useRef, Children, isValidElement, cloneElement } from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
+import './Content.js';
+import './Header.js';
+import './HeaderContainer.js';
+import './HeaderGlobalAction.js';
+import './HeaderGlobalBar.js';
+import './HeaderMenu.js';
+import './HeaderMenuButton.js';
+import './HeaderMenuItem.js';
+import './HeaderName.js';
+import './HeaderNavigation.js';
+import './HeaderPanel.js';
+import './HeaderSideNavItems.js';
 import SwitcherItem from './SwitcherItem.js';
+import SwitcherDivider from './SwitcherDivider.js';
+import './SkipToContent.js';
+import './SideNav.js';
+import './SideNavDetails.js';
+import './SideNavDivider.js';
+import './SideNavFooter.js';
+import './SideNavHeader.js';
+import './SideNavIcon.js';
+import './SideNavItem.js';
+import './SideNavItems.js';
+import './SideNavLink.js';
+import './SideNavLinkText.js';
+import './SideNavMenu.js';
+import './SideNavMenuItem.js';
+import './SideNavSwitcher.js';
 
 const Switcher = /*#__PURE__*/forwardRef(function Switcher(props, forwardRef) {
   const switcherRef = useRef(null);
@@ -36,8 +63,8 @@ const Switcher = /*#__PURE__*/forwardRef(function Switcher(props, forwardRef) {
     currentIndex,
     direction
   }) => {
-    const enabledIndices = React.Children.toArray(children).reduce((acc, curr, i) => {
-      if (/*#__PURE__*/React.isValidElement(curr) && Object.keys(curr.props).length !== 0 && curr.type === SwitcherItem) {
+    const enabledIndices = Children.toArray(children).reduce((acc, child, i) => {
+      if (/*#__PURE__*/isValidElement(child) && child.type === SwitcherItem && Object.keys(child.props).length) {
         acc.push(i);
       }
       return acc;
@@ -63,21 +90,21 @@ const Switcher = /*#__PURE__*/forwardRef(function Switcher(props, forwardRef) {
       switcherItem.focus();
     }
   };
-  const childrenWithProps = React.Children.toArray(children).map((child, index) => {
-    // only setup click handlers if onChange event is passed
-    if (/*#__PURE__*/React.isValidElement(child) && child.type === SwitcherItem) {
-      return /*#__PURE__*/React.cloneElement(child, {
+  const childrenWithProps = Children.toArray(children).map((child, index) => {
+    if (/*#__PURE__*/isValidElement(child) && child.type === SwitcherItem) {
+      return /*#__PURE__*/cloneElement(child, {
         handleSwitcherItemFocus,
         index,
         key: index,
         expanded
       });
     }
-    return /*#__PURE__*/React.cloneElement(child, {
-      index,
-      key: index,
-      expanded
-    });
+    if (/*#__PURE__*/isValidElement(child) && child.type === SwitcherDivider) {
+      return /*#__PURE__*/cloneElement(child, {
+        key: index
+      });
+    }
+    return child;
   });
   return /*#__PURE__*/React.createElement("ul", _extends({
     ref: ref,