@carbon/react 1.80.0 → 1.81.0-rc.0

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)));
   }

package/lib/components/UIShell/HeaderMenuButton.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 { type ComponentProps } from 'react';
+import { type ComponentProps, type JSX } from 'react';
 import PropTypes from 'prop-types';
 type HeaderMenuButtonBaseProps = Omit<ComponentProps<'button'>, 'title' | 'type'>;
 export interface HeaderMenuButtonProps extends HeaderMenuButtonBaseProps {
@@ -37,103 +37,6 @@ declare namespace HeaderMenuButton {
          * button fires it's onclick event
          */
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        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;
-        };
     };
 }
 export default HeaderMenuButton;

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

@@ -4,7 +4,8 @@
  * 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 ComponentProps, type ForwardedRef, type ReactNode, ElementType, WeakValidationMap } from 'react';
+import { WeakValidationMap } from 'prop-types';
+import { type ComponentProps, type ReactNode, ElementType, JSX } from 'react';
 import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
 export interface HeaderMenuItemBaseProps {
     className?: string | undefined;
@@ -17,9 +18,7 @@ export interface HeaderMenuItemBaseProps {
 }
 export type HeaderMenuItemProps<E extends ElementType = 'a'> = PolymorphicComponentPropWithRef<E, HeaderMenuItemBaseProps>;
 export interface HeaderMenuItemComponent {
-    <E extends ElementType = 'a'>(props: HeaderMenuItemProps<E> & {
-        ref?: ForwardedRef<ElementType>;
-    }): JSX.Element | null;
+    <E extends ElementType = 'a'>(props: HeaderMenuItemProps<E>): JSX.Element | null;
     displayName?: string;
     propTypes?: WeakValidationMap<HeaderMenuItemProps<any>>;
 }

package/lib/components/UIShell/HeaderMenuItem.js

@@ -23,7 +23,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const HeaderMenuItem = /*#__PURE__*/React.forwardRef(function HeaderMenuItemRenderFunction(_ref, ref) {
+const HeaderMenuItem = /*#__PURE__*/React.forwardRef(function HeaderMenuItem(_ref, ref) {
   let {
     className,
     isActive,
@@ -31,7 +31,7 @@ const HeaderMenuItem = /*#__PURE__*/React.forwardRef(function HeaderMenuItemRend
     'aria-current': ariaCurrent,
     children,
     role,
-    tabIndex = 0,
+    tabIndex,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -47,7 +47,7 @@ const HeaderMenuItem = /*#__PURE__*/React.forwardRef(function HeaderMenuItemRend
   return /*#__PURE__*/React__default["default"].createElement("li", {
     className: className,
     role: role
-  }, /*#__PURE__*/React__default["default"].createElement(Link.Link, _rollupPluginBabelHelpers["extends"]({}, rest, {
+  }, /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
     "aria-current": ariaCurrent,
     className: linkClassName,
     ref: ref,

package/lib/components/UIShell/HeaderName.js

@@ -31,7 +31,7 @@ function HeaderName(_ref) {
   } = _ref;
   const selectorPrefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${selectorPrefix}--header__name`, customClassName);
-  return /*#__PURE__*/React__default["default"].createElement(Link.Link, _rollupPluginBabelHelpers["extends"]({}, rest, {
+  return /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: className
   }), prefix && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${selectorPrefix}--header__name--prefix`

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

@@ -19,103 +19,6 @@ declare namespace HeaderNavigation {
          * Optionally provide a custom class to apply to the underlying <nav> node
          */
         className: PropTypes.Requireable<string>;
-        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;
-        };
     };
 }
 export default HeaderNavigation;

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

@@ -4,24 +4,24 @@
  * 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, { ForwardedRef, type ElementType, type WeakValidationMap } from 'react';
+import PropTypes, { WeakValidationMap } from 'prop-types';
+import { JSX, type ElementType } from 'react';
 import { PolymorphicProps } from '../../types/common';
-import { HeaderMenuItemBaseProps } from './HeaderMenuItem';
 export interface LinkBaseProps {
     /**
      * @deprecated Use `as` instead
      */
-    element?: undefined;
-    ref?: ForwardedRef<ElementType>;
+    element?: ElementType | undefined;
+    as?: ElementType | undefined;
+    isSideNavExpanded?: boolean | undefined;
 }
-export type LinkProps<E extends React.ElementType> = PolymorphicProps<E, LinkBaseProps>;
+export type LinkProps<E extends ElementType = 'a'> = PolymorphicProps<E, LinkBaseProps>;
 export interface LinkComponent {
-    <E extends ElementType = 'a'>(props: LinkProps<E> | HeaderMenuItemBaseProps): JSX.Element | null;
+    <E extends ElementType = 'a'>(props: LinkProps<E>): JSX.Element | null;
     displayName?: string;
     propTypes?: WeakValidationMap<LinkProps<any>>;
 }
-export declare const Link: LinkComponent;
+declare const Link: LinkComponent;
 /**
  * Link is a custom component that allows us to supporting rendering elements
  * other than `a` in our markup. The goal is to allow users to support passing

package/lib/components/UIShell/Link.js

@@ -19,10 +19,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-// Note: Maybe we should use `as` instead of `element`? `as` appears to be
-// standard and is used in other places in this project.
+// First define the component without generics
 
-const Link = /*#__PURE__*/React__default["default"].forwardRef(function LinkRenderFunction(_ref, ref) {
+const LinkBase = (_ref, ref) => {
   let {
     element,
     as: BaseComponent,
@@ -35,7 +34,11 @@ const Link = /*#__PURE__*/React__default["default"].forwardRef(function LinkRend
   return /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({
     ref: ref
   }, rest));
-});
+};
+
+// Use forwardRef with the non-generic function
+const Link = /*#__PURE__*/React__default["default"].forwardRef(LinkBase);
+
 /**
  * Link is a custom component that allows us to supporting rendering elements
  * other than `a` in our markup. The goal is to allow users to support passing
@@ -65,6 +68,5 @@ const LinkPropTypes = {
 Link.displayName = 'Link';
 Link.propTypes = LinkPropTypes;
 
-exports.Link = Link;
 exports.LinkPropTypes = LinkPropTypes;
 exports["default"] = Link;

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

@@ -4,8 +4,8 @@
  * 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 ComponentProps, type FocusEvent, type KeyboardEvent, type MouseEventHandler } from 'react';
-export interface SideNavProps extends ComponentProps<'nav'> {
+import React, { type FocusEvent, type KeyboardEvent, type MouseEventHandler } from 'react';
+export interface SideNavProps {
     expanded?: boolean | undefined;
     defaultExpanded?: boolean | undefined;
     isChildOfHeader?: boolean | undefined;
@@ -25,5 +25,5 @@ interface SideNavContextData {
     isRail?: boolean | undefined;
 }
 export declare const SideNavContext: React.Context<SideNavContextData>;
-declare const SideNav: React.ForwardRefExoticComponent<Omit<SideNavProps, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const SideNav: React.ForwardRefExoticComponent<Omit<SideNavProps & React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
 export default SideNav;

package/lib/components/UIShell/SideNav.js

@@ -181,7 +181,7 @@ function SideNavRenderFunction(_ref, ref) {
     tabIndex: -1,
     ref: navRef,
     className: `${prefix}--side-nav__navigation ${className}`,
-    inert: !isRail ? expanded || isLg ? undefined : -1 : undefined
+    inert: !isRail ? !(expanded || isLg) : undefined
   }, accessibilityLabel, eventHandlers, other), childrenToRender));
 }
 const SideNav = /*#__PURE__*/React__default["default"].forwardRef(SideNavRenderFunction);

package/lib/components/UIShell/SideNavHeader.js

@@ -51,7 +51,6 @@ SideNavHeader.propTypes = {
   /**
    * A component used to render an icon.
    */
-  // @ts-expect-error - PropTypes are unable to cover this case.
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]).isRequired
 };
 

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

@@ -4,7 +4,8 @@
  * 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 { ComponentType, ElementType, ForwardedRef, ReactNode, WeakValidationMap } from 'react';
+import { WeakValidationMap } from 'prop-types';
+import { ComponentType, ElementType, JSX, ReactNode } from 'react';
 import { LinkProps } from './Link';
 export type SideNavLinkProps<E extends ElementType> = LinkProps<E> & {
     /**
@@ -46,9 +47,7 @@ export type SideNavLinkProps<E extends ElementType> = LinkProps<E> & {
     tabIndex?: number;
 };
 export interface SideNavLinkComponent {
-    <E extends ElementType = 'a'>(props: SideNavLinkProps<E> & {
-        ref?: ForwardedRef<ElementType>;
-    }): JSX.Element | null;
+    <E extends ElementType = 'a'>(props: SideNavLinkProps<E>): JSX.Element | null;
     displayName?: string;
     propTypes?: WeakValidationMap<SideNavLinkProps<any>>;
 }

package/lib/components/UIShell/SideNavLink.js

@@ -26,7 +26,9 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const SideNavLink = /*#__PURE__*/React.forwardRef(function SideNavLink(_ref, ref) {
+// First define a non-generic base component to work with forwardRef
+
+const SideNavLinkBase = (_ref, ref) => {
   let {
     children,
     className: customClassName,
@@ -46,14 +48,17 @@ const SideNavLink = /*#__PURE__*/React.forwardRef(function SideNavLink(_ref, ref
   });
   return /*#__PURE__*/React__default["default"].createElement(SideNavItem["default"], {
     large: large
-  }, /*#__PURE__*/React__default["default"].createElement(Link.Link, _rollupPluginBabelHelpers["extends"]({}, rest, {
+  }, /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: className,
     ref: ref,
     tabIndex: tabIndex === undefined ? !isSideNavExpanded && !isRail ? -1 : 0 : tabIndex
   }), IconElement && /*#__PURE__*/React__default["default"].createElement(SideNavIcon["default"], {
     small: true
   }, /*#__PURE__*/React__default["default"].createElement(IconElement, null)), /*#__PURE__*/React__default["default"].createElement(SideNavLinkText["default"], null, children)));
-});
+};
+
+// Use forwardRef with the non-generic function and cast to the generic component type
+const SideNavLink = /*#__PURE__*/React.forwardRef(SideNavLinkBase);
 SideNavLink.displayName = 'SideNavLink';
 SideNavLink.propTypes = {
   ...Link.LinkPropTypes,