@versini/ui-textinput 6.2.0 → 6.3.0

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 import { JSX } from 'react/jsx-runtime';
-import { default as React_2 } from 'react';
 
 declare type CommonTextInputProps = {
     /**
@@ -68,24 +67,29 @@ export declare const TEXT_INPUT_WRAPPER_CLASSNAME = "av-text-input-wrapper";
 
 export declare function TextInput({ id, name, label, error, raw, className, inputClassName, mode, focusMode, disabled, noBorder, labelId, labelHidden, type, helperText, rightElement, rightElementClassName, size, ref, ...extraProps }: TextInputProps): JSX.Element;
 
-export declare const TextInputMask: React_2.ForwardRefExoticComponent<{
-    rightElement: React_2.ReactElement;
+export declare function TextInputMask({ name, disabled, label, labelHidden, onMaskChange, onChange, onBlur, onFocus, onTextInputMaskBlur, rightElement, ref, ...otherProps }: TextInputMaskProps): JSX.Element;
+
+declare type TextInputMaskProps = {
+    /**
+     * A ref to the input element.
+     */
+    ref?: React.Ref<HTMLInputElement>;
+    /**
+     * This prop allows you to pass in a React element to render on the right
+     * side of the TextInput. This is useful for adding icons or actionable
+     * elements, such a Button.
+     */
+    rightElement: React.ReactElement;
+    /**
+     * Callback fired when the value changes.
+     * @param masked whether or not the value is masked
+     */
     onMaskChange?: (masked: boolean) => void;
+    /**
+     * Callback fired when the user blurs out of the TextInputMask.
+     */
     onTextInputMaskBlur?: () => void;
-} & {
-    label: string;
-    name: string;
-    error?: boolean;
-    focusMode?: "dark" | "light" | "system" | "alt-system";
-    helperText?: string;
-    inputClassName?: string;
-    labelHidden?: boolean;
-    labelId?: string;
-    mode?: "dark" | "light" | "system" | "alt-system";
-    noBorder?: boolean;
-    raw?: boolean;
-    size?: Size;
-} & Omit<React_2.InputHTMLAttributes<HTMLInputElement>, "size"> & React_2.RefAttributes<HTMLInputElement>>;
+} & CommonTextInputProps;
 
 declare type TextInputProps = {
     /**

package/dist/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-textinput v6.2.0
+  @versini/ui-textinput v6.3.0
   © 2025 gizmette.com
 */
 
@@ -301,7 +301,7 @@ function TextInput({ id, name, label, error = false, raw = false, className, inp
 const CLEAR_ANNOUNCEMENT_TIMEOUT = 500;
 const AUTO_HIDE_CLEAR_ANNOUNCEMENT_TIMEOUT = 5000;
 const AUTO_HIDE_TIMEOUT = 20000;
-const TextInputMask = /*#__PURE__*/ react.forwardRef(({ name, disabled, label, labelHidden, onMaskChange, onChange, onBlur, onFocus, onTextInputMaskBlur, rightElement, ...otherProps }, ref)=>{
+function TextInputMask({ name, disabled, label, labelHidden, onMaskChange, onChange, onBlur, onFocus, onTextInputMaskBlur, rightElement, ref, ...otherProps }) {
     const [masked, setMasked] = useState(true);
     const [liveRegionStatus, setLiveRegionStatus] = useState({
         message: null,
@@ -327,9 +327,9 @@ const TextInputMask = /*#__PURE__*/ react.forwardRef(({ name, disabled, label, l
                     message: `${label} hiding characters`
                 });
                 /**
-					 * Callback that can be used to generate
-					 * show/hide analytics.
-					 */ onMaskChange && onMaskChange(true);
+				 * Callback that can be used to generate
+				 * show/hide analytics.
+				 */ onMaskChange && onMaskChange(true);
             }, AUTO_HIDE_TIMEOUT);
         }
     };
@@ -345,19 +345,19 @@ const TextInputMask = /*#__PURE__*/ react.forwardRef(({ name, disabled, label, l
             message: newHiddenState ? "Characters hidden" : "Characters showing"
         });
         /**
-			 * Callback that can be used to generate
-			 * show/hide analytics.
-			 */ onMaskChange && onMaskChange(newHiddenState);
+		 * Callback that can be used to generate
+		 * show/hide analytics.
+		 */ onMaskChange && onMaskChange(newHiddenState);
     };
     const handleTextInputMaskBlur = (e)=>{
         const { relatedTarget } = e;
         /**
-			 * If the related target is not a child of the input,
-			 * then the blur is leaving the input
-			 * and not going to a child of the input.
-			 * This is the case when the user blurs from the show/hide button.
-			 * In this case, we want to call the onTextInputMaskBlur callback.
-			 */ const parent = inputRef.current?.parentElement;
+		 * If the related target is not a child of the input,
+		 * then the blur is leaving the input
+		 * and not going to a child of the input.
+		 * This is the case when the user blurs from the show/hide button.
+		 * In this case, we want to call the onTextInputMaskBlur callback.
+		 */ const parent = inputRef.current?.parentElement;
         if (!parent?.contains(relatedTarget)) {
             onTextInputMaskBlur && onTextInputMaskBlur();
         }
@@ -381,23 +381,23 @@ const TextInputMask = /*#__PURE__*/ react.forwardRef(({ name, disabled, label, l
         };
     }, []);
     /**
-		 * TextInputMask rules.
-		 *
-		 *  If button label is "Show", then characters must be masked.
-		 *    - Type is set to password e.g. <input type="password">.
-		 *    - Once button is clicked, toggle the input text to show characters
-		 *      (type="text") and live region (aria-live="assertive") should
-		 *      announce, "showing characters" or similar.
-		 *  If button label is "Hide", then characters must be unmasked.
-		 *     Type is set to password e.g. <input type="text">.
-		 *    - Once button is clicked, toggle the input text to hide characters
-		 *      (type="password") and live region (aria-live="assertive") should
-		 *      announce, "hiding characters" or similar.
-		 *  If 20 seconds have passed and text input mask field has no focus-in nor
-		 *  keystrokes while text input mask characters are shown, then hide characters,
-		 *  toggle control label back to "Show", and use aria-live="polite" to announce
-		 *  "[text input mask label] hiding characters" or similar.
-		 */ return /*#__PURE__*/ jsxs(Fragment, {
+	 * TextInputMask rules.
+	 *
+	 *  If button label is "Show", then characters must be masked.
+	 *    - Type is set to password e.g. <input type="password">.
+	 *    - Once button is clicked, toggle the input text to show characters
+	 *      (type="text") and live region (aria-live="assertive") should
+	 *      announce, "showing characters" or similar.
+	 *  If button label is "Hide", then characters must be unmasked.
+	 *     Type is set to password e.g. <input type="text">.
+	 *    - Once button is clicked, toggle the input text to hide characters
+	 *      (type="password") and live region (aria-live="assertive") should
+	 *      announce, "hiding characters" or similar.
+	 *  If 20 seconds have passed and text input mask field has no focus-in nor
+	 *  keystrokes while text input mask characters are shown, then hide characters,
+	 *  toggle control label back to "Show", and use aria-live="polite" to announce
+	 *  "[text input mask label] hiding characters" or similar.
+	 */ return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(TextInput, {
                 ref: mergedInputRef,
@@ -426,8 +426,7 @@ const TextInputMask = /*#__PURE__*/ react.forwardRef(({ name, disabled, label, l
             })
         ]
     });
-});
-TextInputMask.displayName = "TextInputMask";
+}
 
 ;// CONCATENATED MODULE: ./src/components/index.ts
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-textinput",
-	"version": "6.2.0",
+	"version": "6.3.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -38,17 +38,17 @@
 	},
 	"devDependencies": {
 		"@testing-library/jest-dom": "6.9.1",
-		"@versini/ui-types": "8.1.1"
+		"@versini/ui-types": "8.2.0"
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.19",
 		"@versini/ui-hooks": "6.1.1",
-		"@versini/ui-liveregion": "3.2.1",
+		"@versini/ui-liveregion": "3.2.2",
 		"clsx": "2.1.1",
 		"tailwindcss": "4.1.18"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "217f53cc7772e8cbe38e72582cbd65adb133fcd9"
+	"gitHead": "5cc3c9aaf61ca3843f16a3d6b322a92f7fb210ca"
 }