@carbon/react 1.107.0-rc.0 → 1.107.0

package/es/components/Button/Button.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 ReactNode } from 'react';
 import { IconButtonKind } from '../IconButton';
 import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
 export declare const ButtonKinds: readonly ["primary", "secondary", "danger", "ghost", "danger--primary", "danger--ghost", "danger--tertiary", "tertiary"];
@@ -82,6 +82,6 @@ export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonEl
     tooltipPosition?: ButtonTooltipPosition;
 }
 export type ButtonProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, ButtonBaseProps>;
-export type ButtonComponent = <T extends React.ElementType = 'button'>(props: ButtonProps<T>, context?: any) => React.ReactElement | any;
+export type ButtonComponent = <T extends React.ElementType = 'button'>(props: ButtonProps<T>) => ReactNode;
 declare const _default: ButtonComponent;
 export default _default;

package/es/components/ComboButton/index.js

@@ -38,8 +38,8 @@ const ComboButton = React.forwardRef(function ComboButton({ children, className,
 	const id = useId("combobutton");
 	const prefix = usePrefix();
 	const containerRef = useRef(null);
-	let middlewares = [];
-	if (!enableOnlyFloatingStyles) middlewares = [flip({ crossAxis: false }), hide()];
+	const middlewares = [];
+	if (!enableOnlyFloatingStyles) middlewares.push(flip({ crossAxis: false }), hide());
 	if (menuAlignment === "bottom" || menuAlignment === "top") middlewares.push(size({ apply({ rects, elements }) {
 		Object.assign(elements.floating.style, { width: `${rects.reference.width}px` });
 	} }));

package/es/components/Modal/Modal.d.ts

@@ -57,7 +57,7 @@ export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Provide a ref to return focus to once the modal is closed.
      */
-    launcherButtonRef?: RefObject<HTMLButtonElement | null>;
+    launcherButtonRef?: RefObject<HTMLElement | null>;
     /**
      * Specify the description for the loading text
      */

package/es/components/Modal/Modal.js

@@ -9,6 +9,7 @@ import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
 import { Enter, Escape, Tab } from "../../internal/keyboard/keys.js";
 import { match } from "../../internal/keyboard/match.js";
+import { selectorTabbable } from "../../internal/keyboard/navigation.js";
 import { useId } from "../../internal/useId.js";
 import { noopFn } from "../../internal/noopFn.js";
 import { warning } from "../../internal/warning.js";
@@ -31,7 +32,7 @@ import { Dialog } from "../Dialog/Dialog.js";
 import { usePreviousValue } from "../../internal/usePreviousValue.js";
 import { ModalPresence, ModalPresenceContext, useExclusiveModalPresenceContext } from "./ModalPresence.js";
 import classNames from "classnames";
-import React, { cloneElement, useContext, useEffect, useRef } from "react";
+import React, { cloneElement, useCallback, useContext, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Close } from "@carbon/icons-react";
@@ -209,25 +210,35 @@ const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLa
 		prefix,
 		enableDialogElement
 	]);
+	const focusLauncherButton = useCallback(() => {
+		if (!launcherButtonRef || !launcherButtonRef.current) return;
+		const { current: launcherButton } = launcherButtonRef;
+		(launcherButton.matches(selectorTabbable) ? launcherButton : launcherButton.querySelector(selectorTabbable))?.focus();
+	}, [launcherButtonRef]);
 	useEffect(() => {
 		if (!enableDialogElement && !enablePresence && prevOpen && !open && launcherButtonRef) setTimeout(() => {
-			if ("current" in launcherButtonRef) launcherButtonRef.current?.focus();
+			focusLauncherButton();
 		});
 	}, [
 		open,
 		prevOpen,
 		launcherButtonRef,
 		enableDialogElement,
-		enablePresence
+		enablePresence,
+		focusLauncherButton
 	]);
 	useEffect(() => {
 		const launcherButton = launcherButtonRef?.current;
 		return () => {
 			if (enablePresence && launcherButton) setTimeout(() => {
-				launcherButton.focus();
+				focusLauncherButton();
 			});
 		};
-	}, [enablePresence, launcherButtonRef]);
+	}, [
+		enablePresence,
+		launcherButtonRef,
+		focusLauncherButton
+	]);
 	useEffect(() => {
 		if (!enableDialogElement) {
 			const initialFocus = (focusContainerElement) => {
@@ -463,7 +474,7 @@ Modal.propTypes = {
 	hasScrollingContent: PropTypes.bool,
 	id: PropTypes.string,
 	isFullWidth: PropTypes.bool,
-	launcherButtonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.oneOfType([typeof HTMLButtonElement !== "undefined" ? PropTypes.instanceOf(HTMLButtonElement) : PropTypes.any, PropTypes.oneOf([null])]).isRequired })]),
+	launcherButtonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.oneOfType([typeof HTMLElement !== "undefined" ? PropTypes.instanceOf(HTMLElement) : PropTypes.any, PropTypes.oneOf([null])]).isRequired })]),
 	loadingDescription: PropTypes.string,
 	loadingIconDescription: PropTypes.string,
 	loadingStatus: PropTypes.oneOf([

package/es/components/NumberInput/NumberInput.js

@@ -269,7 +269,7 @@ const NumberInput = React.forwardRef((props, forwardRef) => {
 				value: allowEmpty && event.target.value === "" ? "" : Number(event.target.value),
 				direction: value < event.target.value ? "up" : "down"
 			};
-			setValue(state.value);
+			if (controlledValue === void 0) setValue(state.value);
 			if (onChange) onChange(event, state);
 			return;
 		}
@@ -312,7 +312,9 @@ const NumberInput = React.forwardRef((props, forwardRef) => {
 				value: newValue,
 				direction
 			};
-			if (type === "number") setValue(state.value);
+			if (type === "number") {
+				if (controlledValue === void 0) setValue(state.value);
+			}
 			if (type === "text") {
 				const formattedNewValue = format(newValue);
 				const parsedFormattedNewValue = numberParser.parse(formattedNewValue);

package/es/components/Slider/Slider.js

@@ -270,11 +270,11 @@ const Slider = (props) => {
 		DRAG_EVENT_TYPES.forEach((element) => {
 			elementRef.current?.ownerDocument.removeEventListener(element, handleDrag);
 		});
-		setState({
-			needsOnRelease: true,
-			isValid: true,
-			isValidUpper: true
-		});
+		setState({ needsOnRelease: true });
+	};
+	const getValidityUpdateForHandle = (handle, validity) => {
+		if (typeof invalid !== "undefined") return {};
+		return handle === "upper" ? { isValidUpper: validity } : { isValid: validity };
 	};
 	/**
 	* Handles a "drag" event by recalculating the value/thumb and setting state
@@ -299,7 +299,7 @@ const Slider = (props) => {
 		else setState({
 			value: nearestStepValue(value),
 			left,
-			isValid: true
+			...getValidityUpdateForHandle("lower", true)
 		});
 		setState({
 			correctedValue: null,
@@ -338,7 +338,7 @@ const Slider = (props) => {
 			setState({
 				value: nearestStepValue(value),
 				left,
-				isValid: true
+				...getValidityUpdateForHandle("lower", true)
 			});
 		}
 		setState({
@@ -395,9 +395,7 @@ const Slider = (props) => {
 		const targetValue = Number.parseFloat(input.value);
 		const validity = !isNaN(targetValue);
 		const handlePosition = input.dataset.handlePosition;
-		if (handlePosition === "lower") setState({ isValid: validity });
-		else if (handlePosition === "upper") setState({ isValidUpper: validity });
-		setState({ isValid: validity });
+		setState(getValidityUpdateForHandle(handlePosition ?? "lower", validity));
 		if (validity) {
 			const adjustedValue = handlePosition ? getAdjustedValueForPosition({
 				handle: handlePosition,
@@ -507,22 +505,22 @@ const Slider = (props) => {
 		if (handle === "lower") setState({
 			value: valueUpper && newValue > valueUpper ? valueUpper : newValue,
 			left: valueUpper && newValue > valueUpper ? leftUpper : newLeft,
-			isValid: true
+			...getValidityUpdateForHandle(handle, true)
 		});
 		else setState({
 			valueUpper: value && newValue < value ? value : newValue,
 			leftUpper: value && newValue < value ? left : newLeft,
-			isValidUpper: true
+			...getValidityUpdateForHandle(handle, true)
 		});
 	};
 	const setValueForHandle = (handle, value) => {
 		if (handle === "lower") setState({
 			value,
-			isValid: true
+			...getValidityUpdateForHandle(handle, true)
 		});
 		else setState({
 			valueUpper: value,
-			isValidUpper: true
+			...getValidityUpdateForHandle(handle, true)
 		});
 	};
 	const isValidValueForPosition = ({ handle, value: newValue, min, max }) => {

package/lib/components/Button/Button.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 ReactNode } from 'react';
 import { IconButtonKind } from '../IconButton';
 import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
 export declare const ButtonKinds: readonly ["primary", "secondary", "danger", "ghost", "danger--primary", "danger--ghost", "danger--tertiary", "tertiary"];
@@ -82,6 +82,6 @@ export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonEl
     tooltipPosition?: ButtonTooltipPosition;
 }
 export type ButtonProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, ButtonBaseProps>;
-export type ButtonComponent = <T extends React.ElementType = 'button'>(props: ButtonProps<T>, context?: any) => React.ReactElement | any;
+export type ButtonComponent = <T extends React.ElementType = 'button'>(props: ButtonProps<T>) => ReactNode;
 declare const _default: ButtonComponent;
 export default _default;

package/lib/components/ComboButton/index.js

@@ -42,8 +42,8 @@ const ComboButton = react.default.forwardRef(function ComboButton({ children, cl
 	const id = require_useId.useId("combobutton");
 	const prefix = require_usePrefix.usePrefix();
 	const containerRef = (0, react.useRef)(null);
-	let middlewares = [];
-	if (!enableOnlyFloatingStyles) middlewares = [(0, _floating_ui_react.flip)({ crossAxis: false }), (0, _floating_ui_react.hide)()];
+	const middlewares = [];
+	if (!enableOnlyFloatingStyles) middlewares.push((0, _floating_ui_react.flip)({ crossAxis: false }), (0, _floating_ui_react.hide)());
 	if (menuAlignment === "bottom" || menuAlignment === "top") middlewares.push((0, _floating_ui_react.size)({ apply({ rects, elements }) {
 		Object.assign(elements.floating.style, { width: `${rects.reference.width}px` });
 	} }));

package/lib/components/Modal/Modal.d.ts

@@ -57,7 +57,7 @@ export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Provide a ref to return focus to once the modal is closed.
      */
-    launcherButtonRef?: RefObject<HTMLButtonElement | null>;
+    launcherButtonRef?: RefObject<HTMLElement | null>;
     /**
      * Specify the description for the loading text
      */

package/lib/components/Modal/Modal.js

@@ -10,6 +10,7 @@ const require_usePrefix = require("../../internal/usePrefix.js");
 const require_Text = require("../Text/Text.js");
 const require_keys = require("../../internal/keyboard/keys.js");
 const require_match = require("../../internal/keyboard/match.js");
+const require_navigation = require("../../internal/keyboard/navigation.js");
 const require_useId = require("../../internal/useId.js");
 const require_noopFn = require("../../internal/noopFn.js");
 const require_warning = require("../../internal/warning.js");
@@ -213,25 +214,35 @@ const ModalDialog = react.default.forwardRef(function ModalDialog({ "aria-label"
 		prefix,
 		enableDialogElement
 	]);
+	const focusLauncherButton = (0, react.useCallback)(() => {
+		if (!launcherButtonRef || !launcherButtonRef.current) return;
+		const { current: launcherButton } = launcherButtonRef;
+		(launcherButton.matches(require_navigation.selectorTabbable) ? launcherButton : launcherButton.querySelector(require_navigation.selectorTabbable))?.focus();
+	}, [launcherButtonRef]);
 	(0, react.useEffect)(() => {
 		if (!enableDialogElement && !enablePresence && prevOpen && !open && launcherButtonRef) setTimeout(() => {
-			if ("current" in launcherButtonRef) launcherButtonRef.current?.focus();
+			focusLauncherButton();
 		});
 	}, [
 		open,
 		prevOpen,
 		launcherButtonRef,
 		enableDialogElement,
-		enablePresence
+		enablePresence,
+		focusLauncherButton
 	]);
 	(0, react.useEffect)(() => {
 		const launcherButton = launcherButtonRef?.current;
 		return () => {
 			if (enablePresence && launcherButton) setTimeout(() => {
-				launcherButton.focus();
+				focusLauncherButton();
 			});
 		};
-	}, [enablePresence, launcherButtonRef]);
+	}, [
+		enablePresence,
+		launcherButtonRef,
+		focusLauncherButton
+	]);
 	(0, react.useEffect)(() => {
 		if (!enableDialogElement) {
 			const initialFocus = (focusContainerElement) => {
@@ -467,7 +478,7 @@ Modal.propTypes = {
 	hasScrollingContent: prop_types.default.bool,
 	id: prop_types.default.string,
 	isFullWidth: prop_types.default.bool,
-	launcherButtonRef: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.shape({ current: prop_types.default.oneOfType([typeof HTMLButtonElement !== "undefined" ? prop_types.default.instanceOf(HTMLButtonElement) : prop_types.default.any, prop_types.default.oneOf([null])]).isRequired })]),
+	launcherButtonRef: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.shape({ current: prop_types.default.oneOfType([typeof HTMLElement !== "undefined" ? prop_types.default.instanceOf(HTMLElement) : prop_types.default.any, prop_types.default.oneOf([null])]).isRequired })]),
 	loadingDescription: prop_types.default.string,
 	loadingIconDescription: prop_types.default.string,
 	loadingStatus: prop_types.default.oneOf([

package/lib/components/NumberInput/NumberInput.js

@@ -273,7 +273,7 @@ const NumberInput = react.default.forwardRef((props, forwardRef) => {
 				value: allowEmpty && event.target.value === "" ? "" : Number(event.target.value),
 				direction: value < event.target.value ? "up" : "down"
 			};
-			setValue(state.value);
+			if (controlledValue === void 0) setValue(state.value);
 			if (onChange) onChange(event, state);
 			return;
 		}
@@ -316,7 +316,9 @@ const NumberInput = react.default.forwardRef((props, forwardRef) => {
 				value: newValue,
 				direction
 			};
-			if (type === "number") setValue(state.value);
+			if (type === "number") {
+				if (controlledValue === void 0) setValue(state.value);
+			}
 			if (type === "text") {
 				const formattedNewValue = format(newValue);
 				const parsedFormattedNewValue = numberParser.parse(formattedNewValue);

package/lib/components/Slider/Slider.js

@@ -274,11 +274,11 @@ const Slider = (props) => {
 		DRAG_EVENT_TYPES.forEach((element) => {
 			elementRef.current?.ownerDocument.removeEventListener(element, handleDrag);
 		});
-		setState({
-			needsOnRelease: true,
-			isValid: true,
-			isValidUpper: true
-		});
+		setState({ needsOnRelease: true });
+	};
+	const getValidityUpdateForHandle = (handle, validity) => {
+		if (typeof invalid !== "undefined") return {};
+		return handle === "upper" ? { isValidUpper: validity } : { isValid: validity };
 	};
 	/**
 	* Handles a "drag" event by recalculating the value/thumb and setting state
@@ -303,7 +303,7 @@ const Slider = (props) => {
 		else setState({
 			value: nearestStepValue(value),
 			left,
-			isValid: true
+			...getValidityUpdateForHandle("lower", true)
 		});
 		setState({
 			correctedValue: null,
@@ -342,7 +342,7 @@ const Slider = (props) => {
 			setState({
 				value: nearestStepValue(value),
 				left,
-				isValid: true
+				...getValidityUpdateForHandle("lower", true)
 			});
 		}
 		setState({
@@ -399,9 +399,7 @@ const Slider = (props) => {
 		const targetValue = Number.parseFloat(input.value);
 		const validity = !isNaN(targetValue);
 		const handlePosition = input.dataset.handlePosition;
-		if (handlePosition === "lower") setState({ isValid: validity });
-		else if (handlePosition === "upper") setState({ isValidUpper: validity });
-		setState({ isValid: validity });
+		setState(getValidityUpdateForHandle(handlePosition ?? "lower", validity));
 		if (validity) {
 			const adjustedValue = handlePosition ? getAdjustedValueForPosition({
 				handle: handlePosition,
@@ -511,22 +509,22 @@ const Slider = (props) => {
 		if (handle === "lower") setState({
 			value: valueUpper && newValue > valueUpper ? valueUpper : newValue,
 			left: valueUpper && newValue > valueUpper ? leftUpper : newLeft,
-			isValid: true
+			...getValidityUpdateForHandle(handle, true)
 		});
 		else setState({
 			valueUpper: value && newValue < value ? value : newValue,
 			leftUpper: value && newValue < value ? left : newLeft,
-			isValidUpper: true
+			...getValidityUpdateForHandle(handle, true)
 		});
 	};
 	const setValueForHandle = (handle, value) => {
 		if (handle === "lower") setState({
 			value,
-			isValid: true
+			...getValidityUpdateForHandle(handle, true)
 		});
 		else setState({
 			valueUpper: value,
-			isValidUpper: true
+			...getValidityUpdateForHandle(handle, true)
 		});
 	};
 	const isValidValueForPosition = ({ handle, value: newValue, min, max }) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.107.0-rc.0",
+  "version": "1.107.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -53,9 +53,9 @@
   "dependencies": {
     "@babel/runtime": "^7.27.3",
     "@carbon/feature-flags": "^1.3.0",
-    "@carbon/icons-react": "^11.80.0-rc.0",
+    "@carbon/icons-react": "^11.80.0",
     "@carbon/layout": "^11.52.0",
-    "@carbon/styles": "^1.106.0-rc.0",
+    "@carbon/styles": "^1.106.0",
     "@carbon/utilities": "^0.19.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
@@ -79,14 +79,14 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@carbon/test-utils": "^10.41.0",
-    "@carbon/themes": "^11.73.0-rc.0",
+    "@carbon/themes": "^11.73.0",
     "@figma/code-connect": "^1.4.2",
     "@stackblitz/sdk": "^1.11.0",
-    "@storybook/addon-a11y": "^9.1.8",
-    "@storybook/addon-docs": "^9.1.8",
-    "@storybook/addon-links": "^9.1.8",
-    "@storybook/builder-vite": "^9.1.8",
-    "@storybook/react-vite": "^9.1.8",
+    "@storybook/addon-a11y": "^10.3.5",
+    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/addon-links": "^10.3.5",
+    "@storybook/builder-vite": "^10.3.5",
+    "@storybook/react-vite": "^10.3.5",
     "@types/react-is": "^19.0.0",
     "@types/use-sync-external-store": "^1",
     "@vitejs/plugin-react": "^5.0.0",
@@ -106,7 +106,7 @@
     "remark-gfm": "^4.0.0",
     "rimraf": "^6.0.1",
     "sass": "^1.93.2",
-    "storybook": "^9.1.8",
+    "storybook": "^10.3.5",
     "storybook-addon-accessibility-checker": ">=9.2.0-rc.3",
     "stream-browserify": "^3.0.0",
     "tsdown": "^0.21.0",
@@ -125,5 +125,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "32de263c201d0424d86bc47d97d1c085abecb24e"
+  "gitHead": "13c5c427ad4413aea5184a0a593e6452bc163e4a"
 }