@carbon/react 1.106.0 → 1.107.0

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,18 +267,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
@@ -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
@@ -313,7 +303,7 @@ const Slider = (props) => {
 		else setState({
 			value: nearestStepValue(value),
 			left,
-			isValid: true
+			...getValidityUpdateForHandle("lower", true)
 		});
 		setState({
 			correctedValue: null,
@@ -335,25 +325,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 (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,
-				isValid: true
+				...getValidityUpdateForHandle("lower", true)
 			});
 		}
 		setState({
@@ -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) => {
@@ -410,19 +399,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(),
@@ -449,12 +436,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 +450,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));
@@ -523,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 }) => {
@@ -590,16 +576,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 +601,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 +706,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 +732,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 +775,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 +805,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`.

package/lib/components/TextInput/PasswordInput.js

@@ -9,6 +9,7 @@ const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
 const require_Tooltip = require("../Tooltip/Tooltip.js");
+const require_hasHelperText = require("../../internal/hasHelperText.js");
 const require_useNormalizedInputProps = require("../../internal/useNormalizedInputProps.js");
 const require_FormContext = require("../FluidForm/FormContext.js");
 const require_util = require("./util.js");
@@ -27,7 +28,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 PasswordInput = (0, react.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 = (0, react.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] = (0, react.useState)(type);
 	const prefix = require_usePrefix.usePrefix();
 	const normalizedProps = require_useNormalizedInputProps.useNormalizedInputProps({
@@ -58,8 +59,7 @@ const PasswordInput = (0, react.forwardRef)(({ className, disabled = false, help
 			[`${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,
@@ -69,6 +69,7 @@ const PasswordInput = (0, react.forwardRef)(({ className, disabled = false, help
 		[`${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 = (0, classnames.default)(`${prefix}--label`, {
@@ -82,7 +83,10 @@ const PasswordInput = (0, react.forwardRef)(({ className, disabled = false, help
 		[`${prefix}--form__helper-text--inline`]: inline
 	});
 	const fieldOuterWrapperClasses = (0, classnames.default)(`${prefix}--text-input__field-outer-wrapper`, { [`${prefix}--text-input__field-outer-wrapper--inline`]: inline });
-	const fieldWrapperClasses = (0, classnames.default)(`${prefix}--text-input__field-wrapper`, { [`${prefix}--text-input__field-wrapper--warning`]: normalizedProps.warn });
+	const fieldWrapperClasses = (0, classnames.default)(`${prefix}--text-input__field-wrapper`, {
+		[`${prefix}--text-input__field-wrapper--warning`]: normalizedProps.warn,
+		[`${prefix}--layout--size-${size}`]: size
+	});
 	const iconClasses = (0, classnames.default)({
 		[`${prefix}--text-input__invalid-icon`]: normalizedProps.invalid || normalizedProps.warn,
 		[`${prefix}--text-input__invalid-icon--warning`]: normalizedProps.warn
@@ -92,7 +96,7 @@ const PasswordInput = (0, react.forwardRef)(({ className, disabled = false, help
 		className: labelClasses,
 		children: labelText
 	});
-	const helper = typeof helperText !== "undefined" && helperText !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	const helper = require_hasHelperText.hasHelperText(helperText) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		id: normalizedProps.helperId,
 		className: helperTextClasses,
 		children: helperText
@@ -121,7 +125,7 @@ const PasswordInput = (0, react.forwardRef)(({ className, disabled = false, help
 				invalidId: normalizedProps.invalidId,
 				warn: normalizedProps.warn,
 				warnId: normalizedProps.warnId,
-				hasHelper: Boolean(helperText && !isFluid && (inline || !inline && !normalizedProps.validation)),
+				hasHelper: require_hasHelperText.hasHelperText(helperText) && !isFluid && (inline || !inline && !normalizedProps.validation),
 				helperId: normalizedProps.helperId
 			}),
 			disabled,
@@ -147,21 +151,28 @@ const PasswordInput = (0, react.forwardRef)(({ className, disabled = false, help
 	const Icon = normalizedProps.icon;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: inputWrapperClasses,
-		children: [!inline ? label : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: `${prefix}--text-input__label-helper-wrapper`,
-			children: [label, !isFluid && helper]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: fieldOuterWrapperClasses,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: fieldWrapperClasses,
-				"data-invalid": normalizedProps.invalid || null,
-				children: [
-					Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: iconClasses }),
-					input,
-					isFluid && !inline && normalizedProps.validation
-				]
-			}), !isFluid && !inline && (normalizedProps.validation || helper)]
-		})]
+		children: [
+			!inline ? label : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `${prefix}--text-input__label-helper-wrapper`,
+				children: label
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: fieldOuterWrapperClasses,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: fieldWrapperClasses,
+					"data-invalid": normalizedProps.invalid || null,
+					children: [
+						Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: iconClasses }),
+						input,
+						isFluid && !inline && normalizedProps.validation
+					]
+				}), !isFluid && !inline && (normalizedProps.validation || helper)]
+			}),
+			inline && !isFluid && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `${prefix}--text-input__label-helper-wrapper`,
+				children: normalizedProps.validation || helper
+			})
+		]
 	});
 });
 PasswordInput.displayName = "PasswordInput";
@@ -185,6 +196,7 @@ PasswordInput.propTypes = {
 	placeholder: prop_types.default.string,
 	showPasswordLabel: prop_types.default.string,
 	size: prop_types.default.oneOf([
+		"xs",
 		"sm",
 		"md",
 		"lg"

package/lib/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/lib/components/TextInput/TextInput.Skeleton.js

@@ -16,22 +16,28 @@ prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("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 = require_usePrefix.usePrefix();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, classnames.default)(`${prefix}--form-item`, className),
+		className: (0, classnames.default)(`${prefix}--form-item`, className, { [`${prefix}--layout--size-${size}`]: size }),
 		...rest,
 		children: [!hideLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `${prefix}--label ${prefix}--skeleton` }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `${prefix}--skeleton ${prefix}--text-input` })]
 	});
 };
 TextInputSkeleton.propTypes = {
 	className: prop_types.default.string,
-	hideLabel: prop_types.default.bool
+	hideLabel: prop_types.default.bool,
+	size: prop_types.default.oneOf([
+		"xs",
+		"sm",
+		"md",
+		"lg"
+	])
 };
 //#endregion
 exports.default = TextInputSkeleton;

package/lib/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