@carbon/react 1.99.0 → 1.100.0

package/es/components/FileUploader/FileUploader.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/es/components/FileUploader/FileUploader.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useState, useCallback, useImperativeHandle } from 'react';
+import React, { forwardRef, useState, useCallback, useImperativeHandle } from 'react';
 import Filename from './Filename.js';
 import FileUploaderButton from './FileUploaderButton.js';
 import { ButtonKinds } from '../Button/Button.js';
@@ -20,7 +20,7 @@ import '../Text/TextDirection.js';
 import { useId } from '../../internal/useId.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 
-const FileUploader = /*#__PURE__*/React.forwardRef(({
+const FileUploader = /*#__PURE__*/forwardRef(({
   accept,
   buttonKind,
   buttonLabel,

package/es/components/FileUploader/FileUploaderDropContainer.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/es/components/FileUploader/FileUploaderDropContainer.js

@@ -73,22 +73,40 @@ function FileUploaderDropContainer({
       return acc.concat([curr]);
     }, []);
   }
-  function handleChange(event) {
-    const files = [...(event.target.files ?? [])];
-    const filesToValidate = multiple ? files : [files[0]];
-    const addedFiles = validateFiles(filesToValidate);
-    return onAddFiles(event, {
-      addedFiles
+  const handleFiles = (event, files) => {
+    if (!files.length) return onAddFiles(event, {
+      addedFiles: []
     });
-  }
-  function handleDrop(event) {
-    const files = [...event.dataTransfer.files];
     const filesToValidate = multiple ? files : [files[0]];
     const addedFiles = validateFiles(filesToValidate);
     return onAddFiles(event, {
       addedFiles
     });
-  }
+  };
+  const handleChange = event => {
+    const files = [...(event.target.files ?? [])];
+    return handleFiles(event, files);
+  };
+  const handleDrop = event => {
+    const items = [...(event.dataTransfer.items ?? [])];
+    const files = items.length ?
+    // Normalize dropped items to files. Skip directories and non-file items.
+    items.reduce((acc, item) => {
+      if (item.kind !== 'file') {
+        return acc;
+      }
+      const entry = item.webkitGetAsEntry();
+      if (entry?.isDirectory) {
+        return acc;
+      }
+      const file = item.getAsFile();
+      if (file) {
+        acc.push(file);
+      }
+      return acc;
+    }, []) : [...event.dataTransfer.files];
+    return handleFiles(event, files);
+  };
   const handleClick = () => {
     if (!disabled) {
       inputRef.current?.click();

package/es/components/FluidComboBox/FluidComboBox.Skeleton.d.ts

@@ -1,15 +1,23 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import PropTypes from 'prop-types';
 export interface FluidComboBoxSkeletonProps {
     /**
      * Specify an optional className to add.
      */
     className?: string;
 }
-declare const FluidComboBoxSkeleton: React.FC<FluidComboBoxSkeletonProps>;
+declare const FluidComboBoxSkeleton: {
+    ({ className, ...rest }: FluidComboBoxSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+    };
+};
 export default FluidComboBoxSkeleton;

package/es/components/FluidComboBox/FluidComboBox.d.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2022, 2025
+ * Copyright IBM Corp. 2022, 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, { ComponentType, type ComponentProps } from 'react';
+import React, { type ComponentProps } from 'react';
 import ComboBox from '../ComboBox';
 import { ComboBoxProps } from '../ComboBox/ComboBox';
 type ItemToStringHandler<ItemType> = (item: ItemType | null) => string;
@@ -46,11 +46,6 @@ export interface FluidComboBoxProps<ItemType> extends ComboBoxProps<ItemType>, P
      * Specify if the `FluidComboBox` should render its menu items in condensed mode
      */
     isCondensed?: boolean;
-    /**
-     * Function to render items as custom components instead of strings.
-     * Defaults to null and is overridden by a getter
-     */
-    itemToElement?: ComponentType<ItemType> | null;
     /**
      * Helper function passed to downshift that allows the library to render a
      * given item to a string label. By default, it extracts the `label` field

package/es/components/FluidComboBox/FluidComboBox.js

@@ -66,8 +66,7 @@ FluidComboBox.propTypes = {
    */
   isCondensed: PropTypes.bool,
   /**
-   * Function to render items as custom components instead of strings.
-   * Defaults to null and is overridden by a getter
+   * Renders an item as a custom React node instead of a string.
    */
   itemToElement: PropTypes.func,
   /**

package/es/components/FluidDatePicker/FluidDatePicker.Skeleton.d.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import PropTypes from 'prop-types';
 export interface FluidDatePickerSkeletonProps {
     /**
      * Specify an optional className to be applied to the outer FluidForm wrapper
@@ -15,5 +15,17 @@ export interface FluidDatePickerSkeletonProps {
      */
     datePickerType?: 'simple' | 'single' | 'range';
 }
-declare const FluidDatePickerSkeleton: React.FC<FluidDatePickerSkeletonProps>;
+declare const FluidDatePickerSkeleton: {
+    ({ className, datePickerType, ...other }: FluidDatePickerSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to be applied to the outer FluidForm wrapper
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify which variant of the DatePicker the skeleton should mimic
+         */
+        datePickerType: PropTypes.Requireable<string>;
+    };
+};
 export default FluidDatePickerSkeleton;

package/es/components/FluidDatePicker/FluidDatePicker.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.
@@ -35,5 +35,5 @@ export interface FluidDatePickerProps {
      */
     warnText?: React.ReactNode;
 }
-declare const FluidDatePicker: React.FC<FluidDatePickerProps>;
+declare const FluidDatePicker: React.ForwardRefExoticComponent<FluidDatePickerProps & React.RefAttributes<HTMLInputElement>>;
 export default FluidDatePicker;

package/es/components/FluidDropdown/FluidDropdown.Skeleton.d.ts

@@ -1,15 +1,23 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import PropTypes from 'prop-types';
 export interface FluidDropdownSkeletonProps {
     /**
      * Specify an optional className to add.
      */
     className?: string;
 }
-declare const FluidDropdownSkeleton: React.FC<FluidDropdownSkeletonProps>;
+declare const FluidDropdownSkeleton: {
+    ({ className, ...rest }: FluidDropdownSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+    };
+};
 export default FluidDropdownSkeleton;

package/es/components/FluidDropdown/FluidDropdown.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2022, 2025
+ * Copyright IBM Corp. 2022, 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.
@@ -43,11 +43,6 @@ export interface FluidDropdownProps<ItemType> extends DropdownProps<ItemType>, P
      * Specify if the `FluidDropdown` should render its menu items in condensed mode
      */
     isCondensed?: boolean;
-    /**
-     * Function to render items as custom components instead of strings.
-     * Defaults to null and is overridden by a getter
-     */
-    itemToElement?: React.JSXElementConstructor<ItemType> | null;
     /**
      * Helper function passed to downshift that allows the library to render a
      * given item to a string label. By default, it extracts the `label` field

package/es/components/FluidDropdown/FluidDropdown.js

@@ -67,8 +67,7 @@ FluidDropdown.propTypes = {
    */
   isCondensed: PropTypes.bool,
   /**
-   * Function to render items as custom components instead of strings.
-   * Defaults to null and is overridden by a getter
+   * Renders an item as a custom React node instead of a string.
    */
   itemToElement: PropTypes.func,
   /**

package/es/components/FluidForm/FluidForm.d.ts

@@ -4,7 +4,20 @@
  * 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 HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+import { type HTMLAttributes } from 'react';
 export type FluidFormProps = HTMLAttributes<HTMLFormElement>;
-declare const FluidForm: React.FC<FluidFormProps>;
+declare const FluidForm: {
+    ({ className, children, ...other }: FluidFormProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Provide children to be rendered inside of the <form> element
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a custom className to be applied on the containing <form> node
+         */
+        className: PropTypes.Requireable<string>;
+    };
+};
 export default FluidForm;

package/es/components/FluidMultiSelect/FluidFilterableMultiSelect.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, { FunctionComponent, type ComponentProps } from 'react';
+import React, { type ComponentProps, type ReactNode } from 'react';
 import type { UseComboboxProps, UseMultipleSelectionProps } from 'downshift';
 import { type FilterableMultiSelectProps, type MultiSelect } from '../MultiSelect';
 interface OnChangeData<ItemType> {
@@ -65,7 +65,7 @@ export interface FluidFilterableMultiSelectProps<ItemType> extends FilterableMul
      * Function to render items as custom components instead of strings.
      * Defaults to null and is overridden by a getter
      */
-    itemToElement?: FunctionComponent<ItemType>;
+    itemToElement?: (item: ItemType) => ReactNode;
     /**
      * Helper function passed to downshift that allows the library to render a
      * given item to a string label. By default, it extracts the `label` field

package/es/components/FluidMultiSelect/FluidMultiSelect.Skeleton.d.ts

@@ -1,15 +1,23 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import PropTypes from 'prop-types';
 export interface FluidMultiSelectSkeletonProps {
     /**
      * Specify an optional className to add.
      */
     className?: string;
 }
-declare const FluidMultiSelectSkeleton: React.FC<FluidMultiSelectSkeletonProps>;
+declare const FluidMultiSelectSkeleton: {
+    ({ className, ...rest }: FluidMultiSelectSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+    };
+};
 export default FluidMultiSelectSkeleton;

package/es/components/FluidMultiSelect/FluidMultiSelect.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2022, 2025
+ * Copyright IBM Corp. 2022, 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.
@@ -66,11 +66,6 @@ export interface FluidMultiSelectProps<ItemType> extends MultiSelectProps<ItemTy
      * @deprecated This prop is deprecated in favor of new component called FluidFilterableMultiSelect and will be removed in the next major release
      */
     isFilterable?: boolean;
-    /**
-     * Function to render items as custom components instead of strings.
-     * Defaults to null and is overridden by a getter
-     */
-    itemToElement?: React.JSXElementConstructor<ItemType>;
     /**
      * Helper function passed to downshift that allows the library to render a
      * given item to a string label. By default, it extracts the `label` field

package/es/components/FluidMultiSelect/FluidMultiSelect.js

@@ -106,8 +106,7 @@ FluidMultiSelect.propTypes = {
    */
   isFilterable: PropTypes.bool,
   /**
-   * Function to render items as custom components instead of strings.
-   * Defaults to null and is overridden by a getter
+   * Renders an item as a custom React node instead of a string.
    */
   itemToElement: PropTypes.func,
   /**

package/es/components/FluidNumberInput/FluidNumberInput.Skeleton.d.ts

@@ -1,15 +1,23 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import PropTypes from 'prop-types';
 export interface FluidNumberInputSkeletonProps {
     /**
      * Specify an optional className to be applied to the outer FluidForm wrapper
      */
     className?: string;
 }
-declare const FluidNumberInputSkeleton: React.FC<FluidNumberInputSkeletonProps>;
+declare const FluidNumberInputSkeleton: {
+    ({ className, ...other }: FluidNumberInputSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to be applied to the outer FluidForm wrapper
+         */
+        className: PropTypes.Requireable<string>;
+    };
+};
 export default FluidNumberInputSkeleton;

package/es/components/FluidNumberInput/FluidNumberInput.d.ts

@@ -132,5 +132,5 @@ export interface FluidNumberInputProps extends Pick<ComponentProps<typeof Number
      */
     readOnly?: boolean;
 }
-declare const FluidNumberInput: React.FC<FluidNumberInputProps>;
+declare const FluidNumberInput: React.ForwardRefExoticComponent<FluidNumberInputProps & React.RefAttributes<HTMLInputElement>>;
 export default FluidNumberInput;

package/es/components/FluidSearch/FluidSearch.Skeleton.d.ts

@@ -1,15 +1,23 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import PropTypes from 'prop-types';
 export interface FluidSearchSkeletonProps {
     /**
      * Specify an optional className to be applied to the outer FluidForm wrapper
      */
     className?: string;
 }
-declare const FluidSearchSkeleton: React.FC<FluidSearchSkeletonProps>;
+declare const FluidSearchSkeleton: {
+    ({ className, ...other }: FluidSearchSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to be applied to the outer FluidForm wrapper
+         */
+        className: PropTypes.Requireable<string>;
+    };
+};
 export default FluidSearchSkeleton;

package/es/components/FluidSearch/FluidSearch.d.ts

@@ -66,5 +66,5 @@ export interface FluidSearchProps {
      */
     value?: string | number;
 }
-declare const FluidSearch: React.FC<FluidSearchProps>;
+declare const FluidSearch: React.ForwardRefExoticComponent<FluidSearchProps & React.RefAttributes<HTMLInputElement>>;
 export default FluidSearch;

package/es/components/FluidSearch/FluidSearch.js

@@ -7,15 +7,15 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { forwardRef } from 'react';
 import cx from 'classnames';
 import Search from '../Search/Search.js';
 import '../Search/Search.Skeleton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
-// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
-const FluidSearch = /*#__PURE__*/React.forwardRef(({
+const frFn = forwardRef;
+const FluidSearch = frFn(({
   className,
   ...other
 }, ref) => {

package/es/components/FluidSelect/FluidSelect.Skeleton.d.ts

@@ -1,15 +1,23 @@
 /**
- * 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.
  */
-import React from 'react';
+import PropTypes from 'prop-types';
 export interface FluidSelectSkeletonProps {
     /**
      * Specify an optional className to add.
      */
     className?: string;
 }
-declare const FluidSelectSkeleton: React.FC<FluidSelectSkeletonProps>;
+declare const FluidSelectSkeleton: {
+    ({ className, ...rest }: FluidSelectSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+    };
+};
 export default FluidSelectSkeleton;

package/es/components/FluidTextArea/FluidTextArea.Skeleton.d.ts

@@ -1,15 +1,23 @@
 /**
- * Copyright IBM Corp. 2024
+ * Copyright IBM Corp. 2024, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import PropTypes from 'prop-types';
 export interface FluidTextAreaSkeletonProps {
     /**
      * Specify an optional className to be applied to the outer FluidForm wrapper
      */
     className?: string;
 }
-declare const FluidTextAreaSkeleton: React.FC<FluidTextAreaSkeletonProps>;
+declare const FluidTextAreaSkeleton: {
+    ({ className, ...other }: FluidTextAreaSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to be applied to the outer FluidForm wrapper
+         */
+        className: PropTypes.Requireable<string>;
+    };
+};
 export default FluidTextAreaSkeleton;

package/es/components/FluidTextArea/FluidTextArea.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 FluidTextAreaProps {
     /**
@@ -96,5 +97,98 @@ export interface FluidTextAreaProps {
      */
     readOnly?: boolean;
 }
-declare const FluidTextArea: React.FC<FluidTextAreaProps>;
+declare const FluidTextArea: {
+    ({ className, ...other }: FluidTextAreaProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Provide a custom className that is applied directly to the underlying
+         * `<textarea>` node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify the `cols` attribute for the underlying `<textarea>` node
+         */
+        cols: PropTypes.Requireable<number>;
+        /**
+         * Optionally provide the default value of the `<textarea>`
+         */
+        defaultValue: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        /**
+         * Specify whether the control is disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether to display the character counter
+         */
+        enableCounter: PropTypes.Requireable<boolean>;
+        /**
+         * Provide text that is used alongside the control label for additional help
+         */
+        helperText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify whether you want the underlying label to be visually hidden
+         */
+        hideLabel: PropTypes.Requireable<boolean>;
+        /**
+         * Provide a unique identifier for the control
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the control is currently invalid
+         */
+        invalid: PropTypes.Requireable<boolean>;
+        /**
+         * Provide the text that is displayed when the control is in an invalid state
+         */
+        invalidText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide the text that will be read by a screen reader when visiting this
+         * control
+         */
+        labelText: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        /**
+         * `true` to use the light version. For use on $ui-01 backgrounds only.
+         * Don't use this to make tile background color same as container background color.
+         */
+        light: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
+        /**
+         * Max character count allowed for the textarea. This is needed in order for enableCounter to display
+         */
+        maxCount: PropTypes.Requireable<number>;
+        /**
+         * Optionally provide an `onChange` handler that is called whenever `<textarea>`
+         * is updated
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Optionally provide an `onClick` handler that is called whenever the
+         * `<textarea>` is clicked
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify the placeholder attribute for the `<textarea>`
+         */
+        placeholder: PropTypes.Requireable<string>;
+        /**
+         * Specify the rows attribute for the `<textarea>`
+         */
+        rows: PropTypes.Requireable<number>;
+        /**
+         * Provide the current value of the `<textarea>`
+         */
+        value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        /**
+         * Specify whether the control is currently in warning state
+         */
+        warn: PropTypes.Requireable<boolean>;
+        /**
+         * Provide the text that is displayed when the control is in warning state
+         */
+        warnText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Whether or not the component is readonly
+         */
+        readOnly: PropTypes.Requireable<boolean>;
+    };
+};
 export default FluidTextArea;