@carbon/react 1.99.0 → 1.100.0-rc.0

package/lib/components/ComboBox/ComboBox.js

@@ -197,6 +197,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
   }, [typeahead, inputValue, items, itemToString, autocompleteCustomFilter]);
   const isManualClearingRef = React.useRef(false);
+  const committedCustomValueRef = React.useRef('');
   const [isClearing, setIsClearing] = React.useState(false);
   const prefix = usePrefix.usePrefix();
   const {
@@ -286,11 +287,13 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
               return changes;
             }
             const nextSelectedItem = items.find(item => itemToString(item) === inputValue) ?? inputValue;
+            const isCustomSelection = typeof nextSelectedItem === 'string' && !items.some(item => isEqual(item, nextSelectedItem));
             if (!isEqual(currentSelectedItem, nextSelectedItem) && onChange) {
               onChange({
                 selectedItem: nextSelectedItem,
                 inputValue
               });
+              committedCustomValueRef.current = isCustomSelection ? inputValue : '';
             }
             return {
               ...changes,
@@ -529,6 +532,9 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
         return;
       }
       if ((type === ItemClick || type === FunctionSelectItem || type === InputKeyDownEnter) && typeof newSelectedItem !== 'undefined' && !isEqual(selectedItemProp, newSelectedItem)) {
+        if (items.some(item => isEqual(item, newSelectedItem))) {
+          committedCustomValueRef.current = '';
+        }
         onChange({
           selectedItem: newSelectedItem
         });
@@ -538,7 +544,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // Keep the dropdown highlight in sync with either the controlled value or
   // Downshift's own selection when uncontrolled.
-  const menuSelectedItem = typeof selectedItemProp !== 'undefined' ? selectedItemProp : selectedItem;
+  const currentSelectedItem = typeof selectedItemProp !== 'undefined' ? selectedItemProp : selectedItem;
   React.useEffect(() => {
     // Used to expose the downshift actions to consumers for use with downshiftProps
     // An odd pattern, here we mutate the value stored in the ref provided from the consumer.
@@ -653,8 +659,18 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     ...inputProps,
     onChange: e => {
       const newValue = e.target.value;
+      const shouldClearSelection = allowCustomValue && committedCustomValueRef.current && inputValue === committedCustomValueRef.current && newValue === '';
       setInputValue(newValue);
       downshiftSetInputValue(newValue);
+      if (shouldClearSelection) {
+        setIsClearing(true);
+        onChange({
+          selectedItem: null,
+          inputValue: ''
+        });
+        selectItem(null);
+        committedCustomValueRef.current = '';
+      }
     },
     ref: mergeRefs.mergeRefs(textInput, ref, inputRef),
     onKeyDown: event => {
@@ -671,6 +687,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
         // manually fire it when `allowCustomValue` is provided, the menu is closing,
         // and there is a value.
         if (allowCustomValue && isOpen && inputValue && highlightedIndex === -1) {
+          committedCustomValueRef.current = inputValue;
           onChange({
             selectedItem: null,
             inputValue
@@ -735,6 +752,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
         selectedItem: null
       });
       selectItem(null);
+      committedCustomValueRef.current = '';
       handleSelectionClear();
     },
     translateWithId: translateWithId,
@@ -766,13 +784,13 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     } = itemProps;
     return /*#__PURE__*/React.createElement(index$2.default.MenuItem, _rollupPluginBabelHelpers.extends({
       key: itemProps.id,
-      isActive: isEqual(menuSelectedItem, item),
+      isActive: isEqual(currentSelectedItem, item),
       isHighlighted: highlightedIndex === index,
       title: title,
       disabled: disabled
     }, modifiedItemProps), ItemToElement ? /*#__PURE__*/React.createElement(ItemToElement, _rollupPluginBabelHelpers.extends({
       key: itemProps.id
-    }, item)) : itemToString(item), isEqual(menuSelectedItem, item) && /*#__PURE__*/React.createElement(iconsReact.Checkmark, {
+    }, item)) : itemToString(item), isEqual(currentSelectedItem, item) && /*#__PURE__*/React.createElement(iconsReact.Checkmark, {
       className: `${prefix}--list-box__menu-item__selected-icon`
     }));
   }) : null)), helperText && !invalid && !warn && !isFluid && /*#__PURE__*/React.createElement(Text.Text, {

package/lib/components/ComposedModal/ComposedModal.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2023, 2025
+ * Copyright IBM Corp. 2023, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -61,7 +61,7 @@ export interface ComposedModalProps extends HTMLAttributes<HTMLDivElement> {
      * Specify an optional handler for closing modal.
      * Returning `false` here prevents closing modal.
      */
-    onClose?(event: MouseEvent): void | boolean;
+    onClose?: ((event: MouseEvent) => boolean) | ((event: MouseEvent) => void);
     /**
      * Called for all `onKeyDown` events that do not close the modal
      */

package/lib/components/ContainedList/ContainedList.d.ts

@@ -4,12 +4,9 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { ReactNode } from 'react';
-import ContainedListItem from './ContainedListItem';
+import { ReactNode } from 'react';
+import PropTypes from 'prop-types';
 declare const variants: readonly ["on-page", "disclosed"];
-export type ContainedListType = React.FC<ContainedListProps> & {
-    ContainedListItem: typeof ContainedListItem;
-};
 export type Variants = (typeof variants)[number];
 export interface ContainedListProps {
     /**
@@ -41,5 +38,37 @@ export interface ContainedListProps {
      */
     size?: 'sm' | 'md' | 'lg' | 'xl';
 }
-declare const ContainedList: ContainedListType;
+declare const ContainedList: {
+    ({ action, children, className, isInset, kind, label, size, ...rest }: ContainedListProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * A slot for a possible interactive element to render.
+         */
+        action: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * A collection of ContainedListItems to be rendered in the ContainedList
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Additional CSS class names.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the dividing lines in between list items should be inset.
+         */
+        isInset: PropTypes.Requireable<boolean>;
+        /**
+         * The kind of ContainedList you want to display
+         */
+        kind: PropTypes.Requireable<"on-page" | "disclosed">;
+        /**
+         * A label describing the contained list.
+         */
+        label: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        /**
+         * Specify the size of the contained list.
+         */
+        size: PropTypes.Requireable<string>;
+    };
+};
 export default ContainedList;

package/lib/components/ContainedList/ContainedList.js

@@ -136,6 +136,8 @@ ContainedList.propTypes = {
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl'])
 };
-ContainedList.ContainedListItem = ContainedListItem.default;
+Object.assign(ContainedList, {
+  ContainedListItem: ContainedListItem.default
+});
 
 exports.default = ContainedList;

package/lib/components/ContainedList/ContainedListItem/ContainedListItem.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 React, { type ComponentType, type FunctionComponent, ReactNode } from 'react';
+import { type ElementType, type ReactNode } from 'react';
+import PropTypes from 'prop-types';
 interface ContainedListItemProps {
     /**
      * A slot for a possible interactive element to render within the item.
@@ -29,7 +30,35 @@ interface ContainedListItemProps {
     /**
      * A component used to render an icon.
      */
-    renderIcon?: ComponentType | FunctionComponent;
+    renderIcon?: ElementType;
 }
-declare const ContainedListItem: React.FC<ContainedListItemProps>;
+declare const ContainedListItem: {
+    ({ action, children, className, disabled, onClick, renderIcon: IconElement, ...rest }: ContainedListItemProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * A slot for a possible interactive element to render within the item.
+         */
+        action: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * The content of this item. Must not contain any interactive elements. Use props.action to include those.
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Additional CSS class names.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Whether this item is disabled.
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Provide an optional function to be called when the item is clicked.
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * A component used to render an icon.
+         */
+        renderIcon: PropTypes.Requireable<object>;
+    };
+};
 export default ContainedListItem;

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2022
+ * Copyright IBM Corp. 2022, 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/ContainedList/index.js

@@ -13,8 +13,11 @@ var deprecateFieldOnObject = require('../../internal/deprecateFieldOnObject.js')
 var ContainedList = require('./ContainedList.js');
 var ContainedListItem = require('./ContainedListItem/ContainedListItem.js');
 
-ContainedList.default.ContainedListItem = ContainedListItem.default;
 if (process.env.NODE_ENV !== 'production') {
+  // @ts-expect-error - This component did not have a `displayName` before it
+  // was properly typed. After adding proper typing, a type error appears here.
+  // The warning logged to the console includes `undefined` because no
+  // `displayName` is set.
   deprecateFieldOnObject.deprecateFieldOnObject(ContainedList.default, 'ContainedListItem', ContainedListItem.default);
 }
 

package/lib/components/DangerButton/DangerButton.d.ts

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -140,7 +140,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         [key: string]: unknown;
     }) => {
         onCancel: () => void;
-        onSelectAll?: () => void | undefined;
+        onSelectAll?: () => void;
         shouldShowBatchActions: boolean;
         totalCount: number;
         totalSelected: number;
@@ -367,7 +367,15 @@ export declare const DataTable: {
             slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         };
     };
-    TableToolbar: React.FC<import("./TableToolbar").TableToolbarProps>;
+    TableToolbar: {
+        ({ ["aria-label"]: ariaLabel, ariaLabel: deprecatedAriaLabel, children, size, ...rest }: import("./TableToolbar").TableToolbarProps): import("react/jsx-runtime").JSX.Element;
+        propTypes: {
+            "aria-label": PropTypes.Requireable<string>;
+            ariaLabel: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
+            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            size: PropTypes.Requireable<string>;
+        };
+    };
     TableToolbarAction: React.ForwardRefExoticComponent<import("./TableToolbarAction").TableToolbarActionProps & React.RefAttributes<HTMLDivElement>>;
     TableToolbarContent: (props: React.HTMLAttributes<"div">) => React.ReactElement<any>;
     TableToolbarSearch: {
@@ -394,12 +402,21 @@ export declare const DataTable: {
             translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
         };
     };
-    TableToolbarMenu: React.FC<import("./TableToolbarMenu").TableToolbarMenuProps>;
+    TableToolbarMenu: {
+        ({ className, renderIcon, iconDescription, children, menuOptionsClass, ...rest }: import("./TableToolbarMenu").TableToolbarMenuProps): import("react/jsx-runtime").JSX.Element;
+        propTypes: {
+            children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+            className: PropTypes.Requireable<string>;
+            iconDescription: PropTypes.Requireable<string>;
+            menuOptionsClass: PropTypes.Requireable<string>;
+            renderIcon: PropTypes.Requireable<object>;
+        };
+    };
     propTypes: {
         /**
          * Pass in the children that will be rendered within the Table
          */
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        children: PropTypes.Requireable<(...args: any[]) => any>;
         /**
          * Experimental property. Allows table to align cell contents to the top if there is text wrapping in the content. Might have performance issues, intended for smaller tables
          */

package/lib/components/DataTable/DataTable.js

@@ -584,7 +584,7 @@ DataTable.propTypes = {
   /**
    * Pass in the children that will be rendered within the Table
    */
-  children: PropTypes.node,
+  children: PropTypes.func,
   /**
    * Experimental property. Allows table to align cell contents to the top if there is text wrapping in the content. Might have performance issues, intended for smaller tables
    */

package/lib/components/DataTable/TableExpandRow.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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/DataTable/TableHeader.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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/DataTable/TableHeader.js

@@ -49,21 +49,23 @@ const sortDirections = {
   [sortStates.sortStates.ASC]: 'ascending',
   [sortStates.sortStates.DESC]: 'descending'
 };
-const TableHeader = /*#__PURE__*/React.forwardRef(function TableHeader({
-  className: headerClassName,
-  children,
-  colSpan,
-  decorator,
-  isSortable = false,
-  isSortHeader,
-  onClick,
-  scope = defaultScope,
-  sortDirection,
-  translateWithId: t = defaultTranslateWithId,
-  slug,
-  id,
-  ...rest
-}, ref) {
+const frFn = React.forwardRef;
+const TableHeader = frFn((props, ref) => {
+  const {
+    className: headerClassName,
+    children,
+    colSpan,
+    decorator,
+    isSortable = false,
+    isSortHeader,
+    onClick,
+    scope = defaultScope,
+    sortDirection,
+    translateWithId: t = defaultTranslateWithId,
+    slug,
+    id,
+    ...rest
+  } = props;
   const prefix = usePrefix.usePrefix();
   const uniqueId = useId.useId('table-sort');
 

package/lib/components/DataTable/TableToolbar.d.ts

@@ -4,6 +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 PropTypes from 'prop-types';
 import React from 'react';
 export interface TableToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -25,5 +26,28 @@ export interface TableToolbarProps extends React.HTMLAttributes<HTMLDivElement>
      */
     size?: 'sm' | 'lg';
 }
-declare const TableToolbar: React.FC<TableToolbarProps>;
+declare const TableToolbar: {
+    ({ ["aria-label"]: ariaLabel, ariaLabel: deprecatedAriaLabel, children, size, ...rest }: TableToolbarProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * 'aria-label' of the TableToolbar component.
+         * Specify a label to be read by screen readers on the container node
+         */
+        "aria-label": PropTypes.Requireable<string>;
+        /**
+         * Deprecated, please use `aria-label` instead.
+         * Specify a label to be read by screen readers on the container node.
+         * 'aria-label' of the TableToolbar component.
+         */
+        ariaLabel: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
+        /**
+         * Pass in the children that will be rendered inside the TableToolbar
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * `lg` Change the row height of table
+         */
+        size: PropTypes.Requireable<string>;
+    };
+};
 export default TableToolbar;

package/lib/components/DataTable/TableToolbarMenu.d.ts

@@ -1,12 +1,32 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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 PropTypes from 'prop-types';
 import { OverflowMenuProps } from '../OverflowMenu';
-export interface TableToolbarMenuProps extends OverflowMenuProps {
-}
-declare const TableToolbarMenu: React.FC<TableToolbarMenuProps>;
+export type TableToolbarMenuProps = OverflowMenuProps;
+declare const TableToolbarMenu: {
+    ({ className, renderIcon, iconDescription, children, menuOptionsClass, ...rest }: TableToolbarMenuProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        /**
+         * Provide an optional class name for the toolbar menu
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * The description of the menu icon.
+         */
+        iconDescription: PropTypes.Requireable<string>;
+        /**
+         * Provide an optional class name for the toolbar menu
+         */
+        menuOptionsClass: PropTypes.Requireable<string>;
+        /**
+         * A component used to render an icon.
+         */
+        renderIcon: PropTypes.Requireable<object>;
+    };
+};
 export default TableToolbarMenu;

package/lib/components/DataTable/TableToolbarMenu.js

@@ -18,9 +18,6 @@ var usePrefix = require('../../internal/usePrefix.js');
 var index = require('../OverflowMenu/index.js');
 
 const defaultIconDescription = 'Settings';
-
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type -- https://github.com/carbon-design-system/carbon/issues/20452
-
 const TableToolbarMenu = ({
   className,
   renderIcon = iconsReact.Settings,

package/lib/components/DataTableSkeleton/DataTableSkeleton.d.ts

@@ -4,7 +4,9 @@
  * 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 FunctionComponent, TableHTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+import React, { type TableHTMLAttributes } from 'react';
+import { DataTableSize } from '../DataTable/DataTable';
 export interface DataTableSkeletonHeader {
     /**
      * Specify header label
@@ -41,6 +43,10 @@ export interface DataTableSkeletonProps extends TableHTMLAttributes<HTMLTableEle
      * Specify if the table toolbar should be rendered as part of the skeleton.
      */
     showToolbar?: boolean;
+    /**
+     * Changes the row height of table.
+     */
+    size?: DataTableSize;
     /**
      * Optionally specify whether you want the DataTable to be zebra striped
      */
@@ -50,5 +56,48 @@ export interface DataTableSkeletonProps extends TableHTMLAttributes<HTMLTableEle
      */
     className?: string;
 }
-declare const DataTableSkeleton: FunctionComponent<DataTableSkeletonProps>;
+declare const DataTableSkeleton: {
+    ({ headers, rowCount, columnCount, zebra, compact, className, showHeader, showToolbar, size, ...rest }: DataTableSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify the number of columns that you want to render in the skeleton state
+         */
+        columnCount: PropTypes.Requireable<number>;
+        /**
+         * Optionally specify whether you want the Skeleton to be rendered as a
+         * compact DataTable
+         */
+        compact: PropTypes.Requireable<boolean>;
+        /**
+         * Optionally specify the displayed headers
+         */
+        headers: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{
+            header: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        }>>[]>;
+        /**
+         * Specify the number of rows that you want to render in the skeleton state
+         */
+        rowCount: PropTypes.Requireable<number>;
+        /**
+         * Specify if the table header should be rendered as part of the skeleton.
+         */
+        showHeader: PropTypes.Requireable<boolean>;
+        /**
+         * Specify if the table toolbar should be rendered as part of the skeleton.
+         */
+        showToolbar: PropTypes.Requireable<boolean>;
+        /**
+         * Changes the row height of table.
+         */
+        size: PropTypes.Requireable<string>;
+        /**
+         * Optionally specify whether you want the DataTable to be zebra striped
+         */
+        zebra: PropTypes.Requireable<boolean>;
+    };
+};
 export default DataTableSkeleton;

package/lib/components/DataTableSkeleton/DataTableSkeleton.js

@@ -25,12 +25,14 @@ const DataTableSkeleton = ({
   className,
   showHeader = true,
   showToolbar = true,
+  size = 'lg',
   ...rest
 }) => {
   const prefix = usePrefix.usePrefix();
   const dataTableSkeletonClasses = cx(className, {
     [`${prefix}--skeleton`]: true,
     [`${prefix}--data-table`]: true,
+    [`${prefix}--data-table--${size}`]: size,
     [`${prefix}--data-table--zebra`]: zebra,
     [`${prefix}--data-table--compact`]: compact
   });
@@ -101,6 +103,10 @@ DataTableSkeleton.propTypes = {
    * Specify if the table toolbar should be rendered as part of the skeleton.
    */
   showToolbar: PropTypes.bool,
+  /**
+   * Changes the row height of table.
+   */
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
   /**
    * Optionally specify whether you want the DataTable to be zebra striped
    */

package/lib/components/DatePicker/DatePicker.d.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 import flatpickr from 'flatpickr';
 import { DateLimit, DateOption } from 'flatpickr/dist/types/options';
 import { type SupportedLocale } from './DatePickerLocales';