@carbon/react 1.106.0 → 1.107.0

package/es/components/Slider/Slider.js

@@ -68,18 +68,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] = useReducer((prev, args) => ({
 		...prev,
 		...args
 	}), {
-		value: props.value,
-		valueUpper: props.unstable_valueUpper,
+		value: controlledValue,
+		valueUpper: controlledValueUpper,
 		left: 0,
 		leftUpper: 0,
 		needsOnRelease: false,
@@ -94,15 +89,10 @@ const Slider = (props) => {
 	useEffect(() => {
 		stateRef.current = state;
 	}, [state]);
-	const propsRef = useRef(props);
-	useEffect(() => {
-		propsRef.current = props;
-	}, [props]);
 	const thumbRef = useRef(null);
 	const thumbRefUpper = useRef(null);
 	const filledTrackRef = useRef(null);
 	const elementRef = useRef(null);
-	const trackRef = useRef(null);
 	const generatedId = useId();
 	const prefix = usePrefix();
 	const twoHandles = hasUpperValue(state.valueUpper);
@@ -192,23 +182,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
 			});
@@ -219,10 +209,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`
@@ -232,7 +222,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) => {
@@ -244,7 +234,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);
@@ -273,18 +263,18 @@ 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);
 		});
 		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
@@ -297,7 +287,7 @@ const Slider = (props) => {
 	const _onDragRef = 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
@@ -309,7 +299,7 @@ const Slider = (props) => {
 		else setState({
 			value: nearestStepValue(value),
 			left,
-			isValid: true
+			...getValidityUpdateForHandle("lower", true)
 		});
 		setState({
 			correctedValue: null,
@@ -331,25 +321,24 @@ 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 (matches(evt, [ArrowDown, ArrowLeft])) delta = -step;
 		else if (matches(evt, [ArrowUp$1, ArrowRight$1])) 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,
-				isValid: true
+				...getValidityUpdateForHandle("lower", true)
 			});
 		}
 		setState({
@@ -363,22 +352,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 });
 	};
@@ -389,13 +378,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 (matches(evt, [Enter])) processNewInputValue(evt.target);
 	};
 	const processNewInputValue = (input) => {
@@ -406,19 +395,17 @@ 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,
 				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(),
@@ -445,12 +432,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
 		});
 	};
@@ -459,7 +446,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));
@@ -519,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 }) => {
@@ -586,16 +572,15 @@ const Slider = (props) => {
 	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 = useNormalizedInputProps({
@@ -612,10 +597,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`;
@@ -715,7 +702,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",
@@ -741,7 +728,7 @@ const Slider = (props) => {
 						role: "presentation",
 						tabIndex: -1,
 						"data-invalid": (twoHandles ? normalizedProps.invalid || normalizedUpperProps.invalid : normalizedProps.invalid) ? true : null,
-						...other,
+						...passthroughProps,
 						children: [
 							/* @__PURE__ */ jsx(ThumbWrapper, {
 								hasTooltip: hideTextInput,
@@ -784,12 +771,7 @@ const Slider = (props) => {
 									children: !isRtl ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(UpperHandle, { "aria-label": ariaLabelInputUpper }), /* @__PURE__ */ jsx(UpperHandleFocus, { "aria-label": ariaLabelInputUpper })] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LowerHandle, { "aria-label": ariaLabelInput }), /* @__PURE__ */ jsx(LowerHandleFocus, { "aria-label": ariaLabelInput })] })
 								})
 							}) : null,
-							/* @__PURE__ */ jsx("div", {
-								className: `${prefix}--slider__track`,
-								ref: (node) => {
-									trackRef.current = node;
-								}
-							}),
+							/* @__PURE__ */ jsx("div", { className: `${prefix}--slider__track` }),
 							/* @__PURE__ */ jsx("div", {
 								className: `${prefix}--slider__filled-track`,
 								ref: filledTrackRef
@@ -819,7 +801,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/es/components/Tabs/Tabs.js

@@ -165,7 +165,7 @@ function TabList({ activation = "automatic", "aria-label": label, children, clas
 		[`${prefix}--tabs--full-width`]: distributeWidth,
 		[`${prefix}--tabs--dismissable`]: dismissable
 	}, customClassName);
-	const [isNextButtonVisible, setIsNextButtonVisible] = useState(ref.current ? scrollLeft + buttonWidth + ref.current.clientWidth < ref.current.scrollWidth : false);
+	const [isNextButtonVisible, setIsNextButtonVisible] = useState(ref.current ? scrollLeft + ref.current.clientWidth < ref.current.scrollWidth : false);
 	const isPreviousButtonVisible = ref.current ? isScrollable && scrollLeft > 0 : false;
 	const previousButtonClasses = classNames(`${prefix}--tab--overflow-nav-button`, `${prefix}--tab--overflow-nav-button--previous`, { [`${prefix}--tab--overflow-nav-button--hidden`]: !isPreviousButtonVisible });
 	const nextButtonClasses = classNames(`${prefix}--tab--overflow-nav-button`, `${prefix}--tab--overflow-nav-button--next`, { [`${prefix}--tab--overflow-nav-button--hidden`]: !isNextButtonVisible });
@@ -220,7 +220,7 @@ function TabList({ activation = "automatic", "aria-label": label, children, clas
 		});
 	}, []);
 	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/es/components/TextArea/TextArea.js

@@ -13,6 +13,7 @@ import { noopFn } from "../../internal/noopFn.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { isComponentElement } from "../../internal/utils.js";
 import { useMergedRefs } from "../../internal/useMergedRefs.js";
+import { hasHelperText } from "../../internal/hasHelperText.js";
 import { AILabel } from "../AILabel/index.js";
 import { FormContext } from "../FluidForm/FormContext.js";
 import { getAnnouncement } from "../../internal/getAnnouncement.js";
@@ -171,7 +172,7 @@ const TextArea = 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 = hasHelperText(helperText);
 	const helperId = !hasHelper ? void 0 : `text-area-helper-text-${textAreaInstanceId}`;
 	const helper = hasHelper && /* @__PURE__ */ jsx(Text, {
 		as: "div",
@@ -199,7 +200,8 @@ const TextArea = forwardRef((props, forwardRef) => {
 		children: [warnText, isFluid && /* @__PURE__ */ jsx(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 = [];
@@ -242,6 +244,7 @@ const TextArea = forwardRef((props, forwardRef) => {
 		className: textareaClasses,
 		"aria-invalid": invalid,
 		"aria-describedby": ariaDescribedBy,
+		"aria-errormessage": ariaErrorMessage,
 		disabled,
 		rows,
 		readOnly: other.readOnly,

package/es/components/TextInput/ControlledPasswordInput.js

@@ -9,6 +9,7 @@ import { usePrefix } from "../../internal/usePrefix.js";
 import { useId } from "../../internal/useId.js";
 import { noopFn } from "../../internal/noopFn.js";
 import { deprecate } from "../../prop-types/deprecate.js";
+import { hasHelperText } from "../../internal/hasHelperText.js";
 import { getTextInputProps } from "./util.js";
 import classNames from "classnames";
 import { forwardRef } from "react";
@@ -65,7 +66,7 @@ const ControlledPasswordInput = forwardRef(({ labelText, className, id, placehol
 		[`${prefix}--tooltip--${tooltipPosition}`]: tooltipPosition,
 		[`${prefix}--tooltip--align-${tooltipAlignment}`]: tooltipAlignment
 	});
-	const hasHelper = typeof helperText !== "undefined" && helperText !== null;
+	const hasHelper = hasHelperText(helperText);
 	const helperId = !hasHelper ? void 0 : `controlled-password-helper-text-${controlledPasswordInstanceId}`;
 	const input = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
 		...getTextInputProps({

package/es/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`.

package/es/components/TextInput/PasswordInput.js

@@ -8,6 +8,7 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { Tooltip } from "../Tooltip/Tooltip.js";
+import { hasHelperText } from "../../internal/hasHelperText.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
 import { FormContext } from "../FluidForm/FormContext.js";
 import { getTextInputProps } from "./util.js";
@@ -23,7 +24,7 @@ import { View, ViewOff } from "@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 PasswordInput = forwardRef(({ className, disabled = false, helperText, hideLabel, hidePasswordLabel = "Hide password", id, inline, invalid = false, invalidText, labelText, light, onChange = () => {}, onClick = () => {}, onTogglePasswordVisibility, placeholder, readOnly, size = "md", showPasswordLabel = "Show password", tooltipPosition = "bottom", tooltipAlignment = "end", type = "password", warn = false, warnText, ...rest }, ref) => {
+const PasswordInput = forwardRef(({ className, disabled = false, helperText, hideLabel, hidePasswordLabel = "Hide password", id, inline, invalid = false, invalidText, labelText, light, onChange = () => {}, onClick = () => {}, onTogglePasswordVisibility, placeholder, readOnly, size, showPasswordLabel = "Show password", tooltipPosition = "bottom", tooltipAlignment = "end", type = "password", warn = false, warnText, ...rest }, ref) => {
 	const [inputType, setInputType] = useState(type);
 	const prefix = usePrefix();
 	const normalizedProps = useNormalizedInputProps({
@@ -54,8 +55,7 @@ const PasswordInput = forwardRef(({ className, disabled = false, helperText, hid
 			[`${prefix}--text-input--light`]: light,
 			[`${prefix}--text-input--invalid`]: normalizedProps.invalid,
 			[`${prefix}--text-input--warning`]: normalizedProps.warn,
-			[`${prefix}--text-input--${size}`]: size,
-			[`${prefix}--layout--size-${size}`]: size
+			[`${prefix}--text-input--${size}`]: size
 		}),
 		readOnly,
 		ref,
@@ -65,6 +65,7 @@ const PasswordInput = forwardRef(({ className, disabled = false, helperText, hid
 		[`${prefix}--text-input-wrapper--readonly`]: readOnly,
 		[`${prefix}--text-input-wrapper--light`]: light,
 		[`${prefix}--text-input-wrapper--inline`]: inline,
+		[`${prefix}--text-input-wrapper--inline--invalid`]: inline && normalizedProps.invalid,
 		[`${prefix}--text-input--fluid`]: isFluid
 	});
 	const labelClasses = classNames(`${prefix}--label`, {
@@ -78,7 +79,10 @@ const PasswordInput = forwardRef(({ className, disabled = false, helperText, hid
 		[`${prefix}--form__helper-text--inline`]: inline
 	});
 	const fieldOuterWrapperClasses = classNames(`${prefix}--text-input__field-outer-wrapper`, { [`${prefix}--text-input__field-outer-wrapper--inline`]: inline });
-	const fieldWrapperClasses = classNames(`${prefix}--text-input__field-wrapper`, { [`${prefix}--text-input__field-wrapper--warning`]: normalizedProps.warn });
+	const fieldWrapperClasses = classNames(`${prefix}--text-input__field-wrapper`, {
+		[`${prefix}--text-input__field-wrapper--warning`]: normalizedProps.warn,
+		[`${prefix}--layout--size-${size}`]: size
+	});
 	const iconClasses = classNames({
 		[`${prefix}--text-input__invalid-icon`]: normalizedProps.invalid || normalizedProps.warn,
 		[`${prefix}--text-input__invalid-icon--warning`]: normalizedProps.warn
@@ -88,7 +92,7 @@ const PasswordInput = forwardRef(({ className, disabled = false, helperText, hid
 		className: labelClasses,
 		children: labelText
 	});
-	const helper = typeof helperText !== "undefined" && helperText !== null && /* @__PURE__ */ jsx("div", {
+	const helper = hasHelperText(helperText) && /* @__PURE__ */ jsx("div", {
 		id: normalizedProps.helperId,
 		className: helperTextClasses,
 		children: helperText
@@ -117,7 +121,7 @@ const PasswordInput = forwardRef(({ className, disabled = false, helperText, hid
 				invalidId: normalizedProps.invalidId,
 				warn: normalizedProps.warn,
 				warnId: normalizedProps.warnId,
-				hasHelper: Boolean(helperText && !isFluid && (inline || !inline && !normalizedProps.validation)),
+				hasHelper: hasHelperText(helperText) && !isFluid && (inline || !inline && !normalizedProps.validation),
 				helperId: normalizedProps.helperId
 			}),
 			disabled,
@@ -143,21 +147,28 @@ const PasswordInput = forwardRef(({ className, disabled = false, helperText, hid
 	const Icon = normalizedProps.icon;
 	return /* @__PURE__ */ jsxs("div", {
 		className: inputWrapperClasses,
-		children: [!inline ? label : /* @__PURE__ */ jsxs("div", {
-			className: `${prefix}--text-input__label-helper-wrapper`,
-			children: [label, !isFluid && helper]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: fieldOuterWrapperClasses,
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: fieldWrapperClasses,
-				"data-invalid": normalizedProps.invalid || null,
-				children: [
-					Icon && /* @__PURE__ */ jsx(Icon, { className: iconClasses }),
-					input,
-					isFluid && !inline && normalizedProps.validation
-				]
-			}), !isFluid && !inline && (normalizedProps.validation || helper)]
-		})]
+		children: [
+			!inline ? label : /* @__PURE__ */ jsx("div", {
+				className: `${prefix}--text-input__label-helper-wrapper`,
+				children: label
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: fieldOuterWrapperClasses,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: fieldWrapperClasses,
+					"data-invalid": normalizedProps.invalid || null,
+					children: [
+						Icon && /* @__PURE__ */ jsx(Icon, { className: iconClasses }),
+						input,
+						isFluid && !inline && normalizedProps.validation
+					]
+				}), !isFluid && !inline && (normalizedProps.validation || helper)]
+			}),
+			inline && !isFluid && /* @__PURE__ */ jsx("div", {
+				className: `${prefix}--text-input__label-helper-wrapper`,
+				children: normalizedProps.validation || helper
+			})
+		]
 	});
 });
 PasswordInput.displayName = "PasswordInput";
@@ -181,6 +192,7 @@ PasswordInput.propTypes = {
 	placeholder: PropTypes.string,
 	showPasswordLabel: PropTypes.string,
 	size: PropTypes.oneOf([
+		"xs",
 		"sm",
 		"md",
 		"lg"

package/es/components/TextInput/TextInput.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.
@@ -15,9 +15,13 @@ export interface TextInputSkeletonProps extends React.HTMLAttributes<HTMLDivElem
      * Specify whether the label should be hidden or not.
      */
     hideLabel?: boolean;
+    /**
+     * Specify the size of the TextInputSkeleton
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
 }
 declare const TextInputSkeleton: {
-    ({ hideLabel, className, ...rest }: TextInputSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    ({ hideLabel, className, size, ...rest }: TextInputSkeletonProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify an optional className to add to the form item wrapper.
@@ -27,6 +31,10 @@ declare const TextInputSkeleton: {
          * Specify whether the label should be hidden, or not
          */
         hideLabel: PropTypes.Requireable<boolean>;
+        /**
+         * Specify the size of the TextInputSkeleton
+         */
+        size: PropTypes.Requireable<string>;
     };
 };
 export default TextInputSkeleton;

package/es/components/TextInput/TextInput.Skeleton.js

@@ -12,22 +12,28 @@ import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/TextInput/TextInput.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 TextInputSkeleton = ({ hideLabel, className, ...rest }) => {
+const TextInputSkeleton = ({ hideLabel, className, size, ...rest }) => {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames(`${prefix}--form-item`, className),
+		className: classNames(`${prefix}--form-item`, className, { [`${prefix}--layout--size-${size}`]: size }),
 		...rest,
 		children: [!hideLabel && /* @__PURE__ */ jsx("span", { className: `${prefix}--label ${prefix}--skeleton` }), /* @__PURE__ */ jsx("div", { className: `${prefix}--skeleton ${prefix}--text-input` })]
 	});
 };
 TextInputSkeleton.propTypes = {
 	className: PropTypes.string,
-	hideLabel: PropTypes.bool
+	hideLabel: PropTypes.bool,
+	size: PropTypes.oneOf([
+		"xs",
+		"sm",
+		"md",
+		"lg"
+	])
 };
 //#endregion
 export { TextInputSkeleton as default };

package/es/components/TextInput/TextInput.d.ts

@@ -88,7 +88,7 @@ export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInput
     /**
      * Specify the size of the Text Input. Currently supports the following:
      */
-    size?: 'sm' | 'md' | 'lg' | 'xl';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     /**
      * @deprecated please use `decorator` instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `TextInput` component