@yahoo/uds 3.156.1 → 3.157.0

package/dist/components/client/Input/Input.d.ts

@@ -28,6 +28,19 @@ interface InputProps extends NativeInputProps, UniversalInputProps {
     helperText?: Partial<React.HTMLAttributes<HTMLSpanElement> & DataAttributes>;
     helperTextIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
   };
+  /** Called on user-initiated blur. Return the formatted display value.
+   * The result flows through `onChange`. Programmatic value changes (autofill,
+   * password managers, parent state updates) do NOT trigger this.
+   *
+   * In controlled mode (`value` prop supplied) the formatted value is surfaced
+   * only through `onChange` — the parent MUST fold it back into `value`, or it
+   * reverts on the next render. Uncontrolled usage handles this internally. */
+  formatOnBlur?: (value: string) => string;
+  /** Called on focus. Return the value to display while editing (typically the
+   * raw, unformatted form). Omit to leave the value as-is on focus.
+   * The result flows through `onChange` (same controlled-mode caveat as
+   * `formatOnBlur`: the parent must propagate the value when `value` is set). */
+  parseOnFocus?: (value: string) => string;
 }
 /**
  * **📦 An input that allows users to enter text and collect data.**

package/dist/components/client/Input/Input.js

@@ -12,6 +12,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { isFunction } from "lodash-es";
 import { useReducedMotion } from "motion/react";
 //#region src/components/client/Input/Input.tsx
+function setNativeInputValue(input, next) {
+	(Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set)?.call(input, next);
+	input.dispatchEvent(new Event("input", { bubbles: true }));
+}
 const HelpTextContent = memo(function HelpTextContentOriginal({ helpText, helperTextIcon, spacingStart, spacingTop, size, isFilled, helperTextSlotProps, ...rest }) {
 	if (!helpText) return null;
 	return /* @__PURE__ */ jsx(Box, {
@@ -79,7 +83,7 @@ const EndIcon = memo(function EndIcon({ icon, className, iconProps }) {
 *
 * @related [Checkbox](https://uds.build/docs/components/checkbox), [Radio](https://uds.build/docs/components/radio).
 **/
-const Input = forwardRef(function Input({ id, label, type = "text", size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, width: containerWidth = "full", defaultValue, value: valueProp, required, readOnly, disabled, reduceMotion: forceReduceMotion, onChange, slotProps, style, className, ...otherProps }, forwardedRef) {
+const Input = forwardRef(function Input({ id, label, type = "text", size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, width: containerWidth = "full", defaultValue, value: valueProp, required, readOnly, disabled, reduceMotion: forceReduceMotion, onChange, onBlur, onFocus, formatOnBlur, parseOnFocus, slotProps, style, className, ...otherProps }, forwardedRef) {
 	const generatedId = useId();
 	const uid = id ?? `uds-input-${generatedId}`;
 	const helpTextId = `uds-input-${uid}-help-text`;
@@ -95,7 +99,36 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
 	const handleChange = useCallback((e) => {
 		if (!isControlled) setValue(e.target.value);
 		onChange?.(e);
-	}, [isControlled, onChange]);
+		slotProps?.input?.onChange?.(e);
+	}, [
+		isControlled,
+		onChange,
+		slotProps
+	]);
+	const handleBlur = useCallback((e) => {
+		if (formatOnBlur && ref.current) {
+			const next = formatOnBlur(e.target.value);
+			if (next !== e.target.value) setNativeInputValue(ref.current, next);
+		}
+		onBlur?.(e);
+		slotProps?.input?.onBlur?.(e);
+	}, [
+		formatOnBlur,
+		onBlur,
+		slotProps
+	]);
+	const handleFocus = useCallback((e) => {
+		if (parseOnFocus && ref.current) {
+			const next = parseOnFocus(e.target.value);
+			if (next !== e.target.value) setNativeInputValue(ref.current, next);
+		}
+		onFocus?.(e);
+		slotProps?.input?.onFocus?.(e);
+	}, [
+		parseOnFocus,
+		onFocus,
+		slotProps
+	]);
 	const layoutVariant = useReducedMotion() ? "smooth" : "bouncy";
 	const reduceMotion = forceReduceMotion ? "always" : "user";
 	const isInteractive = !readOnly && !disabled;
@@ -107,7 +140,8 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
 			className: cx([className, disabled ? "opacity-50" : ""])
 		}),
 		inputWrapper: cx(getStyles({
-			inputSizeInputWrapper: size,
+			inputSizeInputWrapperStatic: size,
+			inputSizeInputWrapperDynamic: size,
 			inputVariantInputWrapper: "default",
 			inputVariantValueInputWrapper: !value ? "empty" : "filled"
 		}), "min-w-[200px]", inputWrapperClassName),
@@ -117,7 +151,7 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
 			inputVariantValueInput: !value ? "empty" : "filled",
 			inputVariantInputPlaceholder: "default",
 			inputVariantValueInputPlaceholder: !value ? "empty" : "filled",
-			className: cx("grow", "uds-hit-target", "bg-clip-text", "focus:outline-none", isInteractive ? "cursor-text" : "cursor-not-allowed", inputClassName)
+			className: cx("grow", "uds-hit-target", "bg-transparent", "bg-clip-text", "focus-visible:outline-none", isInteractive ? "cursor-text" : "cursor-not-allowed", inputClassName)
 		}),
 		label: cx(getStyles({
 			inputSizeLabel: size,
@@ -179,10 +213,12 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
 						disabled,
 						"aria-describedby": helpTextId,
 						"aria-invalid": hasError,
-						onChange: handleChange,
 						className: classNames.input,
 						...otherProps,
-						...inputProps
+						...inputProps,
+						onChange: handleChange,
+						onBlur: handleBlur,
+						onFocus: handleFocus
 					}),
 					endIcon && /* @__PURE__ */ jsx(HStack, {
 						alignItems: "center",