@trackunit/custom-field-components 1.3.226 → 1.3.229

package/index.cjs.js

@@ -221,7 +221,13 @@ const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, d
  * Modal for adding a new string list field
  */
 const AddStringListField = ({ id, label, isEditing, setIsEditing, onAdd }) => {
-    const { Modal } = reactModal.useModal();
+    const modal = reactModal.useModal({
+        isOpen: isEditing,
+        onClose: () => {
+            setInputValue("");
+            setIsEditing(false);
+        },
+    });
     const [inputValue, setInputValue] = react.useState("");
     const { t } = useTranslation();
     const handleAdd = () => {
@@ -231,11 +237,7 @@ const AddStringListField = ({ id, label, isEditing, setIsEditing, onAdd }) => {
             setIsEditing(false);
         }
     };
-    const handleDiscard = () => {
-        setInputValue("");
-        setIsEditing(false);
-    };
-    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") })] })] }));
+    return (jsxRuntime.jsxs(reactModal.Modal, { ...modal, className: "max-w-lg", dataTestId: `${id}-edit-modal`, children: [jsxRuntime.jsx(reactComponents.CardHeader, { heading: t("customfield.stringlistfield.addField.Heading", { label: label }), onClose: modal.close }), 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: modal.close, 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 }) => {

package/index.esm.js

@@ -7,7 +7,7 @@ import { useState, useEffect, useCallback, createElement, useMemo } from 'react'
 import { Controller, useWatch } from 'react-hook-form';
 import { CardHeader, CardBody, CardFooter, Button, Card, Tooltip, Text, IconButton, Icon } from '@trackunit/react-components';
 import { useConfirmationDialog } from '@trackunit/react-core-hooks';
-import { useModal } from '@trackunit/react-modal';
+import { useModal, Modal } from '@trackunit/react-modal';
 
 var defaultTranslations = {
 	"customfield.stringlistfield.add": "Add",
@@ -219,7 +219,13 @@ const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, d
  * Modal for adding a new string list field
  */
 const AddStringListField = ({ id, label, isEditing, setIsEditing, onAdd }) => {
-    const { Modal } = useModal();
+    const modal = useModal({
+        isOpen: isEditing,
+        onClose: () => {
+            setInputValue("");
+            setIsEditing(false);
+        },
+    });
     const [inputValue, setInputValue] = useState("");
     const { t } = useTranslation();
     const handleAdd = () => {
@@ -229,11 +235,7 @@ const AddStringListField = ({ id, label, isEditing, setIsEditing, onAdd }) => {
             setIsEditing(false);
         }
     };
-    const handleDiscard = () => {
-        setInputValue("");
-        setIsEditing(false);
-    };
-    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") })] })] }));
+    return (jsxs(Modal, { ...modal, className: "max-w-lg", dataTestId: `${id}-edit-modal`, children: [jsx(CardHeader, { heading: t("customfield.stringlistfield.addField.Heading", { label: label }), onClose: modal.close }), 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: modal.close, 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 }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/custom-field-components",
-  "version": "1.3.226",
+  "version": "1.3.229",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -12,16 +12,16 @@
     "react-select": "^5.10.0",
     "@testing-library/react": "16.2.0",
     "jest-fetch-mock": "^3.0.3",
-    "@trackunit/react-form-components": "1.3.207",
-    "@trackunit/shared-utils": "1.5.150",
-    "@trackunit/custom-field-api": "1.3.182",
-    "@trackunit/iris-app-runtime-core": "1.4.161",
-    "@trackunit/react-components": "1.4.182",
-    "@trackunit/react-modal": "1.3.199",
-    "@trackunit/react-core-hooks": "1.3.164",
-    "@trackunit/i18n-library-translation": "1.3.171",
-    "@trackunit/iris-app-runtime-core-api": "1.3.161",
-    "@trackunit/react-test-setup": "1.0.40"
+    "@trackunit/react-form-components": "1.3.210",
+    "@trackunit/shared-utils": "1.5.151",
+    "@trackunit/custom-field-api": "1.3.185",
+    "@trackunit/iris-app-runtime-core": "1.4.162",
+    "@trackunit/react-components": "1.4.185",
+    "@trackunit/react-modal": "1.3.202",
+    "@trackunit/react-core-hooks": "1.3.165",
+    "@trackunit/i18n-library-translation": "1.3.172",
+    "@trackunit/iris-app-runtime-core-api": "1.3.162",
+    "@trackunit/react-test-setup": "1.0.41"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",