@trackunit/react-form-components 1.8.120 → 1.8.122

package/index.cjs.js

@@ -15,8 +15,8 @@ var ReactAsyncSelect = require('react-select/async');
 var ReactAsyncCreatableSelect = require('react-select/async-creatable');
 var ReactCreatableSelect = require('react-select/creatable');
 var sharedUtils = require('@trackunit/shared-utils');
-var reactHookForm = require('react-hook-form');
 var tailwindMerge = require('tailwind-merge');
+var reactHookForm = require('react-hook-form');
 var zod = require('zod');
 
 var defaultTranslations = {
@@ -1731,18 +1731,36 @@ const isValidHEXColor = (value) => {
  * ColorField validates that user enters a valid color address.
  *
  */
-const ColorField = react.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, value: propValue, onChange, isInvalid = false, onBlur, fieldSize = "medium", ...rest }, ref) => {
-    const renderAsDisabled = Boolean(rest.disabled);
-    const renderAsReadonly = Boolean(rest.readOnly);
+const ColorField = react.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, value: propValue, onChange, isInvalid, onBlur, fieldSize = "medium", style, disabled, readOnly, nonInteractive, isWarning, inputClassName, ...inputProps }, ref) => {
+    const renderAsDisabled = Boolean(disabled);
+    const renderAsReadonly = Boolean(readOnly);
     const htmlForId = react.useMemo(() => (id ? id : "colorField-" + sharedUtils.uuidv4()), [id]);
     const innerRef = react.useRef(null);
     react.useImperativeHandle(ref, () => innerRef.current, []);
     const [t] = useTranslation();
     // Internal state for color value
-    const [innerValue, setInnerValue] = react.useState(propValue || defaultValue || "");
-    const [renderAsInvalid, setRenderAsInvalid] = react.useState(!!errorMessage || (innerValue && typeof innerValue === "string" && !isValidHEXColor(innerValue)) || isInvalid);
-    const errorType = react.useMemo(() => validateColorCode(innerValue, rest.required), [rest.required, innerValue]);
+    const [innerValue, setInnerValue] = react.useState(propValue ?? defaultValue ?? "");
+    const [hasBeenBlurred, setHasBeenBlurred] = react.useState(false);
+    const errorType = react.useMemo(() => validateColorCode(innerValue, inputProps.required), [inputProps.required, innerValue]);
     const error = react.useMemo(() => (errorType ? t(`colorField.error.${errorType}`) : errorMessage), [errorType, errorMessage, t]);
+    // Derive renderAsInvalid from props and internal validation
+    const renderAsInvalid = react.useMemo(() => {
+        if (isInvalid !== undefined) {
+            return isInvalid;
+        }
+        if (errorMessage) {
+            return true;
+        }
+        // Show invalid immediately if value is invalid
+        if (Boolean(innerValue) && isString(innerValue) && !isValidHEXColor(innerValue)) {
+            return true;
+        }
+        // Show invalid after blur if validation error exists
+        if (hasBeenBlurred && errorType) {
+            return true;
+        }
+        return false;
+    }, [isInvalid, errorMessage, innerValue, hasBeenBlurred, errorType]);
     const handleInputChange = react.useCallback((event) => {
         const newValue = event.target.value;
         setInnerValue(newValue);
@@ -1753,18 +1771,19 @@ const ColorField = react.forwardRef(({ label, id, tip, helpText, errorMessage, h
     const handleBlur = react.useCallback(event => {
         const newValue = event.target.value;
         setInnerValue(newValue);
-        setRenderAsInvalid(!!errorType);
+        setHasBeenBlurred(true);
         onBlur?.(event);
-    }, [errorType, onBlur]);
-    return (jsxRuntime.jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(renderAsDisabled || renderAsReadonly) : false, tip: tip, children: jsxRuntime.jsxs("div", { className: cvaInput$1({
+    }, [onBlur]);
+    return (jsxRuntime.jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: inputProps.required ? !(renderAsDisabled || renderAsReadonly) : false, tip: tip, children: jsxRuntime.jsxs("div", { className: cvaInput$1({
                 size: fieldSize,
                 disabled: renderAsDisabled,
                 invalid: renderAsInvalid,
                 readOnly: renderAsReadonly,
+                isWarning,
                 className,
-            }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, children: [jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label", className: cvaInputColorField({ readOnly: renderAsReadonly }), "data-testid": dataTestId, defaultValue: defaultValue, disabled: renderAsDisabled, id: htmlForId, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, ref: innerRef, type: "color", value: innerValue }), jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputElement({
-                        className: "px-1 focus-visible:outline-none",
-                    }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, disabled: renderAsDisabled, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, type: "text", value: innerValue }), jsxRuntime.jsx(GenericActionsRenderer, { disabled: renderAsDisabled || renderAsReadonly, fieldSize: fieldSize, genericAction: "edit", innerRef: innerRef, tooltipLabel: t("colorField.tooltip") })] }) }));
+            }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, style: style, children: [jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label", className: cvaInputColorField({ readOnly: renderAsReadonly }), "data-testid": dataTestId, defaultValue: defaultValue, disabled: renderAsDisabled, id: htmlForId, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, ref: innerRef, type: "color", value: innerValue }), jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputElement({
+                        className: tailwindMerge.twMerge("px-1 focus-visible:outline-none", inputClassName),
+                    }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, disabled: renderAsDisabled, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly || nonInteractive, type: "text", value: innerValue, ...inputProps }), jsxRuntime.jsx(GenericActionsRenderer, { disabled: renderAsDisabled || renderAsReadonly, fieldSize: fieldSize, genericAction: "edit", innerRef: innerRef, tooltipLabel: t("colorField.tooltip") })] }) }));
 });
 ColorField.displayName = "ColorField";
 

package/index.esm.js

@@ -14,8 +14,8 @@ import ReactAsyncSelect from 'react-select/async';
 import ReactAsyncCreatableSelect from 'react-select/async-creatable';
 import ReactCreatableSelect from 'react-select/creatable';
 import { uuidv4, nonNullable } from '@trackunit/shared-utils';
-import { Controller } from 'react-hook-form';
 import { twMerge } from 'tailwind-merge';
+import { Controller } from 'react-hook-form';
 import { z } from 'zod';
 
 var defaultTranslations = {
@@ -1730,18 +1730,36 @@ const isValidHEXColor = (value) => {
  * ColorField validates that user enters a valid color address.
  *
  */
-const ColorField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, value: propValue, onChange, isInvalid = false, onBlur, fieldSize = "medium", ...rest }, ref) => {
-    const renderAsDisabled = Boolean(rest.disabled);
-    const renderAsReadonly = Boolean(rest.readOnly);
+const ColorField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, value: propValue, onChange, isInvalid, onBlur, fieldSize = "medium", style, disabled, readOnly, nonInteractive, isWarning, inputClassName, ...inputProps }, ref) => {
+    const renderAsDisabled = Boolean(disabled);
+    const renderAsReadonly = Boolean(readOnly);
     const htmlForId = useMemo(() => (id ? id : "colorField-" + uuidv4()), [id]);
     const innerRef = useRef(null);
     useImperativeHandle(ref, () => innerRef.current, []);
     const [t] = useTranslation();
     // Internal state for color value
-    const [innerValue, setInnerValue] = useState(propValue || defaultValue || "");
-    const [renderAsInvalid, setRenderAsInvalid] = useState(!!errorMessage || (innerValue && typeof innerValue === "string" && !isValidHEXColor(innerValue)) || isInvalid);
-    const errorType = useMemo(() => validateColorCode(innerValue, rest.required), [rest.required, innerValue]);
+    const [innerValue, setInnerValue] = useState(propValue ?? defaultValue ?? "");
+    const [hasBeenBlurred, setHasBeenBlurred] = useState(false);
+    const errorType = useMemo(() => validateColorCode(innerValue, inputProps.required), [inputProps.required, innerValue]);
     const error = useMemo(() => (errorType ? t(`colorField.error.${errorType}`) : errorMessage), [errorType, errorMessage, t]);
+    // Derive renderAsInvalid from props and internal validation
+    const renderAsInvalid = useMemo(() => {
+        if (isInvalid !== undefined) {
+            return isInvalid;
+        }
+        if (errorMessage) {
+            return true;
+        }
+        // Show invalid immediately if value is invalid
+        if (Boolean(innerValue) && isString(innerValue) && !isValidHEXColor(innerValue)) {
+            return true;
+        }
+        // Show invalid after blur if validation error exists
+        if (hasBeenBlurred && errorType) {
+            return true;
+        }
+        return false;
+    }, [isInvalid, errorMessage, innerValue, hasBeenBlurred, errorType]);
     const handleInputChange = useCallback((event) => {
         const newValue = event.target.value;
         setInnerValue(newValue);
@@ -1752,18 +1770,19 @@ const ColorField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAdd
     const handleBlur = useCallback(event => {
         const newValue = event.target.value;
         setInnerValue(newValue);
-        setRenderAsInvalid(!!errorType);
+        setHasBeenBlurred(true);
         onBlur?.(event);
-    }, [errorType, onBlur]);
-    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(renderAsDisabled || renderAsReadonly) : false, tip: tip, children: jsxs("div", { className: cvaInput$1({
+    }, [onBlur]);
+    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: inputProps.required ? !(renderAsDisabled || renderAsReadonly) : false, tip: tip, children: jsxs("div", { className: cvaInput$1({
                 size: fieldSize,
                 disabled: renderAsDisabled,
                 invalid: renderAsInvalid,
                 readOnly: renderAsReadonly,
+                isWarning,
                 className,
-            }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, children: [jsx("input", { "aria-labelledby": htmlForId + "-label", className: cvaInputColorField({ readOnly: renderAsReadonly }), "data-testid": dataTestId, defaultValue: defaultValue, disabled: renderAsDisabled, id: htmlForId, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, ref: innerRef, type: "color", value: innerValue }), jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputElement({
-                        className: "px-1 focus-visible:outline-none",
-                    }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, disabled: renderAsDisabled, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, type: "text", value: innerValue }), jsx(GenericActionsRenderer, { disabled: renderAsDisabled || renderAsReadonly, fieldSize: fieldSize, genericAction: "edit", innerRef: innerRef, tooltipLabel: t("colorField.tooltip") })] }) }));
+            }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, style: style, children: [jsx("input", { "aria-labelledby": htmlForId + "-label", className: cvaInputColorField({ readOnly: renderAsReadonly }), "data-testid": dataTestId, defaultValue: defaultValue, disabled: renderAsDisabled, id: htmlForId, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, ref: innerRef, type: "color", value: innerValue }), jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputElement({
+                        className: twMerge("px-1 focus-visible:outline-none", inputClassName),
+                    }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, disabled: renderAsDisabled, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly || nonInteractive, type: "text", value: innerValue, ...inputProps }), jsx(GenericActionsRenderer, { disabled: renderAsDisabled || renderAsReadonly, fieldSize: fieldSize, genericAction: "edit", innerRef: innerRef, tooltipLabel: t("colorField.tooltip") })] }) }));
 });
 ColorField.displayName = "ColorField";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.8.120",
+  "version": "1.8.122",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,12 +14,12 @@
     "zod": "^3.23.8",
     "react-hook-form": "7.62.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.7.78",
-    "@trackunit/react-components": "1.10.53",
-    "@trackunit/ui-icons": "1.7.79",
-    "@trackunit/shared-utils": "1.9.78",
-    "@trackunit/ui-design-tokens": "1.7.78",
-    "@trackunit/i18n-library-translation": "1.7.96",
+    "@trackunit/css-class-variance-utilities": "1.7.79",
+    "@trackunit/react-components": "1.10.54",
+    "@trackunit/ui-icons": "1.7.80",
+    "@trackunit/shared-utils": "1.9.79",
+    "@trackunit/ui-design-tokens": "1.7.79",
+    "@trackunit/i18n-library-translation": "1.7.97",
     "string-ts": "^2.0.0",
     "@js-temporal/polyfill": "^0.5.1",
     "@storybook/react-webpack5": "9.1.13"

package/src/components/ColorField/ColorField.d.ts

@@ -1,6 +1,8 @@
+import { MappedOmit } from "@trackunit/shared-utils";
 import { BaseInputProps } from "../BaseInput";
 import { FormGroupProps } from "../FormGroup/FormGroup";
 type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+type ColorFieldBaseInputProps = MappedOmit<BaseInputProps, "prefix" | "suffix" | "addonBefore" | "addonAfter" | "actions" | "genericAction">;
 /**
  * Validates if the given value is a valid hex color.
  *
@@ -8,7 +10,7 @@ type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" |
  * @returns {boolean} True if the value is a valid hex color, otherwise false.
  */
 export declare const isValidHEXColor: (value: string) => boolean;
-export interface ColorFieldProps extends FormGroupExposedProps, BaseInputProps {
+export interface ColorFieldProps extends FormGroupExposedProps, ColorFieldBaseInputProps {
     /**
      * If a value is set, the field is rendered in its invalid state.
      */