@carbon/react 1.80.1 → 1.81.0

package/lib/components/Text/Text.js

@@ -20,7 +20,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const Text = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const TextBase = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
   let {
     as,
     children,
@@ -63,6 +63,7 @@ const Text = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ref: ref
   }, rest, textProps), children));
 });
+const Text = TextBase;
 Text.propTypes = {
   /**
    * Provide a custom element type used to render the outermost node

package/lib/components/TextInput/ControlledPasswordInput.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2023, 2024
+ * Copyright IBM Corp. 2023, 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/lib/components/TextInput/ControlledPasswordInput.js

@@ -15,7 +15,6 @@ var cx = require('classnames');
 var PropTypes = require('prop-types');
 var iconsReact = require('@carbon/icons-react');
 var util = require('./util.js');
-var warning = require('../../internal/warning.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var useId = require('../../internal/useId.js');
@@ -27,7 +26,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-let didWarnAboutDeprecation = false;
 const ControlledPasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function ControlledPasswordInput(_ref, ref) {
   let {
     labelText,
@@ -55,10 +53,6 @@ const ControlledPasswordInput = /*#__PURE__*/React__default["default"].forwardRe
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const controlledPasswordInstanceId = useId.useId();
-  if (process.env.NODE_ENV !== 'production') {
-    process.env.NODE_ENV !== "production" ? warning.warning(didWarnAboutDeprecation, '`<TextInput.ControlledPasswordInput>` has been deprecated in favor of `<TextInput.PasswordInput />` and will be removed in the next major release of `carbon-components-react`') : void 0;
-    didWarnAboutDeprecation = true;
-  }
   const errorId = id + '-error-msg';
   const textInputClasses = cx__default["default"](`${prefix}--text-input`, `${prefix}--password-input`, className, {
     [`${prefix}--text-input--light`]: light,

package/lib/components/TextInput/TextInput.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/lib/components/TextInput/TextInput.js

@@ -13,8 +13,6 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js');
-var PasswordInput = require('./PasswordInput.js');
-var ControlledPasswordInput = require('./ControlledPasswordInput.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var util = require('./util.js');
 require('../FluidForm/FluidForm.js');
@@ -222,8 +220,6 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef(function Tex
   }), isFluid && !inline && normalizedProps.validation), !isFluid && !inline && (normalizedProps.validation || helper)));
 });
 TextInput.displayName = 'TextInput';
-TextInput.PasswordInput = PasswordInput["default"];
-TextInput.ControlledPasswordInput = ControlledPasswordInput["default"];
 TextInput.propTypes = {
   /**
    * Specify an optional className to be applied to the `<input>` node

package/lib/components/TextInput/index.d.ts

@@ -1,3 +1,9 @@
+/**
+ * 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 TextInput, { type TextInputProps } from './TextInput';
 import { type TextInputSkeletonProps } from './TextInput.Skeleton';
 export { default as TextInputSkeleton } from './TextInput.Skeleton';

package/lib/components/TextInput/index.js

@@ -9,16 +9,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var deprecateFieldOnObject = require('../../internal/deprecateFieldOnObject.js');
-var ControlledPasswordInput = require('./ControlledPasswordInput.js');
-var PasswordInput = require('./PasswordInput.js');
 var TextInput = require('./TextInput.js');
 var TextInput_Skeleton = require('./TextInput.Skeleton.js');
 
-if (process.env.NODE_ENV !== 'production') {
-  deprecateFieldOnObject.deprecateFieldOnObject(TextInput["default"], 'ControlledPasswordInput', ControlledPasswordInput["default"]);
-  deprecateFieldOnObject.deprecateFieldOnObject(TextInput["default"], 'PasswordInput', PasswordInput["default"]);
-}
+
 
 exports.TextInput = TextInput["default"];
 exports["default"] = TextInput["default"];

package/lib/components/Tile/Tile.js

@@ -213,7 +213,6 @@ ClickableTile.propTypes = {
   /**
    * A component used to render an icon.
    */
-  // @ts-expect-error: Invalid derived prop type, seemingly no real solution.
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])
 };
 const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(function SelectableTile(_ref3, ref) {

package/lib/components/Toggle/Toggle.d.ts

@@ -6,7 +6,7 @@
  */
 import React, { type KeyboardEventHandler, type MouseEventHandler } from 'react';
 import PropTypes from 'prop-types';
-type ExcludedAttributes = 'aria-labelledby' | 'aria-checked' | 'type' | 'role' | 'id' | 'size' | 'onClick';
+type ExcludedAttributes = 'aria-labelledby' | 'aria-checked' | 'type' | 'role' | 'id' | 'size' | 'onClick' | 'onToggle';
 export interface ToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, ExcludedAttributes> {
     /**
      * Specify another element's id to be used as the label for this toggle

package/lib/components/ToggleSmall/ToggleSmall.Skeleton.d.ts

@@ -1,11 +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 PropTypes from 'prop-types';
-import React from 'react';
 export interface ToggleSmallSkeletonProps {
     ['aria-label']: string;
     /**
@@ -18,14 +17,14 @@ export interface ToggleSmallSkeletonProps {
     id?: string;
     /**
      * Provide the text that will be read by a screen reader when visiting this
-     * control
-     * `aria-label` is always required but will be null if `labelText` is also
-     * provided
+     * control. `aria-label` is always required but will be `null` if `labelText`
+     * is also provided.
      */
     labelText?: string;
 }
-declare class ToggleSmallSkeleton extends React.Component<ToggleSmallSkeletonProps> {
-    static propTypes: {
+export declare const ToggleSmallSkeleton: {
+    ({ id, labelText, className, ...rest }: ToggleSmallSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
         "aria-label": PropTypes.Validator<string>;
         /**
          * Specify an optional className to add to the form item wrapper.
@@ -37,13 +36,9 @@ declare class ToggleSmallSkeleton extends React.Component<ToggleSmallSkeletonPro
         id: PropTypes.Requireable<string>;
         /**
          * Provide the text that will be read by a screen reader when visiting this
-         * control
-         * `aria-label` is always required but will be null if `labelText` is also
-         * provided
+         * control. `aria-label` is always required but will be `null` if `labelText`
+         * is also provided.
          */
         labelText: PropTypes.Requireable<string>;
     };
-    render(): import("react/jsx-runtime").JSX.Element;
-}
-export default ToggleSmallSkeleton;
-export { ToggleSmallSkeleton };
+};

package/lib/components/ToggleSmall/ToggleSmall.Skeleton.js

@@ -22,40 +22,37 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _path;
-class ToggleSmallSkeleton extends React__default["default"].Component {
-  render() {
-    const {
-      id,
-      labelText,
-      className,
-      ...rest
-    } = this.props;
-    return /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, prefix => {
-      return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-        className: cx__default["default"](`${prefix}--form-item`, className)
-      }, rest), /*#__PURE__*/React__default["default"].createElement("input", {
-        type: "checkbox",
-        id: id,
-        className: `${prefix}--toggle ${prefix}--toggle--small ${prefix}--skeleton`
-      }), /*#__PURE__*/React__default["default"].createElement("label", {
-        className: `${prefix}--toggle__label ${prefix}--skeleton`,
-        htmlFor: id
-      }, labelText && /*#__PURE__*/React__default["default"].createElement("span", {
-        className: `${prefix}--toggle__label-text`
-      }, labelText), /*#__PURE__*/React__default["default"].createElement("span", {
-        className: `${prefix}--toggle__appearance`
-      }, /*#__PURE__*/React__default["default"].createElement("svg", {
-        className: `${prefix}--toggle__check`,
-        width: "6px",
-        height: "5px",
-        viewBox: "0 0 6 5"
-      }, _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
-        d: "M2.2403 2.7299L4.9245 0 6 1.1117 2.2384 5 0 2.6863 1.0612 1.511z"
-      }))))));
-    });
-  }
-}
-_rollupPluginBabelHelpers.defineProperty(ToggleSmallSkeleton, "propTypes", {
+const ToggleSmallSkeleton = _ref => {
+  let {
+    id,
+    labelText,
+    className,
+    ...rest
+  } = _ref;
+  const prefix = React.useContext(usePrefix.PrefixContext);
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: cx__default["default"](`${prefix}--form-item`, className)
+  }, rest), /*#__PURE__*/React__default["default"].createElement("input", {
+    type: "checkbox",
+    id: id,
+    className: `${prefix}--toggle ${prefix}--toggle--small ${prefix}--skeleton`
+  }), /*#__PURE__*/React__default["default"].createElement("label", {
+    className: `${prefix}--toggle__label ${prefix}--skeleton`,
+    htmlFor: id
+  }, labelText && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: `${prefix}--toggle__label-text`
+  }, labelText), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: `${prefix}--toggle__appearance`
+  }, /*#__PURE__*/React__default["default"].createElement("svg", {
+    className: `${prefix}--toggle__check`,
+    width: "6px",
+    height: "5px",
+    viewBox: "0 0 6 5"
+  }, _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M2.2403 2.7299L4.9245 0 6 1.1117 2.2384 5 0 2.6863 1.0612 1.511z"
+  }))))));
+};
+ToggleSmallSkeleton.propTypes = {
   ['aria-label']: PropTypes__default["default"].string.isRequired,
   /**
    * Specify an optional className to add to the form item wrapper.
@@ -67,12 +64,10 @@ _rollupPluginBabelHelpers.defineProperty(ToggleSmallSkeleton, "propTypes", {
   id: PropTypes__default["default"].string,
   /**
    * Provide the text that will be read by a screen reader when visiting this
-   * control
-   * `aria-label` is always required but will be null if `labelText` is also
-   * provided
+   * control. `aria-label` is always required but will be `null` if `labelText`
+   * is also provided.
    */
   labelText: PropTypes__default["default"].string
-});
+};
 
 exports.ToggleSmallSkeleton = ToggleSmallSkeleton;
-exports["default"] = ToggleSmallSkeleton;

package/lib/components/Toggletip/index.js

@@ -137,8 +137,11 @@ function Toggletip(_ref2) {
       actions.close();
     }
   });
-  useEvent.useWindowEvent('click', event => {
-    if (open && ref.current && !ref.current.contains(event.target)) {
+  useEvent.useWindowEvent('click', _ref3 => {
+    let {
+      target
+    } = _ref3;
+    if (open && target instanceof Node && !ref.current?.contains(target)) {
       actions.close();
     }
   });
@@ -216,14 +219,14 @@ Toggletip.propTypes = {
  * clicks and keyboard interactions.
  */
 
-const ToggletipButton = /*#__PURE__*/React__default["default"].forwardRef(function ToggletipButton(_ref3, ref) {
+const ToggletipButton = /*#__PURE__*/React__default["default"].forwardRef(function ToggletipButton(_ref4, ref) {
   let {
     children,
     className: customClassName,
     label = 'Show information',
     as: BaseComponent,
     ...rest
-  } = _ref3;
+  } = _ref4;
   const toggletip = useToggletip();
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${prefix}--toggletip-button`, customClassName);
@@ -261,11 +264,11 @@ ToggletipButton.displayName = 'ToggletipButton';
  * `children` passed in as a prop inside of `PopoverContent` so that they will
  * be rendered inside of the popover for this component.
  */
-const ToggletipContent = /*#__PURE__*/React__default["default"].forwardRef(function ToggletipContent(_ref4, ref) {
+const ToggletipContent = /*#__PURE__*/React__default["default"].forwardRef(function ToggletipContent(_ref5, ref) {
   let {
     children,
     className: customClassName
-  } = _ref4;
+  } = _ref5;
   const toggletip = useToggletip();
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement(index.PopoverContent, _rollupPluginBabelHelpers["extends"]({
@@ -293,11 +296,11 @@ ToggletipContent.displayName = 'ToggletipContent';
  * `ToggletipActions` is a container for one or two actions present at the base
  * of a toggletip. It is used for layout of these items.
  */
-function ToggletipActions(_ref5) {
+function ToggletipActions(_ref6) {
   let {
     children,
     className: customClassName
-  } = _ref5;
+  } = _ref6;
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${prefix}--toggletip-actions`, customClassName);
   return /*#__PURE__*/React__default["default"].createElement("div", {

package/lib/components/Tooltip/Tooltip.d.ts

@@ -15,7 +15,7 @@ interface TooltipBaseProps {
     /**
      * Pass in the child to which the tooltip will be applied
      */
-    children?: React.ReactElement;
+    children?: React.ReactElement<any>;
     /**
      * Specify an optional className to be applied to the container node
      */

package/lib/components/TreeView/TreeView.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 from 'react';
+import React, { type JSX } from 'react';
 import TreeNode, { TreeNodeProps } from './TreeNode';
 export type TreeViewProps = {
     /**

package/lib/components/UIShell/Content.d.ts

@@ -28,11 +28,13 @@ declare const Content: {
         suppressContentEditableWarning?: boolean | undefined;
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
         autoFocus?: boolean | undefined;
         contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         hidden?: boolean | undefined;
         id?: string | undefined;
         lang?: string | undefined;
@@ -56,7 +58,6 @@ declare const Content: {
         rev?: string | undefined;
         typeof?: string | undefined;
         vocab?: string | undefined;
-        autoCapitalize?: string | undefined;
         autoCorrect?: string | undefined;
         autoSave?: string | undefined;
         color?: string | undefined;
@@ -68,6 +69,10 @@ declare const Content: {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
+        popover?: "" | "auto" | "manual" | undefined;
+        popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+        popoverTarget?: string | undefined;
+        inert?: boolean | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
         is?: string | undefined;
         "aria-activedescendant"?: string | undefined;
@@ -284,8 +289,16 @@ declare const Content: {
         onAnimationEndCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
         onAnimationIteration?: React.AnimationEventHandler<HTMLElement> | undefined;
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+        onToggle?: React.ToggleEventHandler<HTMLElement> | undefined;
+        onBeforeToggle?: React.ToggleEventHandler<HTMLElement> | undefined;
+        onTransitionCancel?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionCancelCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
         onTransitionEnd?: React.TransitionEventHandler<HTMLElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionRun?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionRunCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionStart?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionStartCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
     }, Element>;
     propTypes: {
         /**

package/lib/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;
+declare const HeaderGlobalBar: (props: import("../../types/common").ReactAttr<"div">) => React.ReactElement<any>;
 export default HeaderGlobalBar;

package/lib/components/UIShell/HeaderMenu.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 from 'react';
+import React, { type JSX } from 'react';
 import PropTypes from 'prop-types';
 /**
  * `HeaderMenu` is used to render submenu's in the `Header`. Most often children
@@ -117,106 +117,9 @@ declare class HeaderMenu extends React.Component<HeaderMenuProps, HeaderMenuStat
          * Optionally provide a tabIndex for the underlying menu button
          */
         tabIndex: PropTypes.Requireable<number>;
-        0: string;
-        length: 1;
-        toString(): string;
-        toLocaleString(): string;
-        toLocaleString(locales: string | string[], options?: Intl.NumberFormatOptions & Intl.DateTimeFormatOptions): string;
-        pop(): string | undefined;
-        push(...items: string[]): number;
-        concat(...items: ConcatArray<string>[]): string[];
-        concat(...items: (string | ConcatArray<string>)[]): string[];
-        join(separator?: string): string;
-        reverse(): string[];
-        shift(): string | undefined;
-        slice(start?: number, end?: number): string[];
-        sort(compareFn?: ((a: string, b: string) => number) | undefined): [key: string];
-        splice(start: number, deleteCount?: number): string[];
-        splice(start: number, deleteCount: number, ...items: string[]): string[];
-        unshift(...items: string[]): number;
-        indexOf(searchElement: string, fromIndex?: number): number;
-        lastIndexOf(searchElement: string, fromIndex?: number): number;
-        every<S extends string>(predicate: (value: string, index: number, array: string[]) => value is S, thisArg?: any): this is S[];
-        every(predicate: (value: string, index: number, array: string[]) => unknown, thisArg?: any): boolean;
-        some(predicate: (value: string, index: number, array: string[]) => unknown, thisArg?: any): boolean;
-        forEach(callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any): void;
-        map<U>(callbackfn: (value: string, index: number, array: string[]) => U, thisArg?: any): U[];
-        filter<S extends string>(predicate: (value: string, index: number, array: string[]) => value is S, thisArg?: any): S[];
-        filter(predicate: (value: string, index: number, array: string[]) => unknown, thisArg?: any): string[];
-        reduce(callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string): string;
-        reduce(callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string, initialValue: string): string;
-        reduce<U>(callbackfn: (previousValue: U, currentValue: string, currentIndex: number, array: string[]) => U, initialValue: U): U;
-        reduceRight(callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string): string;
-        reduceRight(callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string, initialValue: string): string;
-        reduceRight<U>(callbackfn: (previousValue: U, currentValue: string, currentIndex: number, array: string[]) => U, initialValue: U): U;
-        find<S extends string>(predicate: (value: string, index: number, obj: string[]) => value is S, thisArg?: any): S | undefined;
-        find(predicate: (value: string, index: number, obj: string[]) => unknown, thisArg?: any): string | undefined;
-        findIndex(predicate: (value: string, index: number, obj: string[]) => unknown, thisArg?: any): number;
-        fill(value: string, start?: number, end?: number): [key: string];
-        copyWithin(target: number, start: number, end?: number): [key: string];
-        entries(): ArrayIterator<[number, string]>;
-        keys(): ArrayIterator<number>;
-        values(): ArrayIterator<string>;
-        includes(searchElement: string, fromIndex?: number): boolean;
-        flatMap<U, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U | readonly U[], thisArg?: This | undefined): U[];
-        flat<A, D extends number = 1>(this: A, depth?: D | undefined): FlatArray<A, D>[];
-        at(index: number): string | undefined;
-        findLast<S extends string>(predicate: (value: string, index: number, array: string[]) => value is S, thisArg?: any): S | undefined;
-        findLast(predicate: (value: string, index: number, array: string[]) => unknown, thisArg?: any): string | undefined;
-        findLastIndex(predicate: (value: string, index: number, array: string[]) => unknown, thisArg?: any): number;
-        toReversed(): string[];
-        toSorted(compareFn?: ((a: string, b: string) => number) | undefined): string[];
-        toSpliced(start: number, deleteCount: number, ...items: string[]): string[];
-        toSpliced(start: number, deleteCount?: number): string[];
-        with(index: number, value: string): string[];
-        [Symbol.iterator](): ArrayIterator<string>;
-        [Symbol.unscopables]: {
-            [x: number]: boolean | undefined;
-            length?: boolean | undefined;
-            toString?: boolean | undefined;
-            toLocaleString?: boolean | undefined;
-            pop?: boolean | undefined;
-            push?: boolean | undefined;
-            concat?: boolean | undefined;
-            join?: boolean | undefined;
-            reverse?: boolean | undefined;
-            shift?: boolean | undefined;
-            slice?: boolean | undefined;
-            sort?: boolean | undefined;
-            splice?: boolean | undefined;
-            unshift?: boolean | undefined;
-            indexOf?: boolean | undefined;
-            lastIndexOf?: boolean | undefined;
-            every?: boolean | undefined;
-            some?: boolean | undefined;
-            forEach?: boolean | undefined;
-            map?: boolean | undefined;
-            filter?: boolean | undefined;
-            reduce?: boolean | undefined;
-            reduceRight?: boolean | undefined;
-            find?: boolean | undefined;
-            findIndex?: boolean | undefined;
-            fill?: boolean | undefined;
-            copyWithin?: boolean | undefined;
-            entries?: boolean | undefined;
-            keys?: boolean | undefined;
-            values?: boolean | undefined;
-            includes?: boolean | undefined;
-            flatMap?: boolean | undefined;
-            flat?: boolean | undefined;
-            at?: boolean | undefined;
-            findLast?: boolean | undefined;
-            findLastIndex?: boolean | undefined;
-            toReversed?: boolean | undefined;
-            toSorted?: boolean | undefined;
-            toSpliced?: boolean | undefined;
-            with?: boolean | undefined;
-            [Symbol.iterator]?: boolean | undefined;
-            readonly [Symbol.unscopables]?: boolean | undefined;
-        };
     };
     static contextType: React.Context<string>;
-    _subMenus: React.RefObject<HTMLUListElement>;
+    _subMenus: React.RefObject<HTMLUListElement | null>;
     private items;
     private menuButtonRef;
     constructor(props: any);

package/lib/components/UIShell/HeaderMenu.js

@@ -167,9 +167,15 @@ class HeaderMenu extends React__default["default"].Component {
       onKeyDown,
       ...rest
     } = this.props;
-    const hasActiveDescendant = childrenArg => React__default["default"].Children.toArray(childrenArg).some(child => /*#__PURE__*/React__default["default"].isValidElement(child) && (
-    // This is the type guard
-    child.props.isActive || child.props.isCurrentPage || Array.isArray(child.props.children) && hasActiveDescendant(child.props.children)));
+    const hasActiveDescendant = childrenArg => React__default["default"].Children.toArray(childrenArg).some(child => {
+      if (! /*#__PURE__*/React__default["default"].isValidElement(child)) {
+        return false;
+      }
+
+      // Explicitly type the element to access props safely
+      const element = child;
+      return element.props.isActive || element.props.isCurrentPage || Array.isArray(element.props.children) && hasActiveDescendant(element.props.children);
+    });
     const accessibilityLabel = {
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy
@@ -213,6 +219,7 @@ class HeaderMenu extends React__default["default"].Component {
       className: `${this.context}--header__menu-arrow`
     })), /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({}, accessibilityLabel, {
       ref: this._subMenus,
+      onClick: this.handleOnClick,
       className: `${prefix}--header__menu`
     }), React__default["default"].Children.map(children, this._renderMenuItem)));
   }