dynamic-modal 1.1.24 → 1.1.25

package/README.md

@@ -441,6 +441,34 @@ dynamically.
 }
 ```
 
+### `watcher`
+
+Use `watcher` when you want to display a derived read-only value built from
+other fields in the same modal.
+
+`watcher` listens to the fields listed in `watchList`, joins their current
+values, and renders the result using your custom `Input` component in disabled
+mode.
+
+Example:
+
+```ts
+{
+  elementType: 'watcher',
+  label: 'Full name preview',
+  watchList: ['firstName', 'middleName', 'lastName'],
+  style: {
+    width: '100%',
+  },
+}
+```
+
+Typical use cases:
+
+- preview a full name from multiple inputs
+- build a quick summary field for the user
+- show a composed display value without storing it as a real form field
+
 ## Advanced conditions with async actions
 
 `renderIf` and `enableIf` can also use async logic instead of static value maps.
@@ -582,6 +610,40 @@ reservedData: {
 
 That data will be merged into the object returned by `out`.
 
+### 6. Compose a read-only value with `watcher`
+
+Use `watcher` when you want the modal to display a value derived from multiple
+fields while the user types.
+
+```ts
+fields: [
+  {
+    elementType: 'input',
+    label: 'First name',
+    name: 'firstName',
+    validation: { required: true, message: 'Required' },
+  },
+  {
+    elementType: 'input',
+    label: 'Last name',
+    name: 'lastName',
+    validation: { required: true, message: 'Required' },
+  },
+  {
+    elementType: 'watcher',
+    label: 'Preview',
+    watchList: ['firstName', 'lastName'],
+    style: { width: '100%' },
+  },
+];
+```
+
+Important notes:
+
+- `watcher` is display-only
+- it does not submit its own value in the modal result
+- it is useful for previews, concatenations, and human-readable summaries
+
 ## Configuration reference
 
 ### Modal-level config
@@ -616,6 +678,12 @@ Most form fields share:
 - `renderIf`
 - `enableIf`
 
+`watcher` uses:
+
+- `label`
+- `style`
+- `watchList`
+
 Validation supports:
 
 - `required`

package/dist/components/make-select/make-select.js

@@ -48,14 +48,17 @@ const MakeSelect = ({ element, control, watch, setValue, unregister, }) => {
                     }
                 });
             }
-            if (elementLiveData) {
+            const shouldResolveLiveData = Boolean(elementLiveData?.condition?.includes(name));
+            if (shouldResolveLiveData) {
                 setLiveSearching(true);
                 checkLiveData(formData, { name, type })
                     .then((options) => {
                     if (options === undefined || options === null)
                         return;
                     setLiveData(options);
-                    setValue(elementName, options);
+                    setValue(elementName, inputProps.isMulti
+                        ? inputProps.defaultValue ?? []
+                        : inputProps.defaultValue ?? '');
                 })
                     .finally(() => {
                     setLiveSearching(false);

package/dist/src/components/make-select/make-select.js

@@ -38,7 +38,9 @@ const MakeSelect = ({ element, control, watch, setValue, unregister, }) => {
         setLiveSearching,
         unregister,
         setValue,
-        liveDataResetValue: inputProps.defaultValue ?? [],
+        liveDataResetValue: inputProps.isMulti
+            ? (inputProps.defaultValue ?? [])
+            : (inputProps.defaultValue ?? ''),
     });
     if (!render)
         return null;

package/dist/src/hooks/use-conditional-field.js

@@ -21,7 +21,8 @@ const useConditionalField = ({ watch, elementName, renderIf, enableIf, liveDataC
                 setRender(renderStatus);
             }
         }
-        if (liveDataConfig && setLiveData) {
+        const shouldResolveLiveData = Boolean(liveDataConfig?.condition?.includes(meta.name));
+        if (shouldResolveLiveData && setLiveData) {
             const requestId = ++liveRequestId.current;
             setLiveSearching?.(true);
             try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dynamic-modal",
-  "version": "1.1.24",
+  "version": "1.1.25",
   "description": "The dynamic-modal is a solution of creation different modals into project using a json configuration file",
   "type": "module",
   "main": "./dist/index.js",