@carbon/react 1.114.0 → 1.115.0

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

@@ -61,6 +61,11 @@ export interface AccordionToggleProps {
     className?: string;
     disabled?: boolean;
     onClick?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * @deprecated `AccordionItem` no longer passes an `onKeyDown` handler to
+     * the toggle. This prop is kept only so custom `renderToggle`
+     * implementations that reference it don't hit a breaking type change.
+     */
     onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void;
     type?: 'button';
 }

package/es/components/Accordion/AccordionItem.js

@@ -8,8 +8,6 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import { AccordionContext } from "./AccordionProvider.js";
 import { Text } from "../Text/Text.js";
-import { Escape } from "../../internal/keyboard/keys.js";
-import { match } from "../../internal/keyboard/match.js";
 import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import React, { useContext, useEffect, useRef, useState } from "react";
@@ -60,9 +58,6 @@ function AccordionItem({ children, className: customClassName = "", open = false
 			event
 		});
 	}
-	function onKeyDown(event) {
-		if (isOpen && match(event, Escape)) setIsOpen(false);
-	}
 	function onAnimationEnd(event) {
 		if (handleAnimationEnd) handleAnimationEnd(event);
 	}
@@ -76,7 +71,6 @@ function AccordionItem({ children, className: customClassName = "", open = false
 			"aria-label": ariaLabel,
 			className: `${prefix}--accordion__heading`,
 			onClick,
-			onKeyDown,
 			type: "button",
 			children: [/* @__PURE__ */ jsx(ChevronRight, { className: `${prefix}--accordion__arrow` }), /* @__PURE__ */ jsx(Text, {
 				as: "div",

package/es/components/BigNumber/BigNumber.d.ts

@@ -0,0 +1,82 @@
+/**
+ * Copyright IBM Corp. 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 { BigNumberSizeValues } from './constants';
+export interface BigNumberProps {
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * The default behavior will hide `total` if `undefined` or is the same as `value`.
+     *
+     * Set to `true` to ignore the default behavior and show the `total`.
+     */
+    forceShowTotal?: boolean;
+    /**
+     * Specifies the number of fraction digits when truncating `value` and `total`.
+     */
+    fractionDigits?: number;
+    /**
+     * Displays an icon button next to `value`.
+     */
+    iconButton?: ReactNode;
+    /**
+     * Text label above the `value`.
+     */
+    label: string;
+    /**
+     * When `true`, will show the loading state.
+     */
+    loading?: boolean;
+    /**
+     * Determines how `value` and `total` will be formatted.
+     */
+    locale?: string;
+    /**
+     * Appends a percent sign (_%_) after `value` and hides `total`.
+     */
+    percentage?: boolean;
+    /**
+     * Controls the visual size of the component.
+     */
+    size?: BigNumberSizeValues;
+    /**
+     * When applied, an information icon will be rendered next to the
+     * `label` and the description will be applied to its tooltip.
+     */
+    tooltipDescription?: string;
+    /**
+     * The number that will appear after the slash (i.e. the "denominator" of a fraction).
+     *
+     * This number will not be rendered if it's the same as `value` or
+     * `percentage` is true. See also the **forceShowTotal** prop.
+     */
+    total?: number;
+    /**
+     * When `true`, will render a "trending up" icon.
+     */
+    trending?: boolean;
+    /**
+     * Abbreviates the number when `true`. E.g. from _1,000_ to _1K_.
+     */
+    truncate?: boolean;
+    /**
+     * The primary value to display (or the "numerator" of a fraction).
+     */
+    value?: number;
+}
+/**
+ * BigNumber is used to display large values in a small area. The display of
+ * values can be the value itself, or grouped in a `numerator/denominator` fashion.
+ * Control over the total fraction decimals displayed as well as how the
+ * values/totals are displayed are done via a locale prop. Other optional props
+ * allow control over size, truncation, if the value is a percentage, the addition
+ * of a button as well as tooltip functionality.
+ * The default locale is English (`en-US`) if one is not provided or if the provided one is not supported.
+ */
+export declare const BigNumber: React.ForwardRefExoticComponent<BigNumberProps & React.RefAttributes<HTMLDivElement>>;

package/es/components/BigNumber/BigNumberSkeleton.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright IBM Corp. 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 { BigNumberProps } from './BigNumber';
+/**
+ * BigNumberSkeleton is used to display a skeleton version while
+ * content is loading (handled by the BigNumber prop `loading`).
+ *
+ * Note: This component is only used within BigNumber.
+ */
+export type BigNumberSkeletonProps = Pick<BigNumberProps, 'className' | 'size'> & React.HTMLAttributes<HTMLDivElement>;
+export declare const BigNumberSkeleton: React.ForwardRefExoticComponent<Pick<BigNumberProps, "className" | "size"> & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/es/components/BigNumber/constants.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright IBM Corp. 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.
+ */
+export declare enum BigNumberSize {
+    Default = "default",
+    Large = "lg",
+    XLarge = "xl"
+}
+export type BigNumberSizeValues = `${BigNumberSize}`;
+export declare enum Characters {
+    Dash = "\u2013",
+    Slash = "/"
+}
+export declare const DefaultLocale = "en-US";
+export declare const formatValue: (locale: Intl.LocalesArgument, value: number | null | undefined, fractionDigits: number, truncate: boolean) => string | null | undefined;
+export declare const getIconSize: (size: BigNumberSizeValues) => number;

package/es/components/BigNumber/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 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.
+ */
+export { BigNumber } from './BigNumber';
+export type { BigNumberProps } from './BigNumber';
+export { BigNumberSkeleton } from './BigNumberSkeleton';

package/es/components/Card/Card.d.ts

@@ -17,7 +17,7 @@ import { CardActions } from './CardActions';
 import { CardAction } from './CardAction';
 export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> & {
     Header: React.ForwardRefExoticComponent<import("./Card.types").CardBaseProps & React.RefAttributes<HTMLDivElement>>;
-    Body: React.ForwardRefExoticComponent<import("./Card.types").CardBaseProps & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<import("./Card.types").CardBodyProps & React.RefAttributes<HTMLDivElement>>;
     Footer: React.ForwardRefExoticComponent<import("./Card.types").CardBaseProps & React.RefAttributes<HTMLDivElement>>;
     HeaderMedia: {
         ({ children, className, ...rest }: import("./CardHeaderMedia").CardHeaderMediaProps): import("react/jsx-runtime").JSX.Element;

package/es/components/Card/Card.js

@@ -20,6 +20,7 @@ import { CardAction } from "./CardAction.js";
 import React, { forwardRef, isValidElement, useCallback, useMemo } from "react";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowRight } from "@carbon/icons-react";
 //#region src/components/Card/Card.tsx
 /**
 * Copyright IBM Corp. 2026
@@ -31,19 +32,23 @@ const componentName = "Card";
 /**
 * Card component - Root container for composable card
 */
-const CardComponent = forwardRef(({ clickable = false, onClick, onKeyDown, disabled = false, density = "productive", decorator, horizontal = false, className, children, ...rest }, ref) => {
+const CardComponent = forwardRef(({ as, clickable = false, onClick, onKeyDown, disabled = false, density = "productive", decorator, horizontal = false, renderFooterIcon: FooterIcon = ArrowRight, className, children, ...rest }, ref) => {
 	const blockClass = `${usePrefix()}--card`;
 	const hasAILabel = useMemo(() => isValidElement(decorator) && decorator.type === AILabel, [decorator]);
+	if (FooterIcon !== ArrowRight && !clickable) console.error("[Card] `renderFooterIcon` only has effect when `clickable` is true.");
+	if (clickable && !rest["aria-label"] && !rest["aria-labelledby"]) console.error("[Card] A clickable card must have an accessible name. Pass `aria-label` or `aria-labelledby` to the Card.");
 	const contextValue = useMemo(() => ({
 		clickable,
 		disabled,
 		decorator,
-		horizontal
+		horizontal,
+		onClick
 	}), [
 		clickable,
 		disabled,
 		decorator,
-		horizontal
+		horizontal,
+		onClick
 	]);
 	const handleKeyDown = useCallback((event) => {
 		if (clickable && !disabled && (event.key === "Enter" || event.key === " ")) {
@@ -67,17 +72,20 @@ const CardComponent = forwardRef(({ clickable = false, onClick, onKeyDown, disab
 		[`${blockClass}--has-ai-label`]: hasAILabel,
 		[`${blockClass}--horizontal`]: horizontal
 	});
+	const BaseComponent = as ?? "div";
+	const isAnchor = BaseComponent === "a";
 	const cardProps = {
 		...rest,
 		ref,
 		className: cardClasses,
-		...clickable && {
+		...disabled && { "aria-disabled": true },
+		...clickable && { ...isAnchor ? { onClick: handleClick } : {
 			role: "button",
 			tabIndex: disabled ? -1 : 0,
 			onClick: handleClick,
 			onKeyDown: handleKeyDown,
 			"aria-disabled": disabled
-		}
+		} }
 	};
 	const { mediaChildren, contentChildren, mediaIsFirst } = useMemo(() => {
 		if (!horizontal) return {
@@ -103,9 +111,13 @@ const CardComponent = forwardRef(({ clickable = false, onClick, onKeyDown, disab
 	}
 	return /* @__PURE__ */ jsx(CardContext.Provider, {
 		value: contextValue,
-		children: /* @__PURE__ */ jsx("div", {
+		children: /* @__PURE__ */ jsxs(BaseComponent, {
 			...cardProps,
-			children: renderedChildren
+			children: [renderedChildren, clickable && /* @__PURE__ */ jsx("div", {
+				className: `${blockClass}__clickable-footer`,
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx(FooterIcon, { "aria-hidden": "true" })
+			})]
 		})
 	});
 });

package/es/components/Card/Card.types.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 { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 /**
  * Base props shared across card components
  */
@@ -23,17 +23,29 @@ export interface CardBaseProps {
  */
 export interface CardProps extends CardBaseProps {
     /**
-     * Makes the entire card clickable
+     * The underlying element or component to render the card as.
+     * Defaults to `'div'`. Use `'a'` or a router Link component for
+     * navigation cards when combined with `clickable`.
+     * @example <Card as="a" clickable href="/dashboard">...</Card>
+     * @example <Card as={RouterLink} clickable to="/dashboard">...</Card>
+     */
+    as?: React.ElementType;
+    /**
+     * Makes the entire card clickable. When true, the card gains interactive
+     * styles (hover, focus, active) and renders a built-in footer affordance
+     * with an arrow icon. Use `onClick` for action cards or `as="a"` with
+     * `href` for navigation cards.
      */
     clickable?: boolean;
     /**
-     * Click handler for clickable cards
+     * Click handler for clickable cards. Only has effect when `clickable`
+     * is true.
      */
-    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    onClick?: (event: React.MouseEvent) => void;
     /**
-     * Keyboard event handler for clickable cards
+     * Keyboard event handler. Only has effect when `clickable` is true.
      */
-    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    onKeyDown?: (event: React.KeyboardEvent) => void;
     /**
      * Disables the card and all interactive elements
      */
@@ -52,6 +64,13 @@ export interface CardProps extends CardBaseProps {
      * header/body/footer stacked vertically on the right.
      */
     horizontal?: boolean;
+    /**
+     * Icon rendered in the built-in footer affordance of a clickable card.
+     * Only has effect when `clickable` is true. Defaults to ArrowRight.
+     * Pass any icon component from `@carbon/icons-react`.
+     * @example <Card clickable renderFooterIcon={Launch}>...</Card>
+     */
+    renderFooterIcon?: React.ElementType;
 }
 /**
  * Props for CardHeader component
@@ -60,7 +79,14 @@ export type CardHeaderProps = CardBaseProps;
 /**
  * Props for CardBody component
  */
-export type CardBodyProps = CardBaseProps;
+export interface CardBodyProps extends CardBaseProps {
+    /**
+     * When true, removes all padding so content fills the body edge-to-edge.
+     * Use when the body contains a component (e.g. a table, chart, or image)
+     * that manages its own internal spacing.
+     */
+    isFlush?: boolean;
+}
 /**
  * Props for CardFooter component
  */
@@ -85,4 +111,9 @@ export interface CardContextValue {
      * Whether the card is in horizontal layout mode
      */
     horizontal?: boolean;
+    /**
+     * Click handler forwarded from the Card root, available to child components
+     * (e.g. the built-in clickable footer affordance).
+     */
+    onClick?: (event: React.MouseEvent) => void;
 }

package/es/components/Card/CardActions.js

@@ -73,7 +73,7 @@ const CardActions = ({ children, className, overflowMenuLabel = "More actions",
 			style: { position: "relative" },
 			children: /* @__PURE__ */ jsx(OverflowMenu, {
 				size: "sm",
-				"aria-label": overflowMenuLabel,
+				label: overflowMenuLabel,
 				children: hiddenItems.map((item) => /* @__PURE__ */ jsx(MenuItem, {
 					label: item.label || "Action",
 					onClick: () => {

package/es/components/Card/CardBody.d.ts

@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+import { CardBodyProps } from './Card.types';
 /**
  * CardBody component - Body section of the card for free-form content
  */
-export declare const CardBody: React.ForwardRefExoticComponent<import("./Card.types").CardBaseProps & React.RefAttributes<HTMLDivElement>>;
+export declare const CardBody: React.ForwardRefExoticComponent<CardBodyProps & React.RefAttributes<HTMLDivElement>>;

package/es/components/Card/CardBody.js

@@ -20,8 +20,9 @@ const componentName = "CardBody";
 /**
 * CardBody component - Body section of the card for free-form content
 */
-const CardBody = forwardRef(({ className, children, ...rest }, ref) => {
-	const bodyClasses = cx(`${usePrefix()}--card__body`, className);
+const CardBody = forwardRef(({ className, children, isFlush = false, ...rest }, ref) => {
+	const prefix = usePrefix();
+	const bodyClasses = cx(`${prefix}--card__body`, className, { [`${prefix}--card__body--flush`]: isFlush });
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
 		ref,

package/es/components/Card/CardFooter.d.ts

@@ -6,6 +6,10 @@
  */
 import React from 'react';
 /**
- * CardFooter component - Footer section of the card
+ * CardFooter component - Footer section of the card.
+ *
+ * Not supported inside a `clickable` card. A clickable card renders its own
+ * built-in footer affordance automatically. Use the `renderFooterIcon` prop on
+ * `Card` to customize the icon.
  */
 export declare const CardFooter: React.ForwardRefExoticComponent<import("./Card.types").CardBaseProps & React.RefAttributes<HTMLDivElement>>;

package/es/components/Card/CardFooter.js

@@ -6,6 +6,7 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
+import { useCardContext } from "./CardContext.js";
 import { forwardRef } from "react";
 import cx from "classnames";
 import { jsx } from "react/jsx-runtime";
@@ -18,10 +19,20 @@ import { jsx } from "react/jsx-runtime";
 */
 const componentName = "CardFooter";
 /**
-* CardFooter component - Footer section of the card
+* CardFooter component - Footer section of the card.
+*
+* Not supported inside a `clickable` card. A clickable card renders its own
+* built-in footer affordance automatically. Use the `renderFooterIcon` prop on
+* `Card` to customize the icon.
 */
 const CardFooter = forwardRef(({ className, children, ...rest }, ref) => {
-	const footerClasses = cx(`${usePrefix()}--card__footer`, className);
+	const prefix = usePrefix();
+	const { clickable } = useCardContext();
+	if (clickable) {
+		console.error("[Card] `Card.Footer` cannot be used inside a `clickable` card. A clickable card renders its own footer affordance automatically. Use the `renderFooterIcon` prop on `Card` to customize the icon.");
+		return null;
+	}
+	const footerClasses = cx(`${prefix}--card__footer`, className);
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
 		ref,

package/es/components/Card/CardTitle.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
-export interface CardTitleProps {
+export interface CardTitleProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Provide the contents of the CardTitle.
      */

package/es/components/ComboBox/ComboBox.js

@@ -7,13 +7,13 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
-import { End, Enter, Escape, Home, Space } from "../../internal/keyboard/keys.js";
-import { match } from "../../internal/keyboard/match.js";
 import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { defaultItemToString } from "../../internal/defaultItemToString.js";
 import { isItemDisabled } from "../../internal/isItemDisabled.js";
 import { isComponentElement } from "../../internal/utils.js";
+import { End, Enter, Escape, Home, Space } from "../../internal/keyboard/keys.js";
+import { match } from "../../internal/keyboard/match.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { AILabel } from "../AILabel/index.js";
 import { mergeRefs } from "../../tools/mergeRefs.js";

package/es/components/ComposedModal/ComposedModal.js

@@ -7,11 +7,11 @@
 
 import { warning } from "../../internal/warning.js";
 import { usePrefix } from "../../internal/usePrefix.js";
-import { Escape, Tab } from "../../internal/keyboard/keys.js";
-import { match } from "../../internal/keyboard/match.js";
 import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { isComponentElement } from "../../internal/utils.js";
+import { Escape, Tab } from "../../internal/keyboard/keys.js";
+import { match } from "../../internal/keyboard/match.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { AILabel } from "../AILabel/index.js";
 import { mergeRefs } from "../../tools/mergeRefs.js";

package/es/components/ContentSwitcher/ContentSwitcher.js

@@ -6,11 +6,11 @@
  */
 
 import { PrefixContext } from "../../internal/usePrefix.js";
+import { deprecate } from "../../prop-types/deprecate.js";
+import { isComponentElement } from "../../internal/utils.js";
 import { ArrowLeft, ArrowRight, Enter, Space } from "../../internal/keyboard/keys.js";
 import { match } from "../../internal/keyboard/match.js";
 import { getNextIndex } from "../../internal/keyboard/navigation.js";
-import { deprecate } from "../../prop-types/deprecate.js";
-import { isComponentElement } from "../../internal/utils.js";
 import { LayoutConstraint } from "../Layout/index.js";
 import Switch from "../Switch/Switch.js";
 import IconSwitch from "../Switch/IconSwitch.js";

package/es/components/DatePicker/DatePicker.d.ts

@@ -6,7 +6,7 @@
  */
 import React, { type ReactNode } from 'react';
 import flatpickr from 'flatpickr';
-import { DateLimit, DateOption } from 'flatpickr/dist/types/options';
+import type { DateLimit, DateOption } from 'flatpickr/dist/types/options';
 import { type SupportedLocale } from './DatePickerLocales';
 export type DatePickerTypes = 'simple' | 'single' | 'range';
 export interface DatePickerProps {

package/es/components/DatePicker/DatePicker.js

@@ -6,10 +6,10 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import { Enter, Escape, Tab } from "../../internal/keyboard/keys.js";
-import { match } from "../../internal/keyboard/match.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { isComponentElement } from "../../internal/utils.js";
+import { Enter, Escape, Tab } from "../../internal/keyboard/keys.js";
+import { match } from "../../internal/keyboard/match.js";
 import DatePickerInput_default from "../DatePickerInput/index.js";
 import { appendToPlugin } from "./plugins/appendToPlugin.js";
 import { fixEventsPlugin } from "./plugins/fixEventsPlugin.js";

package/es/components/DatePicker/plugins/rangePlugin.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { type Config } from 'flatpickr/dist/plugins/rangePlugin';
-import { Instance } from 'flatpickr/dist/types/instance';
+import type { Instance } from 'flatpickr/dist/types/instance';
 /**
  * @param config Plugin configuration.
  * @returns An extension of Flatpickr `rangePlugin` that does the following:

package/es/components/FileUploader/FileUploader.js

@@ -7,9 +7,9 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
+import { useId } from "../../internal/useId.js";
 import { Enter, Space } from "../../internal/keyboard/keys.js";
 import { matches } from "../../internal/keyboard/match.js";
-import { useId } from "../../internal/useId.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { ButtonKinds } from "../Button/Button.js";
 import Filename from "./Filename.js";

package/es/components/FileUploader/FileUploaderButton.js

@@ -7,10 +7,10 @@
 
 import { noopFn } from "../../internal/noopFn.js";
 import { usePrefix } from "../../internal/usePrefix.js";
-import { Enter, Space } from "../../internal/keyboard/keys.js";
-import { matches } from "../../internal/keyboard/match.js";
 import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
+import { Enter, Space } from "../../internal/keyboard/keys.js";
+import { matches } from "../../internal/keyboard/match.js";
 import { ButtonKinds } from "../Button/Button.js";
 import { useEffect, useRef, useState } from "react";
 import cx from "classnames";

package/es/components/FileUploader/FileUploaderDropContainer.js

@@ -7,10 +7,10 @@
 
 import { noopFn } from "../../internal/noopFn.js";
 import { usePrefix } from "../../internal/usePrefix.js";
-import { Enter, Space } from "../../internal/keyboard/keys.js";
-import { matches } from "../../internal/keyboard/match.js";
 import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
+import { Enter, Space } from "../../internal/keyboard/keys.js";
+import { matches } from "../../internal/keyboard/match.js";
 import { composeEventHandlers } from "../../tools/events.js";
 import { useRef, useState } from "react";
 import cx from "classnames";
@@ -53,13 +53,13 @@ function FileUploaderDropContainer({ accept = [], className, id, disabled, label
 			return acc.concat([curr]);
 		}, []);
 	}
-	const handleFiles = (event, files) => {
-		if (!files.length) return onAddFiles(event, { addedFiles: [] });
-		return onAddFiles(event, { addedFiles: validateFiles(multiple ? files : [files[0]]) });
+	const getAddedFiles = (files) => {
+		if (!files.length) return [];
+		return validateFiles(multiple ? files : [files[0]]);
 	};
 	const handleChange = (event) => {
 		const files = [...event.target.files ?? []];
-		return handleFiles(event, files);
+		return onAddFiles(event, { addedFiles: getAddedFiles(files) });
 	};
 	const handleDrop = (event) => {
 		const items = [...event.dataTransfer.items ?? []];
@@ -70,7 +70,13 @@ function FileUploaderDropContainer({ accept = [], className, id, disabled, label
 			if (file) acc.push(file);
 			return acc;
 		}, []) : [...event.dataTransfer.files];
-		return handleFiles(event, files);
+		const addedFiles = getAddedFiles(files);
+		if (inputRef.current) try {
+			const dataTransfer = new DataTransfer();
+			addedFiles.forEach((file) => dataTransfer.items.add(file));
+			inputRef.current.files = dataTransfer.files;
+		} catch {}
+		return onAddFiles(event, { addedFiles });
 	};
 	const handleClick = () => {
 		if (!disabled) inputRef.current?.click();

package/es/components/FileUploader/FileUploaderItem.js

@@ -8,10 +8,10 @@
 import { noopFn } from "../../internal/noopFn.js";
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
-import { Enter, Space } from "../../internal/keyboard/keys.js";
-import { matches } from "../../internal/keyboard/match.js";
 import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
 import { useId } from "../../internal/useId.js";
+import { Enter, Space } from "../../internal/keyboard/keys.js";
+import { matches } from "../../internal/keyboard/match.js";
 import { Tooltip } from "../Tooltip/Tooltip.js";
 import Filename from "./Filename.js";
 import { useRef, useState } from "react";

package/es/components/FormLabel/FormLabel.d.ts

@@ -16,7 +16,7 @@ export interface FormLabelProps extends Omit<React.LabelHTMLAttributes<HTMLLabel
      */
     className?: string;
     /**
-     * Provide a unique id for the given <FormLabel>
+     * Provide a unique id for the given `FormLabel`
      */
     id?: string;
 }
@@ -32,7 +32,7 @@ declare namespace FormLabel {
          */
         className: PropTypes.Requireable<string>;
         /**
-         * Provide a unique id for the given <FormLabel>
+         * Provide a unique id for the given `FormLabel`
          */
         id: PropTypes.Requireable<string>;
     };

package/es/components/FormLabel/FormLabel.js

@@ -38,7 +38,7 @@ FormLabel.propTypes = {
 	*/
 	className: PropTypes.string,
 	/**
-	* Provide a unique id for the given <FormLabel>
+	* Provide a unique id for the given `FormLabel`
 	*/
 	id: PropTypes.string
 };