@trackunit/custom-field-components 1.0.31 → 1.0.32

package/index.cjs.js

@@ -239,6 +239,18 @@ const AddStringListField = ({ id, label, isEditing, setIsEditing, onAdd }) => {
     return (jsxRuntime.jsxs(Modal, { className: "max-w-lg", dataTestId: `${id}-edit-modal`, isOpen: isEditing, onDismissClick: handleDiscard, children: [jsxRuntime.jsx(reactComponents.CardHeader, { heading: t("customfield.stringlistfield.addField.Heading", { label: label }), onClose: handleDiscard }), jsxRuntime.jsx(reactComponents.CardBody, { children: jsxRuntime.jsx(reactFormComponents.TextInput, { dataTestId: `${id}-edit-modal-input`, onChange: e => setInputValue(e.target.value), placeholder: t("customfield.stringlistfield.addField.InputPlaceholder", { label: label }), value: inputValue }) }), jsxRuntime.jsxs(reactComponents.CardFooter, { children: [jsxRuntime.jsx(reactComponents.Button, { dataTestId: `${id}-edit-modal-discard-button`, onClick: handleDiscard, variant: "secondary", children: t("customfield.stringlistfield.discard") }), jsxRuntime.jsx(reactComponents.Button, { dataTestId: `${id}-edit-modal-add-button`, onClick: handleAdd, children: t("customfield.stringlistfield.add") })] })] }));
 };
 
+const StringListInput = ({ value: initialValue, onSave, onDelete, disabled, id, index }) => {
+    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.TextInput, { "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: onDelete, variant: "secondary-danger" })] }));
+};
 /**
  * A custom field that displays a list of strings.
  */
@@ -268,7 +280,7 @@ const StringListField = ({ defaultValue = [], label, description, disabled, vali
                     handleRemoveValue(index);
                 }
             };
-            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.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx(reactFormComponents.TextInput, { "data-testid": `${id}-${index}-input`, disabled: disabled, onChange: e => handleFieldChange(index, e.target.value), value: value }), jsxRuntime.jsx(reactComponents.IconButton, { disabled: disabled, icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Trash", size: "small" }), onClick: () => handleRemoveValueConfirmation(index), variant: "secondary-danger" })] }, `${id}-${index}-${value}`))) })) }), !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) => {
+            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, onDelete: () => 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 })] }));
         }, rules: validationRules }));

package/index.esm.js

@@ -237,6 +237,18 @@ const AddStringListField = ({ id, label, isEditing, setIsEditing, onAdd }) => {
     return (jsxs(Modal, { className: "max-w-lg", dataTestId: `${id}-edit-modal`, isOpen: isEditing, onDismissClick: handleDiscard, children: [jsx(CardHeader, { heading: t("customfield.stringlistfield.addField.Heading", { label: label }), onClose: handleDiscard }), jsx(CardBody, { children: jsx(TextInput, { dataTestId: `${id}-edit-modal-input`, onChange: e => setInputValue(e.target.value), placeholder: t("customfield.stringlistfield.addField.InputPlaceholder", { label: label }), value: inputValue }) }), jsxs(CardFooter, { children: [jsx(Button, { dataTestId: `${id}-edit-modal-discard-button`, onClick: handleDiscard, variant: "secondary", children: t("customfield.stringlistfield.discard") }), jsx(Button, { dataTestId: `${id}-edit-modal-add-button`, onClick: handleAdd, children: t("customfield.stringlistfield.add") })] })] }));
 };
 
+const StringListInput = ({ value: initialValue, onSave, onDelete, disabled, id, index }) => {
+    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(TextInput, { "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: onDelete, variant: "secondary-danger" })] }));
+};
 /**
  * A custom field that displays a list of strings.
  */
@@ -266,7 +278,7 @@ const StringListField = ({ defaultValue = [], label, description, disabled, vali
                     handleRemoveValue(index);
                 }
             };
-            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) => (jsxs("div", { className: "flex items-center gap-2", children: [jsx(TextInput, { "data-testid": `${id}-${index}-input`, disabled: disabled, onChange: e => handleFieldChange(index, e.target.value), value: value }), jsx(IconButton, { disabled: disabled, icon: jsx(Icon, { name: "Trash", size: "small" }), onClick: () => handleRemoveValueConfirmation(index), variant: "secondary-danger" })] }, `${id}-${index}-${value}`))) })) }), !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) => {
+            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, onDelete: () => 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 })] }));
         }, rules: validationRules }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/custom-field-components",
-  "version": "1.0.31",
+  "version": "1.0.32",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {