@carbon/react 1.83.0-rc.0 → 1.84.0-rc.0

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__default, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect } 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,27 +17,26 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { uniqueId } from '../../tools/uniqueId.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 
-const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) => {
-  let {
-    active,
-    children,
-    className,
-    depth: propDepth,
-    disabled,
-    id: nodeId,
-    isExpanded,
-    defaultIsExpanded,
-    label,
-    onNodeFocusEvent,
-    onSelect: onNodeSelect,
-    onToggle,
-    onTreeSelect,
-    renderIcon: Icon,
-    selected: propSelected,
-    value,
-    href,
-    ...rest
-  } = _ref;
+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,
+  ...rest
+}, forwardedRef) => {
   // These are provided by the parent TreeView component
   const depth = propDepth;
   const selected = propSelected;
@@ -70,19 +69,28 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) =>
       forwardedRef.current = element;
     }
   };
-  const nodesWithProps = React__default.Children.map(children, node => {
-    if (/*#__PURE__*/React__default.isValidElement(node)) {
-      return /*#__PURE__*/React__default.cloneElement(node, {
-        active,
-        depth: depth + 1,
-        disabled: disabled || node.props.disabled,
-        onTreeSelect,
-        onNodeFocusEvent,
-        selected,
-        tabIndex: !node.props.disabled && -1 || null
+  function enhanceTreeNodes(children) {
+    return React.Children.map(children, node => {
+      if (! /*#__PURE__*/React.isValidElement(node)) return node;
+      const isTreeNode = node.type.displayName === '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 treeNodeClasses = cx(className, `${prefix}--tree-node`, {
@@ -282,52 +290,52 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) =>
   };
   if (!children) {
     if (href) {
-      return /*#__PURE__*/React__default.createElement("li", {
+      return /*#__PURE__*/React.createElement("li", {
         role: "none"
-      }, /*#__PURE__*/React__default.createElement("a", _extends({}, treeNodeProps, {
+      }, /*#__PURE__*/React.createElement("a", _extends({}, treeNodeProps, {
         ref: setRefs,
         href: !disabled ? href : undefined
-      }), /*#__PURE__*/React__default.createElement("div", {
+      }), /*#__PURE__*/React.createElement("div", {
         className: `${prefix}--tree-node__label`,
         ref: currentNodeLabel
-      }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
+      }, Icon && /*#__PURE__*/React.createElement(Icon, {
         className: `${prefix}--tree-node__icon`
       }), label)));
     } else {
-      return /*#__PURE__*/React__default.createElement("li", _extends({}, treeNodeProps, {
+      return /*#__PURE__*/React.createElement("li", _extends({}, treeNodeProps, {
         ref: setRefs
-      }), /*#__PURE__*/React__default.createElement("div", {
+      }), /*#__PURE__*/React.createElement("div", {
         className: `${prefix}--tree-node__label`,
         ref: currentNodeLabel
-      }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
+      }, Icon && /*#__PURE__*/React.createElement(Icon, {
         className: `${prefix}--tree-node__icon`
       }), label));
     }
   }
   if (href) {
-    return /*#__PURE__*/React__default.createElement("li", {
+    return /*#__PURE__*/React.createElement("li", {
       role: "none",
       className: `${prefix}--tree-node-link-parent`
-    }, /*#__PURE__*/React__default.createElement("a", _extends({}, treeNodeProps, {
+    }, /*#__PURE__*/React.createElement("a", _extends({}, treeNodeProps, {
       "aria-expanded": !!expanded,
       ref: setRefs,
       href: !disabled ? href : undefined
-    }), /*#__PURE__*/React__default.createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", {
       className: `${prefix}--tree-node__label`,
       ref: currentNodeLabel
-    }, /*#__PURE__*/React__default.createElement("span", {
+    }, /*#__PURE__*/React.createElement("span", {
       className: `${prefix}--tree-parent-node__toggle`
       // @ts-ignore
       ,
       disabled: disabled,
       onClick: handleToggleClick
-    }, /*#__PURE__*/React__default.createElement(CaretDown, {
+    }, /*#__PURE__*/React.createElement(CaretDown, {
       className: toggleClasses
-    })), /*#__PURE__*/React__default.createElement("span", {
+    })), /*#__PURE__*/React.createElement("span", {
       className: `${prefix}--tree-node__label__details`
-    }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
+    }, Icon && /*#__PURE__*/React.createElement(Icon, {
       className: `${prefix}--tree-node__icon`
-    }), label))), /*#__PURE__*/React__default.createElement("ul", {
+    }), label))), /*#__PURE__*/React.createElement("ul", {
       id: `${id}-subtree`,
       role: "group",
       className: cx(`${prefix}--tree-node__children`, {
@@ -335,25 +343,25 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) =>
       })
     }, nodesWithProps));
   } else {
-    return /*#__PURE__*/React__default.createElement("li", _extends({}, treeNodeProps, {
+    return /*#__PURE__*/React.createElement("li", _extends({}, treeNodeProps, {
       "aria-expanded": !!expanded,
       ref: setRefs
-    }), /*#__PURE__*/React__default.createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", {
       className: `${prefix}--tree-node__label`,
       ref: currentNodeLabel
-    }, /*#__PURE__*/React__default.createElement("span", {
+    }, /*#__PURE__*/React.createElement("span", {
       className: `${prefix}--tree-parent-node__toggle`
       // @ts-ignore
       ,
       disabled: disabled,
       onClick: handleToggleClick
-    }, /*#__PURE__*/React__default.createElement(CaretDown, {
+    }, /*#__PURE__*/React.createElement(CaretDown, {
       className: toggleClasses
-    })), /*#__PURE__*/React__default.createElement("span", {
+    })), /*#__PURE__*/React.createElement("span", {
       className: `${prefix}--tree-node__label__details`
-    }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
+    }, Icon && /*#__PURE__*/React.createElement(Icon, {
       className: `${prefix}--tree-node__icon`
-    }), label)), /*#__PURE__*/React__default.createElement("ul", {
+    }), label)), /*#__PURE__*/React.createElement("ul", {
       id: `${id}-subtree`,
       role: "group",
       className: cx(`${prefix}--tree-node__children`, {

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__default, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect } 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';
@@ -17,20 +17,19 @@ import { uniqueId } from '../../tools/uniqueId.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import TreeNode from './TreeNode.js';
 
-const TreeView = _ref => {
-  let {
-    active: prespecifiedActive,
-    children,
-    className,
-    hideLabel = false,
-    label,
-    multiselect = false,
-    onActivate,
-    onSelect,
-    selected: preselected,
-    size = 'sm',
-    ...rest
-  } = _ref;
+const TreeView = ({
+  active: prespecifiedActive,
+  children,
+  className,
+  hideLabel = false,
+  label,
+  multiselect = false,
+  onActivate,
+  onSelect,
+  selected: preselected,
+  size = 'sm',
+  ...rest
+}) => {
   const enableTreeviewControllable = useFeatureFlag('enable-treeview-controllable');
   const {
     current: treeId
@@ -65,8 +64,7 @@ const TreeView = _ref => {
       item.tabIndex = -1;
     });
   }
-  function handleTreeSelect(event) {
-    let node = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  function handleTreeSelect(event, node = {}) {
     const nodeId = node.id;
     if (multiselect && (event.metaKey || event.ctrlKey)) {
       if (!selected.includes(nodeId)) {
@@ -111,24 +109,33 @@ const TreeView = _ref => {
     }
   }
   let focusTarget = false;
-  const nodesWithProps = React__default.Children.map(children, _node => {
-    const node = _node;
-    const sharedNodeProps = {
-      active,
-      depth: 0,
-      onNodeFocusEvent: handleFocusEvent,
-      onTreeSelect: handleTreeSelect,
-      selected,
-      tabIndex: !node.props.disabled && -1 || undefined
-    };
-    if (!focusTarget && !node.props.disabled) {
-      sharedNodeProps.tabIndex = 0;
-      focusTarget = true;
-    }
-    if (/*#__PURE__*/React__default.isValidElement(node)) {
-      return /*#__PURE__*/React__default.cloneElement(node, sharedNodeProps);
-    }
-  });
+  function enhanceTreeNodes(children) {
+    return React.Children.map(children, child => {
+      if (! /*#__PURE__*/React.isValidElement(child)) return child;
+      const isTreeNode = child.type.displayName === '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);
   function handleKeyDown(event) {
     event.stopPropagation();
     if (matches(event, [ArrowUp, ArrowDown, Home, End])) {
@@ -211,11 +218,11 @@ const TreeView = _ref => {
   }, []);
   useActiveAndSelectedOnMount();
   const labelId = `${treeId}__label`;
-  const TreeLabel = () => !hideLabel ? /*#__PURE__*/React__default.createElement("label", {
+  const TreeLabel = () => !hideLabel ? /*#__PURE__*/React.createElement("label", {
     id: labelId,
     className: `${prefix}--label`
   }, label) : null;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TreeLabel, null), /*#__PURE__*/React__default.createElement("ul", _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TreeLabel, null), /*#__PURE__*/React.createElement("ul", _extends({}, rest, {
     "aria-label": hideLabel ? label : undefined,
     "aria-labelledby": !hideLabel ? labelId : undefined,
     "aria-multiselectable": multiselect || undefined,

package/es/components/UIShell/Content.js

@@ -7,19 +7,18 @@
 
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const Content = _ref => {
-  let {
-    className: customClassName,
-    children,
-    tagName = 'main',
-    ...rest
-  } = _ref;
+const Content = ({
+  className: customClassName,
+  children,
+  tagName = 'main',
+  ...rest
+}) => {
   const prefix = usePrefix();
   const className = cx(`${prefix}--content`, customClassName);
-  return /*#__PURE__*/React__default.createElement(tagName, {
+  return /*#__PURE__*/React.createElement(tagName, {
     ...rest,
     className
   }, children);

package/es/components/UIShell/Header.js

@@ -8,19 +8,18 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const Header = _ref => {
-  let {
-    className: customClassName,
-    children,
-    ...rest
-  } = _ref;
+const Header = ({
+  className: customClassName,
+  children,
+  ...rest
+}) => {
   const prefix = usePrefix();
   const className = cx(`${prefix}--header`, customClassName);
-  return /*#__PURE__*/React__default.createElement("header", _extends({}, rest, {
+  return /*#__PURE__*/React.createElement("header", _extends({}, rest, {
     className: className
   }), children);
 };

package/es/components/UIShell/HeaderContainer.js

@@ -7,17 +7,16 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useState, useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 import { Escape } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import { useWindowEvent } from '../../internal/useEvent.js';
 
-function HeaderContainer(_ref) {
-  let {
-    render: Children,
-    isSideNavExpanded = false,
-    ...rest
-  } = _ref;
+function HeaderContainer({
+  render: Children,
+  isSideNavExpanded = false,
+  ...rest
+}) {
   //state for expandable sidenav
   const [isSideNavExpandedState, setIsSideNavExpandedState] = useState(isSideNavExpanded);
   useWindowEvent('keydown', event => {
@@ -28,7 +27,7 @@ function HeaderContainer(_ref) {
   const handleHeaderMenuButtonClick = useCallback(() => {
     setIsSideNavExpandedState(prevIsSideNavExpanded => !prevIsSideNavExpanded);
   }, [setIsSideNavExpandedState]);
-  return /*#__PURE__*/React__default.createElement(Children, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Children, _extends({}, rest, {
     isSideNavExpanded: isSideNavExpandedState,
     onClickSideNavExpand: handleHeaderMenuButtonClick
   }));

package/es/components/UIShell/HeaderGlobalAction.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
-import React__default from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import Button from '../Button/Button.js';
@@ -22,19 +22,18 @@ import { usePrefix } from '../../internal/usePrefix.js';
  *
  * Note: children passed to this component should be an Icon.
  */
-const HeaderGlobalAction = /*#__PURE__*/React__default.forwardRef(function HeaderGlobalAction(_ref, ref) {
-  let {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    children,
-    className: customClassName,
-    onClick,
-    tooltipHighContrast = true,
-    tooltipDropShadow,
-    isActive,
-    tooltipAlignment,
-    ...rest
-  } = _ref;
+const HeaderGlobalAction = /*#__PURE__*/React.forwardRef(function HeaderGlobalAction({
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  children,
+  className: customClassName,
+  onClick,
+  tooltipHighContrast = true,
+  tooltipDropShadow,
+  isActive,
+  tooltipAlignment,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const className = cx({
     [customClassName]: !!customClassName,
@@ -45,7 +44,7 @@ const HeaderGlobalAction = /*#__PURE__*/React__default.forwardRef(function Heade
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy
   };
-  return /*#__PURE__*/React__default.createElement(Button, _extends({}, rest, accessibilityLabel, {
+  return /*#__PURE__*/React.createElement(Button, _extends({}, rest, accessibilityLabel, {
     className: className,
     onClick: onClick,
     type: "button",

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

@@ -7,5 +7,5 @@
 /**
  * Generic container for `HeaderGlobalAction` components
  */
-declare const HeaderGlobalBar: (props: import("../../types/common").ReactAttr<"div">) => React.ReactElement<any>;
+declare const HeaderGlobalBar: (props: import("react").HTMLAttributes<"div">) => React.ReactElement<any>;
 export default HeaderGlobalBar;

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

@@ -1,17 +1,10 @@
 /**
- * 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.
  */
-import React, { type JSX } from 'react';
-import PropTypes from 'prop-types';
-/**
- * `HeaderMenu` is used to render submenu's in the `Header`. Most often children
- * will be a `HeaderMenuItem`. It handles certain keyboard events to help
- * with managing focus. It also passes along refs to each child so that it can
- * help manage focus state of its children.
- */
+import React, { type FocusEvent, type KeyboardEvent, type MouseEvent, type ReactNode, type Ref } from 'react';
 export interface HeaderMenuProps {
     /**
      * Required props for the accessibility label of the menu
@@ -25,7 +18,7 @@ export interface HeaderMenuProps {
     /**
      * Provide a custom ref handler for the menu button
      */
-    focusRef?: React.Ref<any>;
+    focusRef?: Ref<any>;
     /**
      * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
      */
@@ -43,21 +36,21 @@ export interface HeaderMenuProps {
      * Optionally provide an onBlur handler that is called when the underlying
      * button fires it's onblur event
      */
-    onBlur?: (event: React.FocusEvent<HTMLLIElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLLIElement>) => void;
     /**
      * Optionally provide an onClick handler that is called when the underlying
      * button fires it's onclick event
      */
-    onClick?: (event: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
+    onClick?: (event: MouseEvent<HTMLLIElement>) => void;
     /**
      * Optionally provide an onKeyDown handler that is called when the underlying
      * button fires it's onkeydown event
      */
-    onKeyDown?: (event: React.KeyboardEvent<HTMLLIElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLLIElement>) => void;
     /**
      * Optional component to render instead of string
      */
-    renderMenuContent?: () => JSX.Element;
+    renderMenuContent?: () => ReactNode;
     /**
      * Optionally provide a tabIndex for the underlying menu button
      */
@@ -65,102 +58,7 @@ export interface HeaderMenuProps {
     /**
      * The children should be a series of `HeaderMenuItem` components.
      */
-    children?: React.ReactNode;
-}
-interface HeaderMenuState {
-    expanded: boolean;
-    selectedIndex: number | null;
-}
-declare class HeaderMenu extends React.Component<HeaderMenuProps, HeaderMenuState> {
-    static propTypes: {
-        /**
-         * Optionally provide a custom class to apply to the underlying `<li>` node
-         */
-        className: PropTypes.Requireable<string>;
-        /**
-         * Provide a custom ref handler for the menu button
-         */
-        focusRef: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
-         */
-        isActive: PropTypes.Requireable<boolean>;
-        /**
-         * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
-         * @deprecated Please use `isActive` instead. This will be removed in the next major release.
-         */
-        isCurrentPage: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
-        /**
-         * Provide a label for the link text
-         */
-        menuLinkName: PropTypes.Validator<string>;
-        /**
-         * Optionally provide an onBlur handler that is called when the underlying
-         * button fires it's onblur event
-         */
-        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Optionally provide an onClick handler that is called when the underlying
-         * button fires it's onclick event
-         */
-        onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Optionally provide an onKeyDown handler that is called when the underlying
-         * button fires it's onkeydown event
-         */
-        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Optional component to render instead of string
-         */
-        renderMenuContent: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Optionally provide a tabIndex for the underlying menu button
-         */
-        tabIndex: PropTypes.Requireable<number>;
-    };
-    static contextType: React.Context<string>;
-    _subMenus: React.RefObject<HTMLUListElement | null>;
-    private items;
-    private menuButtonRef;
-    constructor(props: any);
-    /**
-     * Toggle the expanded state of the menu on click.
-     */
-    handleOnClick: (e: any) => void;
-    /**
-     * Keyboard event handler for the entire menu.
-     */
-    handleOnKeyDown: (event: any) => void;
-    /**
-     * Handle our blur event from our underlying menuitems. Will mostly be used
-     * for closing our menu in response to a user clicking off or tabbing out of
-     * the menu or menubar.
-     */
-    handleOnBlur: (event: any) => void;
-    /**
-     * ref handler for our menu button. If we are supplied a `focusRef` prop, we also
-     * forward along the node.
-     *
-     * This is useful when this component is a child in a
-     * menu or menubar as it will allow the parent to explicitly focus the menu
-     * button node when that child should receive focus.
-     */
-    handleMenuButtonRef: (node: any) => void;
-    /**
-     * Handles individual menuitem refs. We assign them to a class instance
-     * property so that we can properly manage focus of our children.
-     */
-    handleItemRef: (index: any) => (node: any) => void;
-    handleMenuClose: (event: any) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
-    /**
-     * We capture the `ref` for each child inside of `this.items` to properly
-     * manage focus. In addition to this focus management, all items receive a
-     * `tabIndex: -1` so the user won't hit a large number of items in their tab
-     * sequence when they might not want to go through all the items.
-     */
-    _renderMenuItem: (item: React.ReactNode, index: number) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    children?: ReactNode;
 }
-declare const HeaderMenuForwardRef: React.ForwardRefExoticComponent<HeaderMenuProps & React.RefAttributes<unknown>>;
-export { HeaderMenu };
-export default HeaderMenuForwardRef;
+export declare const HeaderMenu: React.ForwardRefExoticComponent<HeaderMenuProps & React.RefAttributes<HTMLLIElement>>;
+export default HeaderMenu;