@trackunit/custom-field-components 1.7.123 → 1.7.125

package/index.cjs.js

@@ -187,34 +187,60 @@ const convertToValueFormat = (value) => {
  * @param options DropdownCustomFieldProps - an object with all the props
  * @returns {ReactElement} - a dropdown component
  */
-const DropdownCustomField = ({ defaultValue, "data-testid": dataTestId, onChange, onBlur, id, disabled = false, allValues, multiSelect = false, register, validationRules, setValue, label, tip, errorMessage, helpText, isInvalid, helpAddon, }) => {
+const DropdownCustomField = ({ defaultValue, "data-testid": dataTestId, onChange, onBlur, id, disabled = false, allValues, multiSelect = false, register, validationRules, setValue, label, tip, errorMessage, helpText, isInvalid = false, helpAddon, }) => {
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
-    const htmlForId = id ? id : "dropdown-custom-field-" + sharedUtils.uuidv4();
-    const [selectedValue, setSelectedValue] = react.useState(defaultValue ? defaultValue.map(convertToValueFormat) : []);
-    const onChangeHandler = react.useCallback((selected) => {
-        if (selected) {
-            const values = Array.isArray(selected) ? selected : [selected];
-            if (selectedValue.length === 1 && values.length === 1 && values[0]?.value === selectedValue[0]?.value) {
-                setSelectedValue([]);
-                setValue && setValue(id, [], { shouldDirty: true, shouldValidate: true });
-            }
-            else {
-                setSelectedValue(values);
-                setValue && setValue(id, values, { shouldDirty: true, shouldValidate: true });
-            }
-        }
-        else {
-            setSelectedValue([]);
-            setValue && setValue(id, []);
-        }
-    }, [id, selectedValue, setValue]);
+    const htmlFor = id ? id : "dropdown-custom-field-" + sharedUtils.uuidv4();
     const options = react.useMemo(() => {
         return allValues ? allValues.map(convertToValueFormat) : [];
     }, [allValues]);
+    // For single select: use primitive string value
+    const [singleSelectValue, setSingleSelectValue] = react.useState(defaultValue && defaultValue.length > 0 ? defaultValue[0] : undefined);
+    // For multi select: use MultiValue array
+    const [multiSelectValue, setMultiSelectValue] = react.useState(defaultValue ? defaultValue.map(convertToValueFormat) : []);
+    // Single select onChange handler (RHF-style)
+    const singleSelectOnChange = react.useCallback((event) => {
+        const newValue = event.target.value;
+        setSingleSelectValue(newValue);
+        const formValue = newValue ? [newValue] : [];
+        setValue?.(id, formValue, { shouldDirty: true, shouldValidate: true });
+        onChange?.();
+    }, [id, setValue, onChange]);
+    // Multi select onChange handler (direct value)
+    const multiSelectOnChange = react.useCallback((selected) => {
+        const values = selected ?? [];
+        setMultiSelectValue(values);
+        const formValue = values.map(option => option.value);
+        setValue?.(id, formValue, { shouldDirty: true, shouldValidate: true });
+        onChange?.();
+    }, [id, setValue, onChange]);
+    // Register with React Hook Form
     react.useEffect(() => {
-        register && register(id, { ...validationRules, value: selectedValue });
-    }, [register, validationRules, selectedValue, id]);
-    return (jsxRuntime.jsx(reactFormComponents.FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon || null, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsxRuntime.jsx(reactFormComponents.BaseSelect, { "aria-labelledby": htmlForId + "-label", "data-testid": dataTestId, disabled: disabled, hasError: renderAsInvalid, inputId: htmlForId, isClearable: true, isMulti: multiSelect, onChange: onChangeHandler, options: options, value: selectedValue }) }));
+        if (multiSelect) {
+            const formValue = multiSelectValue.map(option => option.value);
+            register?.(id, { ...validationRules, value: formValue });
+        }
+        else {
+            const formValue = singleSelectValue ? [singleSelectValue] : [];
+            register?.(id, { ...validationRules, value: formValue });
+        }
+    }, [register, validationRules, multiSelect, multiSelectValue, singleSelectValue, id]);
+    const sharedProps = react.useMemo(() => ({
+        "data-testid": dataTestId,
+        helpAddon,
+        helpText,
+        id,
+        htmlFor,
+        isInvalid: renderAsInvalid,
+        label,
+        isClearable: true,
+        tip,
+        disabled,
+        hasError: renderAsInvalid,
+    }), [dataTestId, helpAddon, helpText, id, htmlFor, renderAsInvalid, label, tip, disabled]);
+    if (multiSelect) {
+        return (jsxRuntime.jsx(reactFormComponents.MultiSelectField, { onChange: multiSelectOnChange, options: options, value: multiSelectValue, ...sharedProps }));
+    }
+    return (jsxRuntime.jsx(reactFormComponents.SelectField, { onBlur: onBlur, onChange: singleSelectOnChange, options: options, value: singleSelectValue, ...sharedProps }));
 };
 
 /**

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
 import { getCustomFieldValueForDisplayInUI } from '@trackunit/iris-app-runtime-core';
-import { FormGroup, Checkbox, DateField, BaseSelect, TextBaseInput, useGetPhoneValidationRules, NumberField, TextField, PhoneField, ActionButton } from '@trackunit/react-form-components';
+import { FormGroup, Checkbox, DateField, MultiSelectField, SelectField, TextBaseInput, useGetPhoneValidationRules, NumberField, TextField, PhoneField, ActionButton } from '@trackunit/react-form-components';
 import { uuidv4, exhaustiveCheck } from '@trackunit/shared-utils';
 import { useState, useEffect, useCallback, createElement, useMemo } from 'react';
 import { Controller, useWatch } from 'react-hook-form';
@@ -185,34 +185,60 @@ const convertToValueFormat = (value) => {
  * @param options DropdownCustomFieldProps - an object with all the props
  * @returns {ReactElement} - a dropdown component
  */
-const DropdownCustomField = ({ defaultValue, "data-testid": dataTestId, onChange, onBlur, id, disabled = false, allValues, multiSelect = false, register, validationRules, setValue, label, tip, errorMessage, helpText, isInvalid, helpAddon, }) => {
+const DropdownCustomField = ({ defaultValue, "data-testid": dataTestId, onChange, onBlur, id, disabled = false, allValues, multiSelect = false, register, validationRules, setValue, label, tip, errorMessage, helpText, isInvalid = false, helpAddon, }) => {
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
-    const htmlForId = id ? id : "dropdown-custom-field-" + uuidv4();
-    const [selectedValue, setSelectedValue] = useState(defaultValue ? defaultValue.map(convertToValueFormat) : []);
-    const onChangeHandler = useCallback((selected) => {
-        if (selected) {
-            const values = Array.isArray(selected) ? selected : [selected];
-            if (selectedValue.length === 1 && values.length === 1 && values[0]?.value === selectedValue[0]?.value) {
-                setSelectedValue([]);
-                setValue && setValue(id, [], { shouldDirty: true, shouldValidate: true });
-            }
-            else {
-                setSelectedValue(values);
-                setValue && setValue(id, values, { shouldDirty: true, shouldValidate: true });
-            }
-        }
-        else {
-            setSelectedValue([]);
-            setValue && setValue(id, []);
-        }
-    }, [id, selectedValue, setValue]);
+    const htmlFor = id ? id : "dropdown-custom-field-" + uuidv4();
     const options = useMemo(() => {
         return allValues ? allValues.map(convertToValueFormat) : [];
     }, [allValues]);
+    // For single select: use primitive string value
+    const [singleSelectValue, setSingleSelectValue] = useState(defaultValue && defaultValue.length > 0 ? defaultValue[0] : undefined);
+    // For multi select: use MultiValue array
+    const [multiSelectValue, setMultiSelectValue] = useState(defaultValue ? defaultValue.map(convertToValueFormat) : []);
+    // Single select onChange handler (RHF-style)
+    const singleSelectOnChange = useCallback((event) => {
+        const newValue = event.target.value;
+        setSingleSelectValue(newValue);
+        const formValue = newValue ? [newValue] : [];
+        setValue?.(id, formValue, { shouldDirty: true, shouldValidate: true });
+        onChange?.();
+    }, [id, setValue, onChange]);
+    // Multi select onChange handler (direct value)
+    const multiSelectOnChange = useCallback((selected) => {
+        const values = selected ?? [];
+        setMultiSelectValue(values);
+        const formValue = values.map(option => option.value);
+        setValue?.(id, formValue, { shouldDirty: true, shouldValidate: true });
+        onChange?.();
+    }, [id, setValue, onChange]);
+    // Register with React Hook Form
     useEffect(() => {
-        register && register(id, { ...validationRules, value: selectedValue });
-    }, [register, validationRules, selectedValue, id]);
-    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon || null, helpText: errorMessage || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(BaseSelect, { "aria-labelledby": htmlForId + "-label", "data-testid": dataTestId, disabled: disabled, hasError: renderAsInvalid, inputId: htmlForId, isClearable: true, isMulti: multiSelect, onChange: onChangeHandler, options: options, value: selectedValue }) }));
+        if (multiSelect) {
+            const formValue = multiSelectValue.map(option => option.value);
+            register?.(id, { ...validationRules, value: formValue });
+        }
+        else {
+            const formValue = singleSelectValue ? [singleSelectValue] : [];
+            register?.(id, { ...validationRules, value: formValue });
+        }
+    }, [register, validationRules, multiSelect, multiSelectValue, singleSelectValue, id]);
+    const sharedProps = useMemo(() => ({
+        "data-testid": dataTestId,
+        helpAddon,
+        helpText,
+        id,
+        htmlFor,
+        isInvalid: renderAsInvalid,
+        label,
+        isClearable: true,
+        tip,
+        disabled,
+        hasError: renderAsInvalid,
+    }), [dataTestId, helpAddon, helpText, id, htmlFor, renderAsInvalid, label, tip, disabled]);
+    if (multiSelect) {
+        return (jsx(MultiSelectField, { onChange: multiSelectOnChange, options: options, value: multiSelectValue, ...sharedProps }));
+    }
+    return (jsx(SelectField, { onBlur: onBlur, onChange: singleSelectOnChange, options: options, value: singleSelectValue, ...sharedProps }));
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/custom-field-components",
-  "version": "1.7.123",
+  "version": "1.7.125",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,16 +9,16 @@
   "dependencies": {
     "react": "19.0.0",
     "react-hook-form": "7.62.0",
-    "react-select": "^5.10.0",
-    "@trackunit/react-form-components": "1.8.121",
-    "@trackunit/shared-utils": "1.9.78",
-    "@trackunit/custom-field-api": "1.7.109",
-    "@trackunit/iris-app-runtime-core": "1.8.88",
-    "@trackunit/react-components": "1.10.53",
-    "@trackunit/react-modal": "1.8.114",
-    "@trackunit/react-core-hooks": "1.7.92",
-    "@trackunit/i18n-library-translation": "1.7.96",
-    "@trackunit/iris-app-runtime-core-api": "1.7.88"
+    "react-select": "^5.10.2",
+    "@trackunit/react-form-components": "1.8.123",
+    "@trackunit/shared-utils": "1.9.80",
+    "@trackunit/custom-field-api": "1.7.111",
+    "@trackunit/iris-app-runtime-core": "1.8.90",
+    "@trackunit/react-components": "1.10.55",
+    "@trackunit/react-modal": "1.8.116",
+    "@trackunit/react-core-hooks": "1.7.94",
+    "@trackunit/i18n-library-translation": "1.7.98",
+    "@trackunit/iris-app-runtime-core-api": "1.7.90"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/DropdownCustomField.d.ts

@@ -83,7 +83,7 @@ export interface DropdownCustomFieldProps extends FormGroupExposedProps {
     isInvalid?: boolean;
 }
 type OnChange = (event?: ChangeEvent<HTMLInputElement>) => void;
-type OnBlur = (event: FocusEvent<HTMLDivElement>) => void;
+type OnBlur = (event: FocusEvent<HTMLInputElement>) => void;
 /**
  * A custom field that can be used to render a dropdown
  *