@carbon/react 1.80.0 → 1.81.0-rc.0

package/es/components/UIShell/SideNavMenu.js

@@ -112,7 +112,6 @@ SideNavMenu.propTypes = {
   /**
    * A component used to render an icon.
    */
-  // @ts-expect-error - PropTypes are unable to cover this case.
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Optional prop to specify the tabIndex of the button. If undefined, it will be applied default validation

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

@@ -30,53 +30,5 @@ export type SideNavMenuItemProps = ComponentProps<typeof Link> & {
      */
     as?: ElementType;
 };
-declare const SideNavMenuItem: React.ForwardRefExoticComponent<((import("./HeaderMenuItem").HeaderMenuItemBaseProps & {
-    /**
-     * Specify the children to be rendered inside of the `SideNavMenuItem`
-     */
-    children?: React.ReactNode;
-    /**
-     * Provide an optional class to be applied to the containing node
-     */
-    className?: string;
-    /**
-     * Optionally specify whether the link is "active". An active link is one that
-     * has an href that is the same as the current page. Can also pass in
-     * `aria-current="page"`, as well.
-     */
-    isActive?: boolean;
-    /**
-     * Optionally provide an href for the underlying li`
-     */
-    href?: string;
-    /**
-     * Optional component to render instead of default Link
-     */
-    as?: ElementType;
-}) | Omit<import("./Link").LinkBaseProps & Omit<any, "as"> & {
-    as?: React.ElementType | undefined;
-} & {
-    /**
-     * Specify the children to be rendered inside of the `SideNavMenuItem`
-     */
-    children?: React.ReactNode;
-    /**
-     * Provide an optional class to be applied to the containing node
-     */
-    className?: string;
-    /**
-     * Optionally specify whether the link is "active". An active link is one that
-     * has an href that is the same as the current page. Can also pass in
-     * `aria-current="page"`, as well.
-     */
-    isActive?: boolean;
-    /**
-     * Optionally provide an href for the underlying li`
-     */
-    href?: string;
-    /**
-     * Optional component to render instead of default Link
-     */
-    as?: ElementType;
-}, "ref">) & React.RefAttributes<HTMLElement>>;
+declare const SideNavMenuItem: React.ForwardRefExoticComponent<Omit<SideNavMenuItemProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export default SideNavMenuItem;

package/es/components/UIShell/SideNavMenuItem.js

@@ -10,7 +10,7 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import SideNavLinkText from './SideNavLinkText.js';
-import { Link } from './Link.js';
+import Link from './Link.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 const SideNavMenuItem = /*#__PURE__*/React__default.forwardRef(function SideNavMenuItem(props, ref) {

package/es/components/UIShell/SideNavSwitcher.js

@@ -73,7 +73,6 @@ SideNavSwitcher.propTypes = {
    * `<option>`. The text value will be what is displayed to the user and is set
    * as the `value` prop for each `<option>`.
    */
-  // @ts-expect-error
   options: PropTypes.arrayOf(PropTypes.string).isRequired
 };
 

package/es/components/UIShell/SwitcherItem.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, { HTMLAttributeAnchorTarget, KeyboardEvent } from 'react';
+import React, { HTMLAttributeAnchorTarget, KeyboardEvent, MouseEvent } from 'react';
 export interface BaseSwitcherItemProps {
     /**
      * Specify the text content for the link
@@ -32,7 +32,7 @@ export interface BaseSwitcherItemProps {
     /**
      * event handlers
      */
-    onClick?: (event: MouseEvent) => void;
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
     /**
      * Specify the tab index of the Link
      */

package/es/components/UIShell/SwitcherItem.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import React__default, { forwardRef } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import { Link } from './Link.js';
+import Link from './Link.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { ArrowDown, ArrowUp } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';

package/es/index.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.
@@ -35,7 +35,6 @@ export { FeatureFlags, useFeatureFlag, useFeatureFlags, FeatureFlags as unstable
 useFeatureFlag as unstable_useFeatureFlag, // this export can be removed in v12
 useFeatureFlags as unstable_useFeatureFlags, } from './components/FeatureFlags';
 export * from './components/FileUploader';
-export * from './components/FilterableMultiSelect';
 export * from './components/FluidForm';
 export * from './components/Form';
 export * from './components/FormGroup';
@@ -108,6 +107,7 @@ export { FluidSelect as unstable__FluidSelect, FluidSelectSkeleton as unstable__
 export { FluidSearch as unstable__FluidSearch, FluidSearchSkeleton as unstable__FluidSearchSkeleton, } from './components/FluidSearch';
 export { FluidTextArea as unstable__FluidTextArea, FluidTextAreaSkeleton as unstable__FluidTextAreaSkeleton, } from './components/FluidTextArea';
 export { FluidTextInput as unstable__FluidTextInput, FluidTextInputSkeleton as unstable__FluidTextInputSkeleton, } from './components/FluidTextInput';
+export { FluidNumberInput as unstable__FluidNumberInput, FluidNumberInputSkeleton as unstable__FluidNumberInputSkeleton, } from './components/FluidNumberInput';
 export { FluidTimePicker as unstable__FluidTimePicker, FluidTimePickerSkeleton as unstable__FluidTimePickerSkeleton, } from './components/FluidTimePicker';
 export { FluidTimePickerSelect as unstable__FluidTimePickerSelect } from './components/FluidTimePickerSelect';
 export * from './components/Heading';

package/es/index.js

@@ -73,7 +73,8 @@ export { MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemS
 export { MenuButton } from './components/MenuButton/index.js';
 export { default as Modal } from './components/Modal/Modal.js';
 export { default as ModalWrapper } from './components/ModalWrapper/ModalWrapper.js';
-import './components/MultiSelect/index.js';
+export { FilterableMultiSelect } from './components/MultiSelect/FilterableMultiSelect.js';
+export { MultiSelect } from './components/MultiSelect/MultiSelect.js';
 export { ActionableNotification, Callout, InlineNotification, NotificationActionButton, NotificationButton, StaticNotification, ToastNotification } from './components/Notification/Notification.js';
 export { default as NumberInputSkeleton } from './components/NumberInput/NumberInput.Skeleton.js';
 export { NumberInput } from './components/NumberInput/NumberInput.js';
@@ -122,14 +123,15 @@ export { default as SelectableTag } from './components/Tag/SelectableTag.js';
 export { default as TagSkeleton } from './components/Tag/Tag.Skeleton.js';
 export { default as TextArea } from './components/TextArea/TextArea.js';
 export { default as TextAreaSkeleton } from './components/TextArea/TextArea.Skeleton.js';
-import './components/TextInput/index.js';
+export { default as TextInput } from './components/TextInput/TextInput.js';
+export { default as TextInputSkeleton } from './components/TextInput/TextInput.Skeleton.js';
 export { ClickableTile, ExpandableTile, SelectableTile, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent } from './components/Tile/Tile.js';
 export { default as TileGroup } from './components/TileGroup/TileGroup.js';
 export { default as TimePicker } from './components/TimePicker/TimePicker.js';
 export { default as TimePickerSelect } from './components/TimePickerSelect/TimePickerSelect.js';
 export { Toggle } from './components/Toggle/Toggle.js';
 export { default as ToggleSkeleton } from './components/Toggle/Toggle.Skeleton.js';
-export { default as ToggleSmallSkeleton } from './components/ToggleSmall/ToggleSmall.Skeleton.js';
+export { ToggleSmallSkeleton } from './components/ToggleSmall/ToggleSmall.Skeleton.js';
 export { Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel } from './components/Toggletip/index.js';
 export { default as TreeNode } from './components/TreeView/TreeNode.js';
 export { default as TreeView } from './components/TreeView/TreeView.js';
@@ -181,6 +183,8 @@ export { default as unstable__FluidTextAreaSkeleton } from './components/FluidTe
 export { default as unstable__FluidTextInput } from './components/FluidTextInput/FluidTextInput.js';
 import './components/FluidTextInput/FluidPasswordInput.js';
 export { default as unstable__FluidTextInputSkeleton } from './components/FluidTextInput/FluidTextInput.Skeleton.js';
+export { default as unstable__FluidNumberInput } from './components/FluidNumberInput/FluidNumberInput.js';
+export { default as unstable__FluidNumberInputSkeleton } from './components/FluidNumberInput/FluidNumberInput.Skeleton.js';
 export { default as unstable__FluidTimePicker } from './components/FluidTimePicker/FluidTimePicker.js';
 export { default as unstable__FluidTimePickerSkeleton } from './components/FluidTimePicker/FluidTimePicker.Skeleton.js';
 export { default as unstable__FluidTimePickerSelect } from './components/FluidTimePickerSelect/FluidTimePickerSelect.js';
@@ -209,10 +213,7 @@ export { default as unstable_PageSelector } from './components/Pagination/experi
 export { default as unstable_Pagination } from './components/Pagination/experimental/Pagination.js';
 export { default as ContainedListItem } from './components/ContainedList/ContainedListItem/ContainedListItem.js';
 export { default as ContainedList } from './components/ContainedList/ContainedList.js';
-export { default as MultiSelect } from './components/MultiSelect/MultiSelect.js';
 export { default as SliderSkeleton } from './components/Slider/Slider.Skeleton.js';
-export { default as TextInputSkeleton } from './components/TextInput/TextInput.Skeleton.js';
-export { default as TextInput } from './components/TextInput/TextInput.js';
 export { LayoutDirection as unstable_LayoutDirection } from './components/LayoutDirection/LayoutDirection.js';
 export { useLayoutDirection as unstable_useLayoutDirection } from './components/LayoutDirection/useLayoutDirection.js';
 export { Text as unstable_Text } from './components/Text/Text.js';
@@ -240,4 +241,3 @@ export { default as TableToolbarAction } from './components/DataTable/TableToolb
 export { default as TableToolbarContent } from './components/DataTable/TableToolbarContent.js';
 export { default as TableToolbarSearch } from './components/DataTable/TableToolbarSearch.js';
 export { default as TableToolbarMenu } from './components/DataTable/TableToolbarMenu.js';
-export { default as FilterableMultiSelect } from './components/MultiSelect/FilterableMultiSelect.js';

package/es/internal/FloatingMenu.js

@@ -230,7 +230,8 @@ const FloatingMenu = _ref2 => {
       visibility: 'hidden',
       top: '0px'
     };
-    return /*#__PURE__*/cloneElement(children, {
+    const child = children;
+    return /*#__PURE__*/cloneElement(child, {
       ref: handleMenuRef,
       style: {
         ...styles,

package/es/internal/clamp.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Clamps a number between a minimum and maximum value (inclusive).
+ */
+export declare const clamp: <T extends number>(num: number, min: T, max: T) => T;

package/es/internal/clamp.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.
+ */
+
+/**
+ * Clamps a number between a minimum and maximum value (inclusive).
+ */
+const clamp = (num, min, max) => Math.min(max, Math.max(min, num));
+
+export { clamp };

package/es/internal/useEvent.d.ts

@@ -0,0 +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 { type MutableRefObject } from 'react';
+export declare const useEvent: <E extends keyof GlobalEventHandlersEventMap>(elementOrRef: HTMLElement | MutableRefObject<HTMLElement | null>, eventName: E, callback: (event: GlobalEventHandlersEventMap[E]) => void) => void;
+export declare const useWindowEvent: <E extends keyof WindowEventMap>(eventName: E, callback: (event: WindowEventMap[E]) => void) => void;

package/es/internal/useEvent.js

@@ -7,81 +7,40 @@
 
 import { useRef, useEffect } from 'react';
 
-// @ts-check
-
-/**
- * @template {keyof GlobalEventHandlersEventMap} E
- * @typedef {(event: GlobalEventHandlersEventMap[E]) => void} GlobalEventCallback
- */
-
-/**
- * @template T
- * @typedef {import('react').MutableRefObject<T>} MutableRefObject<T>
- */
-
-/**
- * @template {keyof GlobalEventHandlersEventMap} E
- * @param {HTMLElement | MutableRefObject<HTMLElement | null>} elementOrRef
- * @param {E} eventName
- * @param {GlobalEventCallback<E>} callback
- */
-function useEvent(elementOrRef, eventName, callback) {
-  /**
-   * @type {MutableRefObject<GlobalEventCallback<E> | null>}
-   */
+const useEvent = (elementOrRef, eventName, callback) => {
   const savedCallback = useRef(null);
   useEffect(() => {
     savedCallback.current = callback;
   }, [callback]);
   useEffect(() => {
-    /**
-     * @type {GlobalEventCallback<E>}
-     */
     const handler = event => {
       if (savedCallback.current) {
         savedCallback.current(event);
       }
     };
     const element = 'current' in elementOrRef ? elementOrRef.current : elementOrRef;
-    element?.addEventListener?.(eventName, handler);
+    element?.addEventListener(eventName, handler);
     return () => {
-      element?.removeEventListener?.(eventName, handler);
+      element?.removeEventListener(eventName, handler);
     };
   }, [elementOrRef, eventName]);
-}
-
-/**
- * @template {keyof WindowEventMap} E
- * @typedef {(event: WindowEventMap[E]) => void} WindowEventCallback
- */
-
-/**
- * @template {keyof WindowEventMap} E
- * @param {E} eventName
- * @param {WindowEventCallback<E>} callback
- */
-function useWindowEvent(eventName, callback) {
-  /**
-   * @type {MutableRefObject<WindowEventCallback<E> | null>}
-   */
+};
+const useWindowEvent = (eventName, callback) => {
   const savedCallback = useRef(null);
   useEffect(() => {
     savedCallback.current = callback;
   }, [callback]);
   useEffect(() => {
-    /**
-     * @type {WindowEventCallback<E>}
-     */
-    function handler(event) {
+    const handler = event => {
       if (savedCallback.current) {
         savedCallback.current(event);
       }
-    }
+    };
     window.addEventListener(eventName, handler);
     return () => {
       window.removeEventListener(eventName, handler);
     };
   }, [eventName]);
-}
+};
 
 export { useEvent, useWindowEvent };

package/es/internal/useId.js

@@ -6,7 +6,7 @@
  */
 
 import React__default, { useState, useEffect, useLayoutEffect } from 'react';
-import setupGetInstanceId from '../tools/setupGetInstanceId.js';
+import { setupGetInstanceId } from '../tools/setupGetInstanceId.js';
 import { canUseDOM } from './environment.js';
 import { useIdPrefix } from './useIdPrefix.js';
 

package/es/internal/useMatchMedia.d.ts

@@ -4,5 +4,10 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/** Listens to changes in a media query and returns whether it matches. */
-export declare const useMatchMedia: (mediaQuery: string) => boolean;
+/**
+ * Listens to changes in a media query and returns whether it matches.
+ * @param mediaQuery - The media query to listen to. For example, `(min-width: 600px)`.
+ * @param defaultState - The initial state to return before the media query is evaluated. Defaults to `false`.
+ * @returns Whether the media query matches.
+ */
+export declare const useMatchMedia: (mediaQuery: string, defaultState?: boolean) => boolean;

package/es/internal/useMatchMedia.js

@@ -6,17 +6,16 @@
  */
 
 import { useState, useEffect } from 'react';
-import { canUseDOM } from './environment.js';
 
-/** Listens to changes in a media query and returns whether it matches. */
-const useMatchMedia = mediaQuery => {
-  const [matches, setMatches] = useState(() => {
-    if (canUseDOM) {
-      const mediaQueryList = window.matchMedia(mediaQuery);
-      return mediaQueryList.matches;
-    }
-    return false;
-  });
+/**
+ * Listens to changes in a media query and returns whether it matches.
+ * @param mediaQuery - The media query to listen to. For example, `(min-width: 600px)`.
+ * @param defaultState - The initial state to return before the media query is evaluated. Defaults to `false`.
+ * @returns Whether the media query matches.
+ */
+const useMatchMedia = function (mediaQuery) {
+  let defaultState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const [matches, setMatches] = useState(defaultState);
   useEffect(() => {
     const listener = event => {
       setMatches(event.matches);

package/es/internal/useNoInteractiveChildren.js

@@ -14,9 +14,11 @@ function useNoInteractiveChildren(ref) {
     useEffect(() => {
       const node = ref.current ? getInteractiveContent(ref.current) : false;
       if (node) {
-        throw new Error(`Error: ${message}.\n\nInstead found: ${node.outerHTML}`);
+        const errorMessage = `Error: ${message}.\n\nInstead found: ${node.outerHTML}`;
+        console.error(errorMessage);
+        throw new Error(errorMessage);
       }
-    });
+    }, []);
   }
 }
 function useInteractiveChildrenNeedDescription(ref) {

package/es/internal/useOutsideClick.d.ts

@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { type RefObject } from 'react';
-export declare const useOutsideClick: <T extends HTMLElement>(ref: RefObject<T>, callback: (event: MouseEvent) => void) => void;
+export declare const useOutsideClick: <T extends HTMLElement | null>(ref: RefObject<T>, callback: (event: MouseEvent) => void) => void;

package/es/prop-types/AriaPropTypes.js

@@ -6,7 +6,7 @@
  */
 
 import PropTypes from 'prop-types';
-import isRequiredOneOf from './isRequiredOneOf.js';
+import { isRequiredOneOf } from './isRequiredOneOf.js';
 
 const AriaLabelPropType = isRequiredOneOf({
   'aria-label': PropTypes.string,

package/es/prop-types/isRequiredOneOf.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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 { Validator, ValidationMap } from 'prop-types';
+/**
+ * Returns a set of prop-type validators that enforce at least one of the
+ * specified props must be provided.
+ *
+ * @param propTypes - An object of prop-type validators. The keys of the object
+ *    are the names of the props, and the values are the prop-type validators.
+ * @returns A new object of wrapped prop-type validators.
+ */
+export declare const isRequiredOneOf: <T extends Record<string, Validator<any>>>(propTypes: T) => ValidationMap<any>;

package/es/prop-types/isRequiredOneOf.js

@@ -6,12 +6,14 @@
  */
 
 /**
- * @param {[key: string]: Function)} propTypes The list of type checkers, keyed by prop names.
- * @returns {[key: string]: Function}
- *   The new prop type checkers that checks if one of the given props exist,
- *   in addition to the original type checkings.
+ * Returns a set of prop-type validators that enforce at least one of the
+ * specified props must be provided.
+ *
+ * @param propTypes - An object of prop-type validators. The keys of the object
+ *    are the names of the props, and the values are the prop-type validators.
+ * @returns A new object of wrapped prop-type validators.
  */
-function isRequiredOneOf(propTypes) {
+const isRequiredOneOf = propTypes => {
   const names = Object.keys(propTypes);
   const checker = propType => function (props, propName, componentName) {
     if (process.env.NODE_ENV !== 'production' && names.every(name => typeof props[name] === 'undefined')) {
@@ -22,10 +24,10 @@ function isRequiredOneOf(propTypes) {
     }
     return propType(props, propName, componentName, ...rest);
   };
-  return names.reduce((o, name) => ({
-    ...o,
+  return names.reduce((acc, name) => ({
+    ...acc,
     [name]: checker(propTypes[name])
   }), {});
-}
+};
 
-export { isRequiredOneOf as default };
+export { isRequiredOneOf };

package/es/tools/setupGetInstanceId.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ */
+/**
+ * Creates an instance ID generator.
+ *
+ * @returns A function that returns a unique sequential ID on each call.
+ */
+export declare const setupGetInstanceId: () => () => number;

package/es/tools/setupGetInstanceId.js

@@ -6,14 +6,13 @@
  */
 
 /**
- * Generic utility to initialize a method that will return a unique instance id
- * for a component.
+ * Creates an instance ID generator.
+ *
+ * @returns A function that returns a unique sequential ID on each call.
  */
-function setupGetInstanceId() {
+const setupGetInstanceId = () => {
   let instanceId = 0;
-  return function getInstanceId() {
-    return ++instanceId;
-  };
-}
+  return () => ++instanceId;
+};
 
-export { setupGetInstanceId as default };
+export { setupGetInstanceId };

package/es/tools/toggleClass.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright IBM Corp. 2019, 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.
+ */
+/**
+ * Toggles a class on an element.
+ *
+ * @param element - The target element.
+ * @param className - The class to toggle.
+ * @param add - `true` to add the class, `false` to remove it.
+ */
+export declare const toggleClass: (element: Element, className: string, add: boolean) => void;

package/es/tools/toggleClass.js

@@ -6,15 +6,14 @@
  */
 
 /**
- * Adds or removes a CSS class to an element.
- * @param {Element} element An element.
- * @param {string} name A CSS class name.
- * @param {boolean} add `true` to add the given CSS class to given the element. Otherwise to remove.
+ * Toggles a class on an element.
+ *
+ * @param element - The target element.
+ * @param className - The class to toggle.
+ * @param add - `true` to add the class, `false` to remove it.
  */
-function toggleClass(element, name, add) {
-  if (element.classList.contains(name) === !add) {
-    element.classList[add ? 'add' : 'remove'](name);
-  }
-}
+const toggleClass = (element, className, add) => {
+  element.classList.toggle(className, add);
+};
 
-export { toggleClass as default };
+export { toggleClass };

package/es/tools/wrapComponent.d.ts

@@ -16,5 +16,5 @@ type WrapComponentArgs<T extends HTMLTagName> = {
  * @param {{ name: string, type: string, className?: string | (prefix: string) => string }} props
  * @returns
  */
-declare const wrapComponent: <T extends HTMLTagName>({ name, className: getClassName, type, }: WrapComponentArgs<T>) => ((props: ReactAttr<T>) => React.ReactElement);
+declare const wrapComponent: <T extends HTMLTagName>({ name, className: getClassName, type, }: WrapComponentArgs<T>) => ((props: ReactAttr<T>) => React.ReactElement<any>);
 export default wrapComponent;

package/es/types/common.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.
@@ -22,8 +22,3 @@ export interface TranslateWithId<MID = string, ARGS = Record<string, unknown>> {
      */
     translateWithId?(messageId: MID, args?: ARGS): string;
 }
-/**
- * Alias of TranslateWithId. Will be removed in v12
- * @deprecated Use TranslateWithId instead
- */
-export type InternationalProps<MID = string, ARGS = Record<string, unknown>> = TranslateWithId<MID, ARGS>;

package/lib/components/Accordion/AccordionItem.d.ts

@@ -33,12 +33,12 @@ export interface AccordionItemProps {
      * removed in the next major release of Carbon. Use the
      * `renderToggle` prop instead.
      */
-    renderExpando?: (props: PropsWithChildren<AccordionToggleProps>) => ReactElement;
+    renderExpando?: (props: PropsWithChildren<AccordionToggleProps>) => ReactElement<any>;
     /**
      * The callback function to render the expand button.
      * Can be a React component class.
      */
-    renderToggle?: (props: PropsWithChildren<AccordionToggleProps>) => ReactElement;
+    renderToggle?: (props: PropsWithChildren<AccordionToggleProps>) => ReactElement<any>;
     /**
      * The accordion title.
      */

package/lib/components/AspectRatio/AspectRatio.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import { PropsWithChildren, ReactHTML } from 'react';
+import { PropsWithChildren, HTMLElementType } from 'react';
 export interface AspectRatioProps {
     /**
      * Provide a custom component or string to be rendered as
@@ -17,7 +17,7 @@ export interface AspectRatioProps {
      * <AspectRatio as="article">My content</AspectRatio>
      * ```
      */
-    as?: keyof ReactHTML;
+    as?: HTMLElementType;
     /**
      * Specify a class name for the outermost node
      * of the component.

package/lib/components/Button/Button.js

@@ -53,6 +53,9 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef((props, ref) =>
     tooltipPosition = 'top',
     ...rest
   } = props;
+  if (ButtonImageElement && !children && !iconDescription) {
+    console.error('Button: renderIcon property specified without also providing an iconDescription property. ' + 'This may impact accessibility for screen reader users.');
+  }
   const handleClick = evt => {
     // Prevent clicks on the tooltip from triggering the button click event
     if (evt.target === tooltipRef.current) {

package/lib/components/Button/ButtonBase.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 { ButtonProps } from './Button';
-declare const ButtonBase: React.ForwardRefExoticComponent<Omit<ButtonProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
+declare const ButtonBase: React.ForwardRefExoticComponent<Omit<ButtonProps<React.ElementType<any, keyof JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
 export default ButtonBase;