@carbon/react 1.106.0-rc.0 → 1.107.0-rc.0

package/lib/components/RadioButtonGroup/RadioButtonGroup.js

@@ -10,8 +10,10 @@ const require_usePrefix = require("../../internal/usePrefix.js");
 const require_useId = require("../../internal/useId.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
 const require_utils = require("../../internal/utils.js");
+const require_hasHelperText = require("../../internal/hasHelperText.js");
 const require_index = require("../AILabel/index.js");
 const require_mergeRefs = require("../../tools/mergeRefs.js");
+const require_index$1 = require("../RadioButton/index.js");
 const require_createTextComponent = require("../Text/createTextComponent.js");
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
@@ -35,8 +37,8 @@ const RadioButtonGroup = react.default.forwardRef((props, ref) => {
 		}
 	}, [valueSelected]);
 	function getRadioButtons() {
-		return react.default.Children.map(children, (radioButton) => {
-			if (!radioButton) return;
+		return react.Children.map(children, (radioButton) => {
+			if (!require_utils.isComponentElement(radioButton, require_index$1.default)) return radioButton;
 			const newProps = {
 				name,
 				key: radioButton.props.value,
@@ -46,7 +48,7 @@ const RadioButtonGroup = react.default.forwardRef((props, ref) => {
 				required
 			};
 			if (!selected && radioButton.props.checked) newProps.checked = true;
-			return react.default.cloneElement(radioButton, newProps);
+			return (0, react.cloneElement)(radioButton, newProps);
 		});
 	}
 	function handleOnChange(newSelection, value, evt) {
@@ -70,7 +72,7 @@ const RadioButtonGroup = react.default.forwardRef((props, ref) => {
 		[`${prefix}--radio-button-group--decorator`]: decorator
 	});
 	const helperClasses = (0, classnames.default)(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: disabled });
-	const hasHelper = typeof helperText !== "undefined" && helperText !== null;
+	const hasHelper = require_hasHelperText.hasHelperText(helperText);
 	const helperId = !hasHelper ? void 0 : `radio-button-group-helper-text-${radioButtonGroupInstanceId}`;
 	const helper = hasHelper && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		id: helperId,
@@ -91,7 +93,7 @@ const RadioButtonGroup = react.default.forwardRef((props, ref) => {
 				className: fieldsetClasses,
 				disabled,
 				"data-invalid": invalid ? true : void 0,
-				"aria-describedby": showHelper && helperText ? helperId : void 0,
+				"aria-describedby": showHelper && hasHelper ? helperId : void 0,
 				...rest,
 				children: [legendText && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_createTextComponent.Legend, {
 					className: `${prefix}--label`,

package/lib/components/Search/Search.Skeleton.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.
@@ -11,22 +11,31 @@ export interface SearchSkeletonProps extends React.HTMLAttributes<HTMLDivElement
      * Specify an optional className to add.
      */
     className?: string;
+    /**
+     * Specify the size of the SearchSkeleton
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     /**
      * Specify whether the Search should be a small variant.
+     * @deprecated Use `size` prop instead. This prop will be removed in the next major release.
      */
     small?: boolean;
 }
 declare const SearchSkeleton: {
-    ({ small, className, ...rest }: SearchSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    ({ small, size, className, ...rest }: SearchSkeletonProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify an optional className to add.
          */
         className: PropTypes.Requireable<string>;
+        /**
+         * Specify the size of the SearchSkeleton
+         */
+        size: PropTypes.Requireable<string>;
         /**
          * Specify whether the Search should be a small variant
          */
-        small: PropTypes.Requireable<boolean>;
+        small: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
     };
 };
 export default SearchSkeleton;

package/lib/components/Search/Search.Skeleton.js

@@ -7,6 +7,7 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
+const require_deprecate = require("../../prop-types/deprecate.js");
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
 let react = require("react");
@@ -16,26 +17,33 @@ prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/Search/Search.Skeleton.tsx
 /**
-* 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.
 */
-const SearchSkeleton = ({ small = false, className, ...rest }) => {
+const SearchSkeleton = ({ small = false, size, className, ...rest }) => {
 	const prefix = require_usePrefix.usePrefix();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	const normalizedSize = small ? "sm" : size;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: (0, classnames.default)(className, {
 			[`${prefix}--skeleton`]: true,
-			[`${prefix}--search--xl`]: !small,
-			[`${prefix}--search--sm`]: small
+			[`${prefix}--search--sm`]: small,
+			[`${prefix}--layout--size-${normalizedSize}`]: normalizedSize
 		}),
 		...rest,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `${prefix}--label` }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `${prefix}--search-input` })]
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `${prefix}--search-input` })
 	});
 };
 SearchSkeleton.propTypes = {
 	className: prop_types.default.string,
-	small: prop_types.default.bool
+	size: prop_types.default.oneOf([
+		"xs",
+		"sm",
+		"md",
+		"lg"
+	]),
+	small: require_deprecate.deprecate(prop_types.default.bool, "The `small` prop has been deprecated and will be removed in the next major release. Please use the `size` prop instead.")
 };
 //#endregion
 exports.default = SearchSkeleton;

package/lib/components/Search/Search.d.ts

@@ -71,7 +71,7 @@ export interface SearchProps extends InputPropsBase {
     /**
      * Specify the size of the Search
      */
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     /**
      * Specify the type of the `<input>`
      */

package/lib/components/Search/Search.js

@@ -32,7 +32,7 @@ let _carbon_icons_react = require("@carbon/icons-react");
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
-const Search = react.default.forwardRef(({ autoComplete = "off", className, closeButtonLabelText = "Clear search input", defaultValue, disabled, isExpanded = true, id, labelText, light, onChange = () => {}, onClear = () => {}, onKeyDown, onExpand, placeholder = "Search", renderIcon, role, size = "md", type = "search", value, ...rest }, forwardRef) => {
+const Search = react.default.forwardRef(({ autoComplete = "off", className, closeButtonLabelText = "Clear search input", defaultValue, disabled, isExpanded = true, id, labelText, light, onChange = () => {}, onClear = () => {}, onKeyDown, onExpand, placeholder = "Search", renderIcon, role, size, type = "search", value, ...rest }, forwardRef) => {
 	const hasPropValue = require_utils.isSearchValuePresent(value) || require_utils.isSearchValuePresent(defaultValue);
 	const prefix = require_usePrefix.usePrefix();
 	const { isFluid } = (0, react.useContext)(require_FormContext.FormContext);
@@ -45,9 +45,8 @@ const Search = react.default.forwardRef(({ autoComplete = "off", className, clos
 	const [hasContent, setHasContent] = (0, react.useState)(hasPropValue || false);
 	const searchClasses = (0, classnames.default)({
 		[`${prefix}--search`]: true,
-		[`${prefix}--search--sm`]: size === "sm",
-		[`${prefix}--search--md`]: size === "md",
-		[`${prefix}--search--lg`]: size === "lg",
+		[`${prefix}--search--${size}`]: size,
+		[`${prefix}--layout--size-${size}`]: size,
 		[`${prefix}--search--light`]: light,
 		[`${prefix}--search--disabled`]: disabled,
 		[`${prefix}--search--fluid`]: isFluid
@@ -177,6 +176,7 @@ Search.propTypes = {
 	renderIcon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object]),
 	role: require_deprecate.deprecate(prop_types.default.string, "The `role` prop has been deprecated since <input type=\"search\"> already provides correct semantics. It will be removed in the next major release of Carbon."),
 	size: prop_types.default.oneOf([
+		"xs",
 		"sm",
 		"md",
 		"lg"

package/lib/components/Select/Select.d.ts

@@ -79,7 +79,7 @@ export interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, Exclu
     /**
      * Specify the size of the Select Input.
      */
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     /**
      * @deprecated please use decorator instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `Dropdown` component

package/lib/components/Select/Select.js

@@ -10,6 +10,7 @@ const require_usePrefix = require("../../internal/usePrefix.js");
 const require_Text = require("../Text/Text.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
 const require_utils = require("../../internal/utils.js");
+const require_hasHelperText = require("../../internal/hasHelperText.js");
 const require_useNormalizedInputProps = require("../../internal/useNormalizedInputProps.js");
 const require_index = require("../AILabel/index.js");
 const require_events = require("../../tools/events.js");
@@ -57,19 +58,18 @@ const Select = (0, react.forwardRef)(({ className, decorator, id, inline = false
 		[`${prefix}--select--fluid--invalid`]: isFluid && normalizedProps.invalid,
 		[`${prefix}--select--fluid--focus`]: isFluid && isFocused,
 		[`${prefix}--select--slug`]: slug,
-		[`${prefix}--select--decorator`]: decorator
+		[`${prefix}--select--decorator`]: decorator,
+		[`${prefix}--select--${size}`]: size,
+		[`${prefix}--layout--size-${size}`]: size
 	});
 	const labelClasses = (0, classnames.default)(`${prefix}--label`, {
 		[`${prefix}--visually-hidden`]: hideLabel,
 		[`${prefix}--label--disabled`]: normalizedProps.disabled
 	});
-	const inputClasses = (0, classnames.default)({
-		[`${prefix}--select-input`]: true,
-		[`${prefix}--select-input--${size}`]: size
-	});
+	const inputClasses = (0, classnames.default)({ [`${prefix}--select-input`]: true });
 	const error = normalizedProps.validation;
 	const helperTextClasses = (0, classnames.default)(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled });
-	const helper = typeof helperText !== "undefined" && helperText !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+	const helper = require_hasHelperText.hasHelperText(helperText) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
 		as: "div",
 		id: normalizedProps.helperId,
 		className: helperTextClasses,
@@ -179,6 +179,7 @@ Select.propTypes = {
 	onChange: prop_types.default.func,
 	readOnly: prop_types.default.bool,
 	size: prop_types.default.oneOf([
+		"xs",
 		"sm",
 		"md",
 		"lg"

package/lib/components/Slider/Slider.js

@@ -72,18 +72,13 @@ const DRAG_STOP_EVENT_TYPES = new Set([
 	"touchcancel"
 ]);
 const Slider = (props) => {
-	const controlledValue = props.value;
-	const controlledValueUpper = props.unstable_valueUpper;
-	const controlledMax = props.max;
-	const controlledMin = props.min;
-	const onChange = props.onChange;
-	const onRelease = props.onRelease;
+	const { ariaLabelInput, unstable_ariaLabelInputUpper: ariaLabelInputUpper, className, hideTextInput = false, id: idProp, min, minLabel, max, maxLabel, formatLabel = defaultFormatLabel, labelText, hideLabel, step = 1, inputType = "number", invalidText, required, disabled = false, name, unstable_nameUpper: nameUpper, light, readOnly = false, value: controlledValue, unstable_valueUpper: controlledValueUpper, invalid, onBlur, onChange, onInputKeyUp, onRelease, stepMultiplier = 4, warn = false, warnText, translateWithId: t = defaultTranslateWithId, ...other } = props;
 	const [state, setState] = (0, react.useReducer)((prev, args) => ({
 		...prev,
 		...args
 	}), {
-		value: props.value,
-		valueUpper: props.unstable_valueUpper,
+		value: controlledValue,
+		valueUpper: controlledValueUpper,
 		left: 0,
 		leftUpper: 0,
 		needsOnRelease: false,
@@ -98,15 +93,10 @@ const Slider = (props) => {
 	(0, react.useEffect)(() => {
 		stateRef.current = state;
 	}, [state]);
-	const propsRef = (0, react.useRef)(props);
-	(0, react.useEffect)(() => {
-		propsRef.current = props;
-	}, [props]);
 	const thumbRef = (0, react.useRef)(null);
 	const thumbRefUpper = (0, react.useRef)(null);
 	const filledTrackRef = (0, react.useRef)(null);
 	const elementRef = (0, react.useRef)(null);
-	const trackRef = (0, react.useRef)(null);
 	const generatedId = require_useId.useId();
 	const prefix = require_usePrefix.usePrefix();
 	const twoHandles = hasUpperValue(state.valueUpper);
@@ -196,23 +186,23 @@ const Slider = (props) => {
 		const next = [
 			controlledValue,
 			controlledValueUpper,
-			controlledMax,
-			controlledMin
+			max,
+			min
 		];
 		if (!prev || prev[0] !== next[0] || prev[1] !== next[1] || prev[2] !== next[2] || prev[3] !== next[3]) {
 			setState({
 				value: controlledValue,
 				left: calcRawLeftPercent({
-					max: controlledMax,
-					min: controlledMin,
+					max,
+					min,
 					value: controlledValue
 				}) * 100
 			});
 			if (typeof controlledValueUpper !== "undefined") setState({
 				valueUpper: controlledValueUpper,
 				leftUpper: calcRawLeftPercent({
-					max: controlledMax,
-					min: controlledMin,
+					max,
+					min,
 					value: controlledValueUpper
 				}) * 100
 			});
@@ -223,10 +213,10 @@ const Slider = (props) => {
 			prevSyncKeysRef.current = next;
 		}
 	}, [
-		controlledMax,
-		controlledMin,
 		controlledValue,
-		controlledValueUpper
+		controlledValueUpper,
+		max,
+		min
 	]);
 	/**
 	* Rounds a given value to the nearest step defined by the slider's `step`
@@ -236,7 +226,7 @@ const Slider = (props) => {
 	* @returns The value rounded to the precision determined by the step.
 	*/
 	const nearestStepValue = (value = 0) => {
-		const decimals = (props.step?.toString().split(".")[1] ?? "").length;
+		const decimals = (step.toString().split(".")[1] ?? "").length;
 		return Number(value.toFixed(decimals));
 	};
 	const handleDrag = (event) => {
@@ -248,7 +238,7 @@ const Slider = (props) => {
 	* event.
 	*/
 	const onDragStart = (evt) => {
-		if (props.disabled || props.readOnly) return;
+		if (disabled || readOnly) return;
 		evt.preventDefault();
 		DRAG_STOP_EVENT_TYPES.forEach((element) => {
 			elementRef.current?.ownerDocument.addEventListener(element, onDragStop);
@@ -277,7 +267,7 @@ const Slider = (props) => {
 	* indicating that the `onRelease` callback should be called.
 	*/
 	const onDragStop = () => {
-		if (props.disabled || props.readOnly) return;
+		if (disabled || readOnly) return;
 		DRAG_STOP_EVENT_TYPES.forEach((element) => {
 			elementRef.current?.ownerDocument.removeEventListener(element, onDragStop);
 		});
@@ -301,7 +291,7 @@ const Slider = (props) => {
 	const _onDragRef = (0, react.useRef)(null);
 	_onDragRef.current = (evt, activeHandle) => {
 		activeHandle = activeHandle ?? stateRef.current.activeHandle;
-		if (propsRef.current.disabled || propsRef.current.readOnly) return;
+		if (disabled || readOnly) return;
 		const { value, left } = calcValue({
 			clientX: getClientXFromEvent(evt),
 			value: stateRef.current.value
@@ -335,21 +325,20 @@ const Slider = (props) => {
 	* state accordingly.
 	*/
 	const onKeyDown = (evt) => {
-		if (props.disabled || props.readOnly) return;
-		const { step = 1, stepMultiplier = 4 } = props;
+		if (disabled || readOnly) return;
 		let delta = 0;
 		if (require_match.matches(evt, [require_keys.ArrowDown, require_keys.ArrowLeft])) delta = -step;
 		else if (require_match.matches(evt, [require_keys.ArrowUp, require_keys.ArrowRight])) delta = step;
 		else return;
 		if (evt.shiftKey) delta *= stepMultiplier;
 		if (twoHandles && state.activeHandle) {
-			const { value, left } = calcValue({ value: calcValueForDelta((state.activeHandle === "lower" ? state.value : state.valueUpper) ?? props.min, delta, props.step) });
+			const { value, left } = calcValue({ value: calcValueForDelta((state.activeHandle === "lower" ? state.value : state.valueUpper) ?? min, delta, step) });
 			setValueLeftForHandle(state.activeHandle, {
 				value: nearestStepValue(value),
 				left
 			});
 		} else {
-			const { value, left } = calcValue({ value: calcValueForDelta(state.value, delta, props.step) });
+			const { value, left } = calcValue({ value: calcValueForDelta(state.value, delta, step) });
 			setState({
 				value: nearestStepValue(value),
 				left,
@@ -367,22 +356,22 @@ const Slider = (props) => {
 	* setting state accordingly.
 	*/
 	const onChangeInput = (evt) => {
-		if (props.disabled || props.readOnly) return;
+		if (disabled || readOnly) return;
 		const activeHandle = evt.target.dataset.handlePosition ?? "lower";
 		const targetValue = Number.parseFloat(evt.target.value);
 		if (twoHandles) if (isNaN(targetValue)) setValueForHandle(activeHandle, evt.target.value);
 		else if (isValidValueForPosition({
 			handle: activeHandle,
 			value: targetValue,
-			min: props.min,
-			max: props.max
+			min,
+			max
 		})) processNewInputValue(evt.target);
 		else setValueForHandle(activeHandle, targetValue);
 		else if (isNaN(targetValue)) setState({ value: evt.target.value });
 		else if (isValidValue({
 			value: targetValue,
-			min: props.min,
-			max: props.max
+			min,
+			max
 		})) processNewInputValue(evt.target);
 		else setState({ value: targetValue });
 	};
@@ -393,13 +382,13 @@ const Slider = (props) => {
 	const onBlurInput = (evt) => {
 		const { value: targetValue } = evt.target;
 		processNewInputValue(evt.target);
-		props.onBlur?.({
+		onBlur?.({
 			value: targetValue,
 			handlePosition: evt.target.dataset.handlePosition
 		});
 	};
 	const onInputKeyDown = (evt) => {
-		if (props.disabled || props.readOnly || !(evt.target instanceof HTMLInputElement)) return;
+		if (disabled || readOnly || !(evt.target instanceof HTMLInputElement)) return;
 		if (require_match.matches(evt, [require_keys.Enter])) processNewInputValue(evt.target);
 	};
 	const processNewInputValue = (input) => {
@@ -417,12 +406,12 @@ const Slider = (props) => {
 			const adjustedValue = handlePosition ? getAdjustedValueForPosition({
 				handle: handlePosition,
 				value: targetValue,
-				min: props.min,
-				max: props.max
+				min,
+				max
 			}) : getAdjustedValue({
 				value: targetValue,
-				min: props.min,
-				max: props.max
+				min,
+				max
 			});
 			if (adjustedValue !== targetValue) setState({
 				correctedValue: targetValue.toString(),
@@ -449,12 +438,12 @@ const Slider = (props) => {
 	const calcLeftPercent = ({ clientX, value }) => {
 		const boundingRect = elementRef.current?.getBoundingClientRect?.();
 		let width = boundingRect ? boundingRect.right - boundingRect.left : 0;
-		const nextValue = value ?? props.min;
+		const nextValue = value ?? min;
 		if (width <= 0) width = 1;
 		if (clientX) return (state.isRtl ? (boundingRect?.right ?? 0) - clientX : clientX - (boundingRect?.left ?? 0)) / width;
 		return calcRawLeftPercent({
-			max: props.max,
-			min: props.min,
+			max,
+			min,
 			value: nextValue
 		});
 	};
@@ -463,7 +452,6 @@ const Slider = (props) => {
 	* with the corresponding handle position percentage.
 	*/
 	const calcDiscreteValueAndPercent = ({ leftPercent }) => {
-		const { step = 1, min, max } = props;
 		const numSteps = Math.floor((max - min) / step) + 1;
 		/** Index of the step that corresponds to `leftPercent`. */
 		const stepIndex = Math.round(leftPercent * (numSteps - 1));
@@ -590,16 +578,15 @@ const Slider = (props) => {
 	(0, react.useEffect)(() => {
 		const { isValid, isValidUpper } = stateRef.current;
 		const derivedState = {};
-		if (props.invalid === true) {
+		if (invalid === true) {
 			if (isValid === true) derivedState.isValid = false;
 			if (isValidUpper === true) derivedState.isValidUpper = false;
-		} else if (props.invalid === false) {
+		} else if (invalid === false) {
 			if (isValid === false) derivedState.isValid = true;
 			if (isValidUpper === false) derivedState.isValidUpper = true;
 		}
 		if (Object.keys(derivedState).length) setState(derivedState);
-	}, [props.invalid]);
-	const { ariaLabelInput, unstable_ariaLabelInputUpper: ariaLabelInputUpper, className, hideTextInput = false, id: idProp, min, minLabel, max, maxLabel, formatLabel = defaultFormatLabel, labelText, hideLabel, step = 1, inputType = "number", invalidText, required, disabled = false, name, unstable_nameUpper: nameUpper, light, readOnly = false, warn = false, warnText, translateWithId: t = defaultTranslateWithId, ...other } = props;
+	}, [invalid]);
 	const id = idProp ?? generatedId;
 	const { value, valueUpper, isValid, isValidUpper, correctedValue, correctedPosition, isRtl } = state;
 	const normalizedProps = require_useNormalizedInputProps.useNormalizedInputProps({
@@ -616,10 +603,12 @@ const Slider = (props) => {
 		invalid: !isValidUpper,
 		warn
 	});
-	delete other.invalid;
-	delete other.onRelease;
-	delete other.stepMultiplier;
-	delete other.unstable_valueUpper;
+	const passthroughProps = {
+		...other,
+		onBlur,
+		onChange,
+		value: controlledValue
+	};
 	const showWarning = normalizedProps.warn || correctedPosition === "lower" && isValid;
 	const showWarningUpper = normalizedUpperProps.warn || correctedPosition === (twoHandles ? "upper" : "lower") && (twoHandles ? isValidUpper : isValid);
 	const labelId = `${id}-label`;
@@ -719,7 +708,7 @@ const Slider = (props) => {
 								step,
 								onChange: onChangeInput,
 								onBlur: onBlurInput,
-								onKeyUp: props.onInputKeyUp,
+								onKeyUp: onInputKeyUp,
 								onKeyDown: onInputKeyDown,
 								"data-invalid": normalizedProps.invalid ? true : null,
 								"data-handle-position": "lower",
@@ -745,7 +734,7 @@ const Slider = (props) => {
 						role: "presentation",
 						tabIndex: -1,
 						"data-invalid": (twoHandles ? normalizedProps.invalid || normalizedUpperProps.invalid : normalizedProps.invalid) ? true : null,
-						...other,
+						...passthroughProps,
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThumbWrapper, {
 								hasTooltip: hideTextInput,
@@ -788,12 +777,7 @@ const Slider = (props) => {
 									children: !isRtl ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SliderHandles.UpperHandle, { "aria-label": ariaLabelInputUpper }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SliderHandles.UpperHandleFocus, { "aria-label": ariaLabelInputUpper })] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SliderHandles.LowerHandle, { "aria-label": ariaLabelInput }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SliderHandles.LowerHandleFocus, { "aria-label": ariaLabelInput })] })
 								})
 							}) : null,
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: `${prefix}--slider__track`,
-								ref: (node) => {
-									trackRef.current = node;
-								}
-							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `${prefix}--slider__track` }),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: `${prefix}--slider__filled-track`,
 								ref: filledTrackRef
@@ -823,7 +807,7 @@ const Slider = (props) => {
 								onChange: onChangeInput,
 								onBlur: onBlurInput,
 								onKeyDown: onInputKeyDown,
-								onKeyUp: props.onInputKeyUp,
+								onKeyUp: onInputKeyUp,
 								"data-invalid": (twoHandles ? normalizedUpperProps.invalid : normalizedProps.invalid) ? true : null,
 								"data-handle-position": twoHandles ? "upper" : null,
 								"aria-invalid": (twoHandles ? normalizedUpperProps.invalid : normalizedProps.invalid) ? true : void 0,

package/lib/components/Tabs/Tabs.js

@@ -169,7 +169,7 @@ function TabList({ activation = "automatic", "aria-label": label, children, clas
 		[`${prefix}--tabs--full-width`]: distributeWidth,
 		[`${prefix}--tabs--dismissable`]: dismissable
 	}, customClassName);
-	const [isNextButtonVisible, setIsNextButtonVisible] = (0, react.useState)(ref.current ? scrollLeft + buttonWidth + ref.current.clientWidth < ref.current.scrollWidth : false);
+	const [isNextButtonVisible, setIsNextButtonVisible] = (0, react.useState)(ref.current ? scrollLeft + ref.current.clientWidth < ref.current.scrollWidth : false);
 	const isPreviousButtonVisible = ref.current ? isScrollable && scrollLeft > 0 : false;
 	const previousButtonClasses = (0, classnames.default)(`${prefix}--tab--overflow-nav-button`, `${prefix}--tab--overflow-nav-button--previous`, { [`${prefix}--tab--overflow-nav-button--hidden`]: !isPreviousButtonVisible });
 	const nextButtonClasses = (0, classnames.default)(`${prefix}--tab--overflow-nav-button`, `${prefix}--tab--overflow-nav-button--next`, { [`${prefix}--tab--overflow-nav-button--hidden`]: !isNextButtonVisible });
@@ -224,7 +224,7 @@ function TabList({ activation = "automatic", "aria-label": label, children, clas
 		});
 	}, []);
 	(0, react.useEffect)(() => {
-		setIsNextButtonVisible(ref.current ? scrollLeft + buttonWidth + ref.current.clientWidth + 1 < ref.current.scrollWidth : false);
+		setIsNextButtonVisible(ref.current ? scrollLeft + ref.current.clientWidth + 1 < ref.current.scrollWidth : false);
 		if (dismissable && ref.current) setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth + 1);
 	}, [
 		children,

package/lib/components/TextArea/TextArea.js

@@ -14,6 +14,7 @@ const require_noopFn = require("../../internal/noopFn.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
 const require_utils = require("../../internal/utils.js");
 const require_useMergedRefs = require("../../internal/useMergedRefs.js");
+const require_hasHelperText = require("../../internal/hasHelperText.js");
 const require_index = require("../AILabel/index.js");
 const require_FormContext = require("../FluidForm/FormContext.js");
 const require_getAnnouncement = require("../../internal/getAnnouncement.js");
@@ -175,7 +176,7 @@ const TextArea = (0, react.forwardRef)((props, forwardRef) => {
 		children: `${textCount}/${maxCount}`
 	}) : null;
 	const counterDescriptionId = enableCounter && maxCount ? `${id}-counter-desc` : void 0;
-	const hasHelper = typeof helperText !== "undefined" && helperText !== null;
+	const hasHelper = require_hasHelperText.hasHelperText(helperText);
 	const helperId = !hasHelper ? void 0 : `text-area-helper-text-${textAreaInstanceId}`;
 	const helper = hasHelper && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
 		as: "div",
@@ -203,7 +204,8 @@ const TextArea = (0, react.forwardRef)((props, forwardRef) => {
 		children: [warnText, isFluid && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.WarningAltFilled, { className: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning` })]
 	}) : null;
 	let ariaDescribedBy;
-	if (invalid) ariaDescribedBy = errorId;
+	let ariaErrorMessage;
+	if (invalid) ariaErrorMessage = errorId;
 	else if (warn && !isFluid) ariaDescribedBy = warnId;
 	else {
 		const ids = [];
@@ -246,6 +248,7 @@ const TextArea = (0, react.forwardRef)((props, forwardRef) => {
 		className: textareaClasses,
 		"aria-invalid": invalid,
 		"aria-describedby": ariaDescribedBy,
+		"aria-errormessage": ariaErrorMessage,
 		disabled,
 		rows,
 		readOnly: other.readOnly,

package/lib/components/TextInput/ControlledPasswordInput.js

@@ -10,6 +10,7 @@ const require_usePrefix = require("../../internal/usePrefix.js");
 const require_useId = require("../../internal/useId.js");
 const require_noopFn = require("../../internal/noopFn.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
+const require_hasHelperText = require("../../internal/hasHelperText.js");
 const require_util = require("./util.js");
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
@@ -69,7 +70,7 @@ const ControlledPasswordInput = (0, react.forwardRef)(({ labelText, className, i
 		[`${prefix}--tooltip--${tooltipPosition}`]: tooltipPosition,
 		[`${prefix}--tooltip--align-${tooltipAlignment}`]: tooltipAlignment
 	});
-	const hasHelper = typeof helperText !== "undefined" && helperText !== null;
+	const hasHelper = require_hasHelperText.hasHelperText(helperText);
 	const helperId = !hasHelper ? void 0 : `controlled-password-helper-text-${controlledPasswordInstanceId}`;
 	const input = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 		...require_util.getTextInputProps({

package/lib/components/TextInput/PasswordInput.d.ts

@@ -96,9 +96,9 @@ export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputEl
      */
     showPasswordLabel?: string;
     /**
-     * Specify the size of the Text Input. Supports `sm`, `md`, or `lg`.
+     * Specify the size of the Text Input. Supports `xs`, `sm`, `md`, or `lg`.
      */
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     /**
      * Specify the alignment of the tooltip to the icon-only button.
      * Can be one of: `start`, `center`, or `end`.