@trackunit/react-form-components 2.4.11 → 2.4.13

package/index.cjs.js

@@ -3955,7 +3955,7 @@ const validateNumber = (number, required = false, min, max) => {
  * };
  * ```
  */
-const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid = undefined, maxLength, className, value, "data-testid": dataTestId, defaultValue, onBlur, onChange, ref, required = false, ...rest }) => {
+const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid = undefined, isWarning = false, maxLength, className, value, "data-testid": dataTestId, defaultValue, onBlur, onChange, ref, required = false, ...rest }) => {
     const htmlForId = id ? id : `numberField-${sharedUtils.uuidv4()}`;
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = react.useState(() => {
@@ -3975,10 +3975,15 @@ const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInva
         return errorMessage;
     }, [errorMessage, errorType, rest.max, rest.min, t]);
     react.useEffect(() => {
-        if (errorMessage) {
+        // A controlled isInvalid must be able to lower the invalid state too, not just raise it —
+        // otherwise a consumer switching from invalid to warning keeps the error treatment until blur.
+        if (isInvalid !== undefined) {
+            setRenderAsInvalid(isInvalid);
+        }
+        else if (errorMessage) {
             setRenderAsInvalid(Boolean(errorMessage));
         }
-    }, [errorMessage]);
+    }, [errorMessage, isInvalid]);
     const handleBlur = react.useCallback(event => {
         const newValue = event.target.value;
         setInnerValue(newValue.toString());
@@ -3997,7 +4002,7 @@ const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInva
             onChange(event);
         }
     }, [onChange]);
-    return (jsxRuntime.jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsxRuntime.jsx(NumberBaseInput, { "aria-labelledby": `${htmlForId}-label`, id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, onBlur: handleBlur, onChange: handleChange, ref: ref, required: required, value: value, ...rest, className: className, "data-testid": dataTestId }) }));
+    return (jsxRuntime.jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, isWarning: isWarning, label: label, required: required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsxRuntime.jsx(NumberBaseInput, { "aria-labelledby": `${htmlForId}-label`, id: htmlForId, isInvalid: renderAsInvalid, isWarning: isWarning, maxLength: maxLength, onBlur: handleBlur, onChange: handleChange, ref: ref, required: required, value: value, ...rest, className: className, "data-testid": dataTestId }) }));
 };
 NumberField.displayName = "NumberField";
 

package/index.esm.js

@@ -3954,7 +3954,7 @@ const validateNumber = (number, required = false, min, max) => {
  * };
  * ```
  */
-const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid = undefined, maxLength, className, value, "data-testid": dataTestId, defaultValue, onBlur, onChange, ref, required = false, ...rest }) => {
+const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid = undefined, isWarning = false, maxLength, className, value, "data-testid": dataTestId, defaultValue, onBlur, onChange, ref, required = false, ...rest }) => {
     const htmlForId = id ? id : `numberField-${uuidv4()}`;
     const [t] = useTranslation();
     const [innerValue, setInnerValue] = useState(() => {
@@ -3974,10 +3974,15 @@ const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInva
         return errorMessage;
     }, [errorMessage, errorType, rest.max, rest.min, t]);
     useEffect(() => {
-        if (errorMessage) {
+        // A controlled isInvalid must be able to lower the invalid state too, not just raise it —
+        // otherwise a consumer switching from invalid to warning keeps the error treatment until blur.
+        if (isInvalid !== undefined) {
+            setRenderAsInvalid(isInvalid);
+        }
+        else if (errorMessage) {
             setRenderAsInvalid(Boolean(errorMessage));
         }
-    }, [errorMessage]);
+    }, [errorMessage, isInvalid]);
     const handleBlur = useCallback(event => {
         const newValue = event.target.value;
         setInnerValue(newValue.toString());
@@ -3996,7 +4001,7 @@ const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInva
             onChange(event);
         }
     }, [onChange]);
-    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsx(NumberBaseInput, { "aria-labelledby": `${htmlForId}-label`, id: htmlForId, isInvalid: renderAsInvalid, maxLength: maxLength, onBlur: handleBlur, onChange: handleChange, ref: ref, required: required, value: value, ...rest, className: className, "data-testid": dataTestId }) }));
+    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, isWarning: isWarning, label: label, required: required ? !(Boolean(rest.disabled) || Boolean(rest.readOnly)) : false, tip: tip, children: jsx(NumberBaseInput, { "aria-labelledby": `${htmlForId}-label`, id: htmlForId, isInvalid: renderAsInvalid, isWarning: isWarning, maxLength: maxLength, onBlur: handleBlur, onChange: handleChange, ref: ref, required: required, value: value, ...rest, className: className, "data-testid": dataTestId }) }));
 };
 NumberField.displayName = "NumberField";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "2.4.11",
+  "version": "2.4.13",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",
@@ -10,17 +10,17 @@
   "dependencies": {
     "react-calendar": "^6.0.0",
     "react-select": "^5.10.2",
-    "@trackunit/date-and-time-utils": "1.14.6",
+    "@trackunit/date-and-time-utils": "1.14.8",
     "usehooks-ts": "^3.1.0",
     "libphonenumber-js": "^1.13.6",
     "zod": "^3.25.76",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.14.5",
-    "@trackunit/react-components": "2.7.0",
-    "@trackunit/ui-icons": "1.14.5",
-    "@trackunit/shared-utils": "1.16.5",
-    "@trackunit/ui-design-tokens": "1.14.5",
-    "@trackunit/i18n-library-translation": "2.3.7",
+    "@trackunit/css-class-variance-utilities": "1.14.7",
+    "@trackunit/react-components": "2.7.2",
+    "@trackunit/ui-icons": "1.14.7",
+    "@trackunit/shared-utils": "1.16.7",
+    "@trackunit/ui-design-tokens": "1.14.7",
+    "@trackunit/i18n-library-translation": "2.3.9",
     "string-ts": "^2.0.0",
     "es-toolkit": "^1.39.10"
   },

package/src/components/NumberField/NumberField.d.ts

@@ -59,7 +59,7 @@ export interface NumberFieldProps extends NumberBaseInputProps, FormGroupExposed
  * ```
  */
 export declare const NumberField: {
-    ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, "data-testid": dataTestId, defaultValue, onBlur, onChange, ref, required, ...rest }: NumberFieldProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, isWarning, maxLength, className, value, "data-testid": dataTestId, defaultValue, onBlur, onChange, ref, required, ...rest }: NumberFieldProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};