@trackunit/custom-field-components 2.23.13 → 2.23.14

package/index.cjs.js

@@ -6,22 +6,17 @@ var reactFormComponents = require('@trackunit/react-form-components');
 var sharedUtils = require('@trackunit/shared-utils');
 var reactHookForm = require('react-hook-form');
 var react = require('react');
-var reactComponents = require('@trackunit/react-components');
-var reactCoreHooks = require('@trackunit/react-core-hooks');
-var reactModal = require('@trackunit/react-modal');
 
 var defaultTranslations = {
 	"customfield.input.email": "Email",
 	"customfield.input.webaddress": "Web Address",
-	"customfield.stringlistfield.add": "Add",
-	"customfield.stringlistfield.addField.Heading": "Add {{label}}",
-	"customfield.stringlistfield.addField.InputPlaceholder": "Enter {{label}}",
-	"customfield.stringlistfield.deleteField.Heading": "Delete {{label}}",
-	"customfield.stringlistfield.deleteField.Message": "Are you sure you want to delete this {{label}}?",
-	"customfield.stringlistfield.deleteField.PrimaryActionLabel": "Delete",
-	"customfield.stringlistfield.deleteField.SecondaryActionLabel": "Cancel",
-	"customfield.stringlistfield.discard": "Discard",
-	"customfield.stringlistfield.noValuesAddedYet": "No values added yet",
+	"customfield.stringlistfield.counter": "{{count}}/{{maximumItems}}",
+	"customfield.stringlistfield.duplicate": "This value has already been added",
+	"customfield.stringlistfield.itemMaximumLength": "Each value can be at most {{itemMaximumLength}} characters",
+	"customfield.stringlistfield.itemMinimumLength": "Each value must be at least {{itemMinimumLength}} characters",
+	"customfield.stringlistfield.maximumItems": "You can add at most {{maximumItems}} values",
+	"customfield.stringlistfield.pattern": "Value is not in the expected format",
+	"customfield.stringlistfield.placeholder": "Add {{label}}",
 	"customfield.unit.ACRE": "acre",
 	"customfield.unit.AMPERE": "A",
 	"customfield.unit.AMPERE_HOUR": "Ah",
@@ -252,73 +247,183 @@ const DropdownCustomField = ({ defaultValue, "data-testid": dataTestId, onChange
 };
 
 /**
- * Modal for adding a new string list field
+ * A labeled multi-value field for string-list custom fields.
  */
-const AddStringListField = ({ id, label, isEditing, setIsEditing, onAdd, }) => {
-    const modal = reactModal.useModal({
-        isOpen: isEditing,
-        onClose: () => {
-            setInputValue("");
-            setIsEditing(false);
-        },
-    });
+const StringListField = ({ defaultValue = [], label, description, helpText, errorMessage, disabled = false, validationRules, id, control, "data-testid": dataTestId, itemMinimumLength, itemMaximumLength, maximumItems, pattern, className, }) => {
+    const [t] = useTranslation();
+    const normalizeStringListItem = react.useCallback((raw) => raw.trim().replace(/\s+/g, " "), []);
     const [inputValue, setInputValue] = react.useState("");
-    const { t } = useTranslation();
-    const handleAdd = () => {
-        if (inputValue.trim()) {
-            onAdd(inputValue.trim());
-            setInputValue("");
-            setIsEditing(false);
+    const [reportItemMinimumLength, setReportItemMinimumLength] = react.useState(false);
+    const inputValueRef = react.useRef("");
+    const selectTestId = dataTestId ?? id;
+    const itemPattern = react.useMemo(() => {
+        if (!pattern) {
+            return null;
         }
-    };
-    return (jsxRuntime.jsxs(reactModal.Modal, { ...modal, "data-testid": `${id}-edit-modal`, size: "medium", children: [jsxRuntime.jsx(reactModal.ModalHeader, { heading: t("customfield.stringlistfield.addField.Heading", { label: label }), onClickClose: modal.close }), jsxRuntime.jsx(reactModal.ModalBody, { children: jsxRuntime.jsx(reactFormComponents.TextBaseInput, { "data-testid": `${id}-edit-modal-input`, onChange: e => setInputValue(e.target.value), placeholder: t("customfield.stringlistfield.addField.InputPlaceholder", { label: label }), value: inputValue }) }), jsxRuntime.jsx(reactModal.ModalFooter, { cancelLabel: t("customfield.stringlistfield.discard"), "data-testid": `${id}-edit-modal-footer`, onCancel: modal.close, primaryAction: handleAdd, primaryLabel: t("customfield.stringlistfield.add") })] }));
-};
-
-const StringListInput = ({ value: initialValue, onSave, onClickDelete, disabled, id, index }) => {
-    const [t] = useTranslation();
-    const [localValue, setLocalValue] = react.useState(initialValue);
-    react.useEffect(() => {
-        setLocalValue(initialValue);
-    }, [initialValue]);
-    const handleBlur = react.useCallback(() => {
-        if (localValue !== initialValue) {
-            onSave(localValue);
-        }
-    }, [localValue, initialValue, onSave]);
-    return (jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx(reactFormComponents.TextBaseInput, { "data-testid": `${id}-${index}-input`, disabled: disabled, onBlur: handleBlur, onChange: e => setLocalValue(e.target.value), value: localValue }), jsxRuntime.jsx(reactComponents.IconButton, { disabled: disabled, icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Trash", size: "small" }), onClick: onClickDelete, title: t("customfield.stringlistfield.deleteField.PrimaryActionLabel"), variant: "secondary-danger" })] }));
-};
-/**
- * A custom field that displays a list of strings.
- */
-const StringListField = ({ defaultValue = [], label, description, disabled = false, validationRules, id, control, register, setValue, "data-testid": dataTestId, ...props }) => {
-    const [isEditing, setIsEditing] = react.useState(false);
-    const { confirm } = reactCoreHooks.useConfirmationDialog();
-    const { t } = useTranslation();
+        try {
+            return new RegExp(pattern);
+        }
+        catch {
+            return null;
+        }
+    }, [pattern]);
     return (jsxRuntime.jsx(reactHookForm.Controller, { control: control, defaultValue: defaultValue, name: id, render: ({ field }) => {
-            const handleRemoveValue = (index) => {
-                const newValues = [...field.value].filter((_, i) => i !== index);
-                field.onChange(newValues);
+            const values = Array.isArray(field.value) ? field.value : [];
+            const atCap = typeof maximumItems === "number" && values.length >= maximumItems;
+            const rejection = (() => {
+                const item = normalizeStringListItem(inputValue);
+                if (item === "") {
+                    return null;
+                }
+                if (typeof itemMaximumLength === "number" && item.length > itemMaximumLength) {
+                    return "itemMaximumLength";
+                }
+                if (reportItemMinimumLength && typeof itemMinimumLength === "number" && item.length < itemMinimumLength) {
+                    return "itemMinimumLength";
+                }
+                if (itemPattern && !itemPattern.test(item)) {
+                    return "pattern";
+                }
+                if (atCap) {
+                    return "maximumItems";
+                }
+                if (values.some(existing => existing.toLowerCase() === item.toLowerCase())) {
+                    return "duplicate";
+                }
+                return null;
+            })();
+            const standingHelpText = (() => {
+                if (!disabled && atCap && typeof maximumItems === "number") {
+                    return t("customfield.stringlistfield.maximumItems", { maximumItems });
+                }
+                return helpText ?? description;
+            })();
+            const resolvedHelpText = (() => {
+                switch (rejection) {
+                    case "duplicate":
+                        return t("customfield.stringlistfield.duplicate");
+                    case "maximumItems":
+                        return t("customfield.stringlistfield.maximumItems", { maximumItems });
+                    case "itemMaximumLength":
+                        return t("customfield.stringlistfield.itemMaximumLength", { itemMaximumLength });
+                    case "itemMinimumLength":
+                        return t("customfield.stringlistfield.itemMinimumLength", { itemMinimumLength });
+                    case "pattern":
+                        return t("customfield.stringlistfield.pattern");
+                    case null:
+                        return errorMessage ?? standingHelpText;
+                    default:
+                        return sharedUtils.exhaustiveCheck(rejection);
+                }
+            })();
+            const selectedOptions = values.map(item => ({
+                label: item,
+                value: item,
+            }));
+            const tryAddItem = (raw) => {
+                if (disabled) {
+                    return;
+                }
+                const item = normalizeStringListItem(raw);
+                if (item === "") {
+                    return;
+                }
+                if (typeof itemMaximumLength === "number" && item.length > itemMaximumLength) {
+                    return;
+                }
+                if (typeof itemMinimumLength === "number" && item.length < itemMinimumLength) {
+                    return;
+                }
+                if (itemPattern && !itemPattern.test(item)) {
+                    return;
+                }
+                if (typeof maximumItems === "number" && values.length >= maximumItems) {
+                    return;
+                }
+                if (values.some(existing => existing.toLowerCase() === item.toLowerCase())) {
+                    return;
+                }
+                inputValueRef.current = "";
+                setInputValue("");
+                field.onChange([...values, item]);
             };
-            const handleFieldChange = (index, value) => {
-                const newValues = [...field.value];
-                newValues[index] = value;
-                field.onChange(newValues);
+            const onCreateOption = (raw) => {
+                tryAddItem(raw);
             };
-            const handleRemoveValueConfirmation = async (index) => {
-                const confirmResult = await confirm({
-                    title: t("customfield.stringlistfield.deleteField.Heading", { label: label }),
-                    message: t("customfield.stringlistfield.deleteField.Message", { label: label }),
-                    primaryActionLabel: t("customfield.stringlistfield.deleteField.PrimaryActionLabel"),
-                    secondaryActionLabel: t("customfield.stringlistfield.deleteField.SecondaryActionLabel"),
-                    primaryActionType: "primary-danger",
-                });
-                if (confirmResult === "PRIMARY") {
-                    handleRemoveValue(index);
+            const onSelectChange = (selected, actionMeta) => {
+                if (disabled || actionMeta.action === "create-option") {
+                    return;
+                }
+                const incoming = selected.map(option => option.value);
+                const kept = values.filter(existing => incoming.includes(existing));
+                const added = incoming.filter(next => !values.some(existing => existing.toLowerCase() === next.toLowerCase()));
+                if (added.length > 0 && typeof maximumItems === "number" && kept.length + added.length > maximumItems) {
+                    return;
                 }
+                field.onChange([...kept, ...added]);
             };
-            return (jsxRuntime.jsxs(reactComponents.Card, { ...props, className: "w-full", "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.CardHeader, { accessories: jsxRuntime.jsx(reactComponents.Tooltip, { label: description }), heading: label, headingVariant: "secondary" }), jsxRuntime.jsx(reactComponents.CardBody, { children: field.value.length === 0 ? (jsxRuntime.jsx(reactComponents.Text, { children: t("customfield.stringlistfield.noValuesAddedYet") })) : (jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: field.value.map((value, index) => (jsxRuntime.jsx(StringListInput, { disabled: disabled, id: id, index: index, onClickDelete: () => handleRemoveValueConfirmation(index), onSave: newValue => handleFieldChange(index, newValue), value: value }, `${id}-${index}`))) })) }), !disabled ? (jsxRuntime.jsx(reactComponents.CardFooter, { children: jsxRuntime.jsx(reactComponents.Button, { disabled: disabled, onClick: () => setIsEditing(true), variant: "secondary", children: t("customfield.stringlistfield.add", { label: label }) }) })) : null, jsxRuntime.jsx(AddStringListField, { id: id, isEditing: isEditing, label: label, onAdd: (newItem) => {
-                            field.onChange([...field.value, newItem]);
-                        }, setIsEditing: setIsEditing })] }));
+            const onKeyDown = (event) => {
+                const raw = inputValueRef.current;
+                const item = normalizeStringListItem(raw);
+                if (event.key === " " && item === "") {
+                    event.preventDefault();
+                    const next = `${raw} `;
+                    inputValueRef.current = next;
+                    setInputValue(next);
+                    return;
+                }
+                if (event.key !== "Enter") {
+                    return;
+                }
+                if (item === "") {
+                    if (raw !== "") {
+                        event.preventDefault();
+                        inputValueRef.current = "";
+                        setInputValue("");
+                    }
+                    return;
+                }
+                event.preventDefault();
+                if (typeof itemMinimumLength === "number" && item.length < itemMinimumLength) {
+                    setReportItemMinimumLength(true);
+                }
+                tryAddItem(raw);
+            };
+            const onInputChange = (nextValue, meta) => {
+                if (meta.action === "input-change") {
+                    setReportItemMinimumLength(false);
+                    inputValueRef.current = nextValue;
+                    setInputValue(nextValue);
+                    return nextValue;
+                }
+                const draft = inputValueRef.current;
+                const item = normalizeStringListItem(draft);
+                if (meta.action === "input-blur" &&
+                    item !== "" &&
+                    typeof itemMinimumLength === "number" &&
+                    item.length < itemMinimumLength) {
+                    setReportItemMinimumLength(true);
+                }
+                const isRejectedDraft = item !== "" &&
+                    ((typeof itemMaximumLength === "number" && item.length > itemMaximumLength) ||
+                        (typeof itemMinimumLength === "number" && item.length < itemMinimumLength) ||
+                        (itemPattern !== null && !itemPattern.test(item)) ||
+                        (typeof maximumItems === "number" && values.length >= maximumItems) ||
+                        values.some(existing => existing.toLowerCase() === item.toLowerCase()));
+                if (isRejectedDraft) {
+                    return draft;
+                }
+                if (meta.action === "input-blur" && item !== "") {
+                    tryAddItem(draft);
+                    return "";
+                }
+                inputValueRef.current = nextValue;
+                setInputValue(nextValue);
+                return nextValue;
+            };
+            return (jsxRuntime.jsx(reactFormComponents.FormGroup, { className: className, "data-testid": dataTestId ? `${dataTestId}-field` : undefined, helpAddon: typeof maximumItems === "number"
+                    ? t("customfield.stringlistfield.counter", { count: values.length, maximumItems })
+                    : undefined, helpText: resolvedHelpText, htmlFor: id, isInvalid: rejection !== null || Boolean(errorMessage), label: label, children: jsxRuntime.jsx(reactFormComponents.CreatableSelect, { "data-testid": selectTestId, disabled: disabled, hasError: rejection !== null || Boolean(errorMessage), hideSelectedOptions: false, inputId: id, inputValue: inputValue, isMulti: true, label: label, onChange: onSelectChange, onCreateOption: onCreateOption, onInputChange: onInputChange, onKeyDown: onKeyDown, options: selectedOptions, placeholder: t("customfield.stringlistfield.placeholder", { label }), value: selectedOptions }) }));
         }, rules: validationRules }));
 };
 
@@ -447,44 +552,11 @@ const getDropdownValidationRules = (_definition) => {
     return getDefaultValidationRules();
 };
 /**
- * Generates validation rules for a string list field.
- *
- * @param {GetStringListValidationRulesDefinition} definition - The definition of the string list field.
- * @returns {ValidationRules} The generated validation rules.
+ * String-list item limits are enforced when a value is added. React Hook Form's
+ * minLength, maxLength, and pattern rules apply to the array itself, so they are not used here.
  */
-const getStringListValidationRules = (definition) => {
-    const defaultRules = {};
-    const itemMinLength = definition.itemMinimumLength !== null && definition.itemMinimumLength !== undefined
-        ? {
-            minLength: {
-                value: definition.itemMinimumLength,
-                message: `minimum length for each item is ${definition.itemMinimumLength}`,
-            },
-        }
-        : undefined;
-    const itemMaxLength = definition.itemMaximumLength !== null && definition.itemMaximumLength !== undefined
-        ? {
-            maxLength: {
-                value: definition.itemMaximumLength,
-                message: `maximum length for each item is ${definition.itemMaximumLength}`,
-            },
-        }
-        : undefined;
-    const pattern = definition.pattern
-        ? {
-            pattern: {
-                value: RegExp(definition.pattern),
-                message: `Must match pattern: ${definition.pattern}`,
-            },
-        }
-        : undefined;
-    return definition.uiEditable
-        ? {
-            ...itemMaxLength,
-            ...itemMinLength,
-            ...pattern,
-        }
-        : defaultRules;
+const getStringListValidationRules = (_definition) => {
+    return {};
 };
 /**
  * Generates validation rules for a date field.
@@ -609,8 +681,8 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
             return (jsxRuntime.jsx(DateCustomField, { "data-testid": `${key}`, defaultValue: value, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title || "", readOnly: !isEditableCombined, register: validation.register, setValue: validation.setValue, title: title || "", validationRules: rules }));
         }
         case "StringListFieldDefinition": {
-            const rules = getStringListValidationRules(def);
-            return (jsxRuntime.jsx(StringListField, { control: control, "data-testid": key, defaultValue: value ?? undefined, description: description ?? "", disabled: !isEditableCombined, errorMessage: errorMessage, id: uniqueIdentifier, label: title || "", register: validation.register, setValue: validation.setValue, validationRules: rules }));
+            const rules = getStringListValidationRules();
+            return (jsxRuntime.jsx(StringListField, { control: control, "data-testid": key, defaultValue: value ?? undefined, description: description ?? "", disabled: !isEditableCombined, errorMessage: errorMessage, id: uniqueIdentifier, itemMaximumLength: def.itemMaximumLength, itemMinimumLength: def.itemMinimumLength, label: title || "", maximumItems: def.maximumItems, pattern: def.pattern, validationRules: rules }));
         }
         case "JsonFieldDefinition":
         case "FileFieldDefinition": {

package/index.esm.js

@@ -1,25 +1,20 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
-import { FormGroup, Checkbox, toISODateStringUTC, DateField, MultiSelectField, SelectField, TextBaseInput, useGetPhoneValidationRules, NumberField, TextField, PhoneField, ActionButton } from '@trackunit/react-form-components';
+import { FormGroup, Checkbox, toISODateStringUTC, DateField, MultiSelectField, SelectField, CreatableSelect, useGetPhoneValidationRules, NumberField, TextField, PhoneField, ActionButton } from '@trackunit/react-form-components';
 import { uuidv4, exhaustiveCheck } from '@trackunit/shared-utils';
 import { Controller, useWatch } from 'react-hook-form';
-import { useState, useEffect, useCallback, createElement, useMemo } from 'react';
-import { Card, CardHeader, Tooltip, CardBody, Text, CardFooter, Button, IconButton, Icon } from '@trackunit/react-components';
-import { useConfirmationDialog } from '@trackunit/react-core-hooks';
-import { useModal, Modal, ModalHeader, ModalBody, ModalFooter } from '@trackunit/react-modal';
+import { useState, useEffect, useCallback, createElement, useMemo, useRef } from 'react';
 
 var defaultTranslations = {
 	"customfield.input.email": "Email",
 	"customfield.input.webaddress": "Web Address",
-	"customfield.stringlistfield.add": "Add",
-	"customfield.stringlistfield.addField.Heading": "Add {{label}}",
-	"customfield.stringlistfield.addField.InputPlaceholder": "Enter {{label}}",
-	"customfield.stringlistfield.deleteField.Heading": "Delete {{label}}",
-	"customfield.stringlistfield.deleteField.Message": "Are you sure you want to delete this {{label}}?",
-	"customfield.stringlistfield.deleteField.PrimaryActionLabel": "Delete",
-	"customfield.stringlistfield.deleteField.SecondaryActionLabel": "Cancel",
-	"customfield.stringlistfield.discard": "Discard",
-	"customfield.stringlistfield.noValuesAddedYet": "No values added yet",
+	"customfield.stringlistfield.counter": "{{count}}/{{maximumItems}}",
+	"customfield.stringlistfield.duplicate": "This value has already been added",
+	"customfield.stringlistfield.itemMaximumLength": "Each value can be at most {{itemMaximumLength}} characters",
+	"customfield.stringlistfield.itemMinimumLength": "Each value must be at least {{itemMinimumLength}} characters",
+	"customfield.stringlistfield.maximumItems": "You can add at most {{maximumItems}} values",
+	"customfield.stringlistfield.pattern": "Value is not in the expected format",
+	"customfield.stringlistfield.placeholder": "Add {{label}}",
 	"customfield.unit.ACRE": "acre",
 	"customfield.unit.AMPERE": "A",
 	"customfield.unit.AMPERE_HOUR": "Ah",
@@ -250,73 +245,183 @@ const DropdownCustomField = ({ defaultValue, "data-testid": dataTestId, onChange
 };
 
 /**
- * Modal for adding a new string list field
+ * A labeled multi-value field for string-list custom fields.
  */
-const AddStringListField = ({ id, label, isEditing, setIsEditing, onAdd, }) => {
-    const modal = useModal({
-        isOpen: isEditing,
-        onClose: () => {
-            setInputValue("");
-            setIsEditing(false);
-        },
-    });
+const StringListField = ({ defaultValue = [], label, description, helpText, errorMessage, disabled = false, validationRules, id, control, "data-testid": dataTestId, itemMinimumLength, itemMaximumLength, maximumItems, pattern, className, }) => {
+    const [t] = useTranslation();
+    const normalizeStringListItem = useCallback((raw) => raw.trim().replace(/\s+/g, " "), []);
     const [inputValue, setInputValue] = useState("");
-    const { t } = useTranslation();
-    const handleAdd = () => {
-        if (inputValue.trim()) {
-            onAdd(inputValue.trim());
-            setInputValue("");
-            setIsEditing(false);
+    const [reportItemMinimumLength, setReportItemMinimumLength] = useState(false);
+    const inputValueRef = useRef("");
+    const selectTestId = dataTestId ?? id;
+    const itemPattern = useMemo(() => {
+        if (!pattern) {
+            return null;
         }
-    };
-    return (jsxs(Modal, { ...modal, "data-testid": `${id}-edit-modal`, size: "medium", children: [jsx(ModalHeader, { heading: t("customfield.stringlistfield.addField.Heading", { label: label }), onClickClose: modal.close }), jsx(ModalBody, { children: jsx(TextBaseInput, { "data-testid": `${id}-edit-modal-input`, onChange: e => setInputValue(e.target.value), placeholder: t("customfield.stringlistfield.addField.InputPlaceholder", { label: label }), value: inputValue }) }), jsx(ModalFooter, { cancelLabel: t("customfield.stringlistfield.discard"), "data-testid": `${id}-edit-modal-footer`, onCancel: modal.close, primaryAction: handleAdd, primaryLabel: t("customfield.stringlistfield.add") })] }));
-};
-
-const StringListInput = ({ value: initialValue, onSave, onClickDelete, disabled, id, index }) => {
-    const [t] = useTranslation();
-    const [localValue, setLocalValue] = useState(initialValue);
-    useEffect(() => {
-        setLocalValue(initialValue);
-    }, [initialValue]);
-    const handleBlur = useCallback(() => {
-        if (localValue !== initialValue) {
-            onSave(localValue);
-        }
-    }, [localValue, initialValue, onSave]);
-    return (jsxs("div", { className: "flex items-center gap-2", children: [jsx(TextBaseInput, { "data-testid": `${id}-${index}-input`, disabled: disabled, onBlur: handleBlur, onChange: e => setLocalValue(e.target.value), value: localValue }), jsx(IconButton, { disabled: disabled, icon: jsx(Icon, { name: "Trash", size: "small" }), onClick: onClickDelete, title: t("customfield.stringlistfield.deleteField.PrimaryActionLabel"), variant: "secondary-danger" })] }));
-};
-/**
- * A custom field that displays a list of strings.
- */
-const StringListField = ({ defaultValue = [], label, description, disabled = false, validationRules, id, control, register, setValue, "data-testid": dataTestId, ...props }) => {
-    const [isEditing, setIsEditing] = useState(false);
-    const { confirm } = useConfirmationDialog();
-    const { t } = useTranslation();
+        try {
+            return new RegExp(pattern);
+        }
+        catch {
+            return null;
+        }
+    }, [pattern]);
     return (jsx(Controller, { control: control, defaultValue: defaultValue, name: id, render: ({ field }) => {
-            const handleRemoveValue = (index) => {
-                const newValues = [...field.value].filter((_, i) => i !== index);
-                field.onChange(newValues);
+            const values = Array.isArray(field.value) ? field.value : [];
+            const atCap = typeof maximumItems === "number" && values.length >= maximumItems;
+            const rejection = (() => {
+                const item = normalizeStringListItem(inputValue);
+                if (item === "") {
+                    return null;
+                }
+                if (typeof itemMaximumLength === "number" && item.length > itemMaximumLength) {
+                    return "itemMaximumLength";
+                }
+                if (reportItemMinimumLength && typeof itemMinimumLength === "number" && item.length < itemMinimumLength) {
+                    return "itemMinimumLength";
+                }
+                if (itemPattern && !itemPattern.test(item)) {
+                    return "pattern";
+                }
+                if (atCap) {
+                    return "maximumItems";
+                }
+                if (values.some(existing => existing.toLowerCase() === item.toLowerCase())) {
+                    return "duplicate";
+                }
+                return null;
+            })();
+            const standingHelpText = (() => {
+                if (!disabled && atCap && typeof maximumItems === "number") {
+                    return t("customfield.stringlistfield.maximumItems", { maximumItems });
+                }
+                return helpText ?? description;
+            })();
+            const resolvedHelpText = (() => {
+                switch (rejection) {
+                    case "duplicate":
+                        return t("customfield.stringlistfield.duplicate");
+                    case "maximumItems":
+                        return t("customfield.stringlistfield.maximumItems", { maximumItems });
+                    case "itemMaximumLength":
+                        return t("customfield.stringlistfield.itemMaximumLength", { itemMaximumLength });
+                    case "itemMinimumLength":
+                        return t("customfield.stringlistfield.itemMinimumLength", { itemMinimumLength });
+                    case "pattern":
+                        return t("customfield.stringlistfield.pattern");
+                    case null:
+                        return errorMessage ?? standingHelpText;
+                    default:
+                        return exhaustiveCheck(rejection);
+                }
+            })();
+            const selectedOptions = values.map(item => ({
+                label: item,
+                value: item,
+            }));
+            const tryAddItem = (raw) => {
+                if (disabled) {
+                    return;
+                }
+                const item = normalizeStringListItem(raw);
+                if (item === "") {
+                    return;
+                }
+                if (typeof itemMaximumLength === "number" && item.length > itemMaximumLength) {
+                    return;
+                }
+                if (typeof itemMinimumLength === "number" && item.length < itemMinimumLength) {
+                    return;
+                }
+                if (itemPattern && !itemPattern.test(item)) {
+                    return;
+                }
+                if (typeof maximumItems === "number" && values.length >= maximumItems) {
+                    return;
+                }
+                if (values.some(existing => existing.toLowerCase() === item.toLowerCase())) {
+                    return;
+                }
+                inputValueRef.current = "";
+                setInputValue("");
+                field.onChange([...values, item]);
             };
-            const handleFieldChange = (index, value) => {
-                const newValues = [...field.value];
-                newValues[index] = value;
-                field.onChange(newValues);
+            const onCreateOption = (raw) => {
+                tryAddItem(raw);
             };
-            const handleRemoveValueConfirmation = async (index) => {
-                const confirmResult = await confirm({
-                    title: t("customfield.stringlistfield.deleteField.Heading", { label: label }),
-                    message: t("customfield.stringlistfield.deleteField.Message", { label: label }),
-                    primaryActionLabel: t("customfield.stringlistfield.deleteField.PrimaryActionLabel"),
-                    secondaryActionLabel: t("customfield.stringlistfield.deleteField.SecondaryActionLabel"),
-                    primaryActionType: "primary-danger",
-                });
-                if (confirmResult === "PRIMARY") {
-                    handleRemoveValue(index);
+            const onSelectChange = (selected, actionMeta) => {
+                if (disabled || actionMeta.action === "create-option") {
+                    return;
+                }
+                const incoming = selected.map(option => option.value);
+                const kept = values.filter(existing => incoming.includes(existing));
+                const added = incoming.filter(next => !values.some(existing => existing.toLowerCase() === next.toLowerCase()));
+                if (added.length > 0 && typeof maximumItems === "number" && kept.length + added.length > maximumItems) {
+                    return;
                 }
+                field.onChange([...kept, ...added]);
             };
-            return (jsxs(Card, { ...props, className: "w-full", "data-testid": dataTestId, children: [jsx(CardHeader, { accessories: jsx(Tooltip, { label: description }), heading: label, headingVariant: "secondary" }), jsx(CardBody, { children: field.value.length === 0 ? (jsx(Text, { children: t("customfield.stringlistfield.noValuesAddedYet") })) : (jsx("div", { className: "flex flex-wrap gap-2", children: field.value.map((value, index) => (jsx(StringListInput, { disabled: disabled, id: id, index: index, onClickDelete: () => handleRemoveValueConfirmation(index), onSave: newValue => handleFieldChange(index, newValue), value: value }, `${id}-${index}`))) })) }), !disabled ? (jsx(CardFooter, { children: jsx(Button, { disabled: disabled, onClick: () => setIsEditing(true), variant: "secondary", children: t("customfield.stringlistfield.add", { label: label }) }) })) : null, jsx(AddStringListField, { id: id, isEditing: isEditing, label: label, onAdd: (newItem) => {
-                            field.onChange([...field.value, newItem]);
-                        }, setIsEditing: setIsEditing })] }));
+            const onKeyDown = (event) => {
+                const raw = inputValueRef.current;
+                const item = normalizeStringListItem(raw);
+                if (event.key === " " && item === "") {
+                    event.preventDefault();
+                    const next = `${raw} `;
+                    inputValueRef.current = next;
+                    setInputValue(next);
+                    return;
+                }
+                if (event.key !== "Enter") {
+                    return;
+                }
+                if (item === "") {
+                    if (raw !== "") {
+                        event.preventDefault();
+                        inputValueRef.current = "";
+                        setInputValue("");
+                    }
+                    return;
+                }
+                event.preventDefault();
+                if (typeof itemMinimumLength === "number" && item.length < itemMinimumLength) {
+                    setReportItemMinimumLength(true);
+                }
+                tryAddItem(raw);
+            };
+            const onInputChange = (nextValue, meta) => {
+                if (meta.action === "input-change") {
+                    setReportItemMinimumLength(false);
+                    inputValueRef.current = nextValue;
+                    setInputValue(nextValue);
+                    return nextValue;
+                }
+                const draft = inputValueRef.current;
+                const item = normalizeStringListItem(draft);
+                if (meta.action === "input-blur" &&
+                    item !== "" &&
+                    typeof itemMinimumLength === "number" &&
+                    item.length < itemMinimumLength) {
+                    setReportItemMinimumLength(true);
+                }
+                const isRejectedDraft = item !== "" &&
+                    ((typeof itemMaximumLength === "number" && item.length > itemMaximumLength) ||
+                        (typeof itemMinimumLength === "number" && item.length < itemMinimumLength) ||
+                        (itemPattern !== null && !itemPattern.test(item)) ||
+                        (typeof maximumItems === "number" && values.length >= maximumItems) ||
+                        values.some(existing => existing.toLowerCase() === item.toLowerCase()));
+                if (isRejectedDraft) {
+                    return draft;
+                }
+                if (meta.action === "input-blur" && item !== "") {
+                    tryAddItem(draft);
+                    return "";
+                }
+                inputValueRef.current = nextValue;
+                setInputValue(nextValue);
+                return nextValue;
+            };
+            return (jsx(FormGroup, { className: className, "data-testid": dataTestId ? `${dataTestId}-field` : undefined, helpAddon: typeof maximumItems === "number"
+                    ? t("customfield.stringlistfield.counter", { count: values.length, maximumItems })
+                    : undefined, helpText: resolvedHelpText, htmlFor: id, isInvalid: rejection !== null || Boolean(errorMessage), label: label, children: jsx(CreatableSelect, { "data-testid": selectTestId, disabled: disabled, hasError: rejection !== null || Boolean(errorMessage), hideSelectedOptions: false, inputId: id, inputValue: inputValue, isMulti: true, label: label, onChange: onSelectChange, onCreateOption: onCreateOption, onInputChange: onInputChange, onKeyDown: onKeyDown, options: selectedOptions, placeholder: t("customfield.stringlistfield.placeholder", { label }), value: selectedOptions }) }));
         }, rules: validationRules }));
 };
 
@@ -445,44 +550,11 @@ const getDropdownValidationRules = (_definition) => {
     return getDefaultValidationRules();
 };
 /**
- * Generates validation rules for a string list field.
- *
- * @param {GetStringListValidationRulesDefinition} definition - The definition of the string list field.
- * @returns {ValidationRules} The generated validation rules.
+ * String-list item limits are enforced when a value is added. React Hook Form's
+ * minLength, maxLength, and pattern rules apply to the array itself, so they are not used here.
  */
-const getStringListValidationRules = (definition) => {
-    const defaultRules = {};
-    const itemMinLength = definition.itemMinimumLength !== null && definition.itemMinimumLength !== undefined
-        ? {
-            minLength: {
-                value: definition.itemMinimumLength,
-                message: `minimum length for each item is ${definition.itemMinimumLength}`,
-            },
-        }
-        : undefined;
-    const itemMaxLength = definition.itemMaximumLength !== null && definition.itemMaximumLength !== undefined
-        ? {
-            maxLength: {
-                value: definition.itemMaximumLength,
-                message: `maximum length for each item is ${definition.itemMaximumLength}`,
-            },
-        }
-        : undefined;
-    const pattern = definition.pattern
-        ? {
-            pattern: {
-                value: RegExp(definition.pattern),
-                message: `Must match pattern: ${definition.pattern}`,
-            },
-        }
-        : undefined;
-    return definition.uiEditable
-        ? {
-            ...itemMaxLength,
-            ...itemMinLength,
-            ...pattern,
-        }
-        : defaultRules;
+const getStringListValidationRules = (_definition) => {
+    return {};
 };
 /**
  * Generates validation rules for a date field.
@@ -607,8 +679,8 @@ const useCustomFieldResolver = ({ field, definition, register, setValue, formSta
             return (jsx(DateCustomField, { "data-testid": `${key}`, defaultValue: value, disabled: !isEditableCombined, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title || "", readOnly: !isEditableCombined, register: validation.register, setValue: validation.setValue, title: title || "", validationRules: rules }));
         }
         case "StringListFieldDefinition": {
-            const rules = getStringListValidationRules(def);
-            return (jsx(StringListField, { control: control, "data-testid": key, defaultValue: value ?? undefined, description: description ?? "", disabled: !isEditableCombined, errorMessage: errorMessage, id: uniqueIdentifier, label: title || "", register: validation.register, setValue: validation.setValue, validationRules: rules }));
+            const rules = getStringListValidationRules();
+            return (jsx(StringListField, { control: control, "data-testid": key, defaultValue: value ?? undefined, description: description ?? "", disabled: !isEditableCombined, errorMessage: errorMessage, id: uniqueIdentifier, itemMaximumLength: def.itemMaximumLength, itemMinimumLength: def.itemMinimumLength, label: title || "", maximumItems: def.maximumItems, pattern: def.pattern, validationRules: rules }));
         }
         case "JsonFieldDefinition":
         case "FileFieldDefinition": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/custom-field-components",
-  "version": "2.23.13",
+  "version": "2.23.14",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,12 +8,10 @@
   },
   "dependencies": {
     "react-select": "^5.10.2",
-    "@trackunit/react-form-components": "2.10.7",
+    "@trackunit/react-form-components": "2.10.8",
     "@trackunit/shared-utils": "1.19.4",
-    "@trackunit/custom-field-api": "2.24.13",
+    "@trackunit/custom-field-api": "2.24.14",
     "@trackunit/react-components": "3.8.1",
-    "@trackunit/react-modal": "2.10.7",
-    "@trackunit/react-core-hooks": "1.25.4",
     "@trackunit/i18n-library-translation": "2.8.4",
     "@trackunit/iris-app-runtime-core-api": "1.21.4"
   },

package/src/StringListField/StringListField.d.ts

@@ -1,20 +1,22 @@
 import { CommonProps } from "@trackunit/react-components";
 import { ReactElement } from "react";
-import { Control, FieldValues, RegisterOptions, UseFormRegister, UseFormSetValue } from "react-hook-form";
+import { Control, FieldValues, RegisterOptions } from "react-hook-form";
 export interface StringListFieldProps extends CommonProps {
     defaultValue?: Array<string>;
     label: string;
     helpText?: string;
     errorMessage?: string;
-    register: UseFormRegister<FieldValues>;
-    setValue: UseFormSetValue<FieldValues>;
     description?: string;
     disabled?: boolean;
     validationRules: RegisterOptions;
     id: string;
     control: Control<FieldValues>;
+    itemMinimumLength?: number | null;
+    itemMaximumLength?: number | null;
+    maximumItems?: number | null;
+    pattern?: string | null;
 }
 /**
- * A custom field that displays a list of strings.
+ * A labeled multi-value field for string-list custom fields.
  */
-export declare const StringListField: ({ defaultValue, label, description, disabled, validationRules, id, control, register, setValue, "data-testid": dataTestId, ...props }: StringListFieldProps) => ReactElement;
+export declare const StringListField: ({ defaultValue, label, description, helpText, errorMessage, disabled, validationRules, id, control, "data-testid": dataTestId, itemMinimumLength, itemMaximumLength, maximumItems, pattern, className, }: StringListFieldProps) => ReactElement;

package/src/getValidationRules.d.ts

@@ -58,12 +58,10 @@ interface GetStringListValidationRulesDefinition extends CommonValidationRulesDe
     maximumItems?: number | null;
 }
 /**
- * Generates validation rules for a string list field.
- *
- * @param {GetStringListValidationRulesDefinition} definition - The definition of the string list field.
- * @returns {ValidationRules} The generated validation rules.
+ * String-list item limits are enforced when a value is added. React Hook Form's
+ * minLength, maxLength, and pattern rules apply to the array itself, so they are not used here.
  */
-export declare const getStringListValidationRules: (definition: GetStringListValidationRulesDefinition) => ValidationRules;
+export declare const getStringListValidationRules: (_definition: GetStringListValidationRulesDefinition) => ValidationRules;
 /**
  * Generates validation rules for a date field.
  *

package/src/StringListField/AddStringListField.d.ts

@@ -1,13 +0,0 @@
-import { ReactElement } from "react";
-interface AddStringListFieldProps {
-    id: string;
-    label: string;
-    isEditing: boolean;
-    setIsEditing: (isEditing: boolean) => void;
-    onAdd: (newItem: string) => void;
-}
-/**
- * Modal for adding a new string list field
- */
-export declare const AddStringListField: ({ id, label, isEditing, setIsEditing, onAdd, }: AddStringListFieldProps) => ReactElement;
-export {};