@dartech/arsenal-ui 1.3.94 → 1.3.96

package/index.js

@@ -9,9 +9,9 @@ import DialogTitle from '@mui/material/DialogTitle';
 import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
 import { __rest, __awaiter } from 'tslib';
-import { useController, useWatch, useFormContext, Controller, useFieldArray } from 'react-hook-form';
+import { useController, useWatch, useFormContext, Controller, useFieldArray, useForm } from 'react-hook-form';
 import TextField from '@mui/material/TextField';
-import React, { useRef, useEffect, useState, useCallback, useMemo, createElement, forwardRef, createContext, useContext, memo, Suspense } from 'react';
+import React, { useRef, useEffect, useState, useCallback, useMemo, createElement, forwardRef, createContext, useContext, memo, useImperativeHandle, Suspense } from 'react';
 import MenuItem from '@mui/material/MenuItem';
 import SvgIcon from '@mui/material/SvgIcon';
 import IconButton from '@mui/material/IconButton';
@@ -1047,15 +1047,25 @@ const ControlAceEditor = /*#__PURE__*/forwardRef((_a, ref) => {
       parseValue
     } = _a,
     otherProps = __rest(_a, ["control", "name", "mode", "label", "width", "height", "readOnly", "required", "validateJson", "hideErrorMessage", "fontSize", "validate", "parseValue"]);
-  const {
-    setError,
-    clearErrors
-  } = useFormContext();
   const _b = useController({
       control,
       name,
       rules: {
-        required: required && 'Please, fill this field'
+        required: required && 'Please, fill this field',
+        validate: val => {
+          console.log('_____', val);
+          if (val && validateJson) {
+            try {
+              JSON.parse(val);
+              return true;
+              // clearErrors(name);
+            } catch (error) {
+              console.error(error);
+              return 'Invalid JSON';
+            }
+          }
+          return true;
+        }
       }
     }),
     _c = _b.field,
@@ -1070,30 +1080,13 @@ const ControlAceEditor = /*#__PURE__*/forwardRef((_a, ref) => {
         error
       }
     } = _b;
+  console.log(error);
   const extensions = useMemo(() => ({
     json: [langs.json()],
     javascript: [langs.javascript()],
     python: [langs.python()]
   }), []);
   const handleChange = useCallback(value => {
-    if (!value && required) {
-      setError(name, {
-        message: 'Required field'
-      });
-    } else {
-      clearErrors(name);
-    }
-    if (validateJson) {
-      try {
-        JSON.parse(value);
-        clearErrors(name);
-      } catch (error) {
-        console.error(error);
-        setError(name, {
-          message: 'Invalid JSON'
-        });
-      }
-    }
     if (parseValue) {
       try {
         const val = JSON.parse(value);
@@ -1104,7 +1097,7 @@ const ControlAceEditor = /*#__PURE__*/forwardRef((_a, ref) => {
     } else {
       onChange(value);
     }
-  }, [setError, clearErrors, onChange, name, parseValue, validateJson, required]);
+  }, [onChange, parseValue]);
   return jsxs(Box, Object.assign({
     display: "flex",
     flexDirection: "column",
@@ -1518,6 +1511,7 @@ const formatPropertyValue = (propertyType, value, params) => {
     return null;
   }
   let parsedValue = value;
+  // console.log(value);
   switch (propertyType) {
     case PropertyType.BOOLEAN:
       if (value) {
@@ -1537,8 +1531,10 @@ const formatPropertyValue = (propertyType, value, params) => {
     case PropertyType.DATE:
     case PropertyType.DATE_TIME:
     case PropertyType.TIME:
-      parsedValue = format(new Date(value.toString()), params.formatText);
-      break;
+      {
+        if (value) parsedValue = format(new Date(value.toString()), params.formatText);
+        break;
+      }
     case PropertyType.JSON:
     case PropertyType.ANY:
       try {
@@ -2281,15 +2277,15 @@ const ControlArrayInput = ({
   var _a, _b, _c;
   const [localValue, setLoacalValue] = useState('');
   const {
-    register,
-    setValue,
-    setError,
-    clearErrors,
+    field: {
+      onChange,
+      value: values
+    },
+    // fieldState: { error },
     formState: {
       errors
     }
-  } = useFormContext();
-  const values = useWatch({
+  } = useController({
     control,
     name
   });
@@ -2298,25 +2294,18 @@ const ControlArrayInput = ({
       value
     } = e.target;
     setLoacalValue(value);
-    if (values.includes(value)) {
-      setError(name, {
-        type: 'custom',
-        message: 'This value already exists'
-      });
-    } else {
-      clearErrors(name);
-    }
-  }, [values, name, setError, clearErrors]);
+    if (Array.isArray(values) && values.includes(value)) ;
+  }, [values]);
   const handleAdd = useCallback(() => {
     var _a;
     if (localValue && !((_a = errors[name]) === null || _a === void 0 ? void 0 : _a.message)) {
-      setValue(name, [...values, localValue]);
+      onChange([...(values !== null && values !== void 0 ? values : []), localValue]);
       setLoacalValue('');
     }
-  }, [localValue, setValue, values, name, errors]);
+  }, [localValue, onChange, values, name, errors]);
   const handleDelete = useCallback(value => {
-    setValue(name, values.filter(code => code !== value));
-  }, [values, name, setValue]);
+    onChange(values.filter(code => code !== value));
+  }, [values, onChange]);
   const handleKeyDown = useCallback(e => {
     if (e.key === 'Enter' || e.keyCode === 13) {
       e.stopPropagation();
@@ -2340,7 +2329,7 @@ const ControlArrayInput = ({
       display: "flex",
       flexWrap: "wrap"
     }, {
-      children: values.map((value, index) => jsx(Chip, {
+      children: values === null || values === void 0 ? void 0 : values.map((value, index) => jsx(Chip, {
         sx: {
           mr: 1,
           mb: 1
@@ -2351,7 +2340,7 @@ const ControlArrayInput = ({
       }, index))
     })), jsx("input", Object.assign({
       type: "hidden"
-    }, register(name, {
+    }, control.register(name, {
       required: required && 'Please, add a value'
     }))), jsx(TextField, {
       fullWidth: true,
@@ -3251,11 +3240,10 @@ const InfoItem = ({
 
 const roundingModes = Object.values(RoundingMode).sort((a, b) => a.localeCompare(b));
 const BigDecimalPropertyFields = ({
-  propertyFieldName
+  propertyFieldName,
+  control
 }) => {
-  const {
-    control
-  } = useFormContext();
+  // const { control } = useFormContext();
   return jsxs(Fragment, {
     children: [jsx(Grid, {
       children: jsx(ControlNumberInput, {
@@ -3281,11 +3269,9 @@ var BigDecimalPropertyFields$1 = BigDecimalPropertyFields;
 
 const DateAdditionalFields = ({
   propertyFieldName,
+  control,
   defaultValue: _defaultValue = ''
 }) => {
-  const {
-    control
-  } = useFormContext();
   return jsx(Grid, {
     children: jsx(ControlInput, {
       required: true,
@@ -3397,6 +3383,7 @@ const defaultPropertyValues$1 = {
   uiSettings: ''
 };
 const EntityAdditionalFields = ({
+  control,
   parentPropertyFieldName,
   entityDefinition: _entityDefinition = false,
   globalParameter: _globalParameter = false,
@@ -3404,15 +3391,19 @@ const EntityAdditionalFields = ({
   entityReferenceValueComponent,
   fileReferenceValueComponent
 }) => {
+  const propsRef = useRef(null);
   const {
+    field: {
+      onChange
+    }
+  } = useController({
     control,
-    getValues,
-    trigger
-  } = useFormContext();
+    name: `${parentPropertyFieldName}.properties`
+  });
   const properties = useWatch({
     control,
     name: `${parentPropertyFieldName}.properties`,
-    defaultValue: getValues(`${parentPropertyFieldName}.properties`) || []
+    defaultValue: []
   });
   const parentPropertyName = useWatch({
     control,
@@ -3429,21 +3420,26 @@ const EntityAdditionalFields = ({
   const parametersModal = useToggle();
   const [focusedProperty, setFocusedProperty] = useState(0);
   const handleAddParameter = useCallback(() => {
-    if (fields.length > 0) {
+    if ((properties === null || properties === void 0 ? void 0 : properties.length) > 0) {
       append(defaultPropertyValues$1);
-      const propertyIndex = fields.length;
+      const propertyIndex = properties.length;
       setFocusedProperty(propertyIndex);
     } else {
       append(defaultPropertyValues$1);
     }
-  }, [fields, append]);
+    propsRef.current.addProperty();
+  }, [properties, append]);
   const handleStepperClick = index => setFocusedProperty(index);
   const handleSubmitClick = () => __awaiter(void 0, void 0, void 0, function* () {
-    const isValid = yield trigger(`${parentPropertyFieldName}.properties`);
-    if (isValid) {
-      parametersModal.onClose();
-    }
+    // console.log(propsRef.current.getProperties());
+    onChange(propsRef.current.getProperties());
+    // const isValid = await trigger(`${parentPropertyFieldName}.properties`);
+    parametersModal.onClose();
+    // if (isValid) {
+    //   parametersModal.onClose();
+    // }
   });
+
   return jsxs(Fragment, {
     children: [jsx(Grid, {
       children: jsx(Typography, Object.assign({
@@ -3502,7 +3498,7 @@ const EntityAdditionalFields = ({
                 paddingLeft: '4px'
               }
             }, {
-              children: properties.map((property, index) => jsxs(Step, Object.assign({
+              children: fields.map((property, index) => jsxs(Step, Object.assign({
                 onClick: () => handleStepperClick(index),
                 style: {
                   cursor: 'pointer'
@@ -3516,7 +3512,7 @@ const EntityAdditionalFields = ({
                     wordBreak: 'break-word'
                   }
                 }, {
-                  children: property.name || '(no name)'
+                  children: property['name'] || '(no name)'
                 })), jsx(StepContent, {})]
               }), index))
             })), jsx(Button, Object.assign({
@@ -3539,10 +3535,12 @@ const EntityAdditionalFields = ({
             }
           }, {
             children: jsx(CreatePropertiesList, {
+              ref: propsRef,
+              properties: fields,
               hideAddButton: true,
-              entityPropFields: fields,
+              // entityPropFields={properties as any}
               parentRemove: remove,
-              parentFieldName: parentPropertyFieldName,
+              // parentFieldName={parentPropertyFieldName}
               focusOnIndex: focusedProperty,
               entityDefinition: _entityDefinition,
               globalParameter: _globalParameter,
@@ -3568,14 +3566,12 @@ var EntityAdditionalFields$1 = EntityAdditionalFields;
 
 const EntityReferencePropertyFields = ({
   propertyFieldName,
+  control,
   sources: _sources = [{
     label: 'Arsenal Entities',
     value: 'ARSENAL_ENTITIES'
   }]
 }) => {
-  const {
-    control
-  } = useFormContext();
   return jsxs(Fragment, {
     children: [jsx(Grid, {
       children: jsx(ControlSelect, {
@@ -3619,102 +3615,8 @@ const EntityReferencePropertyFields = ({
 };
 var EntityReferencePropertyFields$1 = EntityReferencePropertyFields;
 
-const StringPropertyFields = ({
-  propertyFieldName
-}) => {
-  const fieldName = useMemo(() => `${propertyFieldName}.restrictedValues`, [propertyFieldName]);
-  const {
-    control,
-    setValue,
-    getValues
-  } = useFormContext();
-  const restrictedValues = useWatch({
-    control,
-    name: fieldName,
-    defaultValue: getValues(`${propertyFieldName}.restrictedValues`) || []
-  });
-  const [inputValue, setInputValue] = useState('');
-  const [error, setError] = useState('');
-  const handleDelete = useCallback(index => {
-    setValue(fieldName, removeArrayItem(restrictedValues, index));
-  }, [restrictedValues, fieldName, setValue]);
-  const handleAddValue = () => {
-    if (inputValue) {
-      setValue(fieldName, [...restrictedValues, inputValue]);
-      setInputValue('');
-    }
-  };
-  const handleInputChange = e => {
-    const {
-      value
-    } = e.target;
-    setInputValue(value);
-    if (restrictedValues.includes(value)) {
-      setError('This value already exists');
-    } else {
-      setError('');
-    }
-  };
-  const handleKeyDown = e => {
-    if (e.key === 'Enter') {
-      handleAddValue();
-    }
-  };
-  return jsxs(Fragment, {
-    children: [jsx(Grid, {
-      children: jsx(Typography, Object.assign({
-        variant: "h6"
-      }, {
-        children: "Restricted Values"
-      }))
-    }), !!(restrictedValues === null || restrictedValues === void 0 ? void 0 : restrictedValues.length) && jsx(Grid, {
-      children: jsx(Box, Object.assign({
-        display: "flex",
-        flexWrap: "wrap"
-      }, {
-        children: restrictedValues.map((value, index) => jsx(Chip, {
-          sx: {
-            mr: 1
-          },
-          variant: "outlined",
-          label: value,
-          onDelete: () => handleDelete(index)
-        }, index))
-      }))
-    }), jsx(Grid, {
-      children: jsx(TextField, {
-        fullWidth: true,
-        variant: "outlined",
-        size: "small",
-        label: "Add restricted value",
-        value: inputValue,
-        onChange: handleInputChange,
-        error: !!error,
-        helperText: error,
-        name: "restrictedValues",
-        inputProps: {
-          onKeyDown: handleKeyDown
-        },
-        InputProps: {
-          endAdornment: jsx(IconButton, Object.assign({
-            size: "small",
-            onClick: handleAddValue,
-            disabled: !!error
-          }, {
-            children: jsx(SvgIcon, {
-              children: jsx("path", {
-                d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-              })
-            })
-          }))
-        }
-      })
-    })]
-  });
-};
-var StringPropertyFields$1 = StringPropertyFields;
-
 const PropertyAdditionalFields = ({
+  control,
   propertyType,
   propertyFieldName,
   entityDefinition: _entityDefinition = false,
@@ -3725,35 +3627,43 @@ const PropertyAdditionalFields = ({
 }) => {
   switch (propertyType) {
     case PropertyType.STRING:
-      return jsx(StringPropertyFields$1, {
-        propertyFieldName: propertyFieldName
+      return jsx(ControlArrayInput, {
+        name: `${propertyFieldName}.restrictedValues`,
+        control: control,
+        label: "Restricted Values"
       });
     case PropertyType.BIG_DECIMAL:
       return jsx(BigDecimalPropertyFields$1, {
-        propertyFieldName: propertyFieldName
+        propertyFieldName: propertyFieldName,
+        control: control
       });
     case PropertyType.DATE:
       return jsx(DateAdditionalFields$1, {
+        control: control,
         propertyFieldName: propertyFieldName,
         defaultValue: DATE_DEFAULT_FORMAT
       });
     case PropertyType.TIME:
       return jsx(DateAdditionalFields$1, {
+        control: control,
         propertyFieldName: propertyFieldName,
         defaultValue: TIME_DEFAULT_FORMAT
       });
     case PropertyType.DATE_TIME:
       return jsx(DateAdditionalFields$1, {
+        control: control,
         propertyFieldName: propertyFieldName,
         defaultValue: DATE_TIME_DEFAULT_FORMAT
       });
     case PropertyType.ENTITY_REFERENCE:
       return jsx(EntityReferencePropertyFields$1, {
+        control: control,
         propertyFieldName: propertyFieldName,
         sources: entityReferenceDefinitionSources
       });
     case PropertyType.ENTITY:
       return jsx(EntityAdditionalFields$1, {
+        control: control,
         parentPropertyFieldName: propertyFieldName,
         globalParameter: _globalParameter,
         entityDefinition: _entityDefinition,
@@ -3767,14 +3677,12 @@ const PropertyAdditionalFields = ({
 };
 
 const StringValueField = ({
+  control,
   name,
   label,
   required,
   restrictedValues
 }) => {
-  const {
-    control
-  } = useFormContext();
   const {
     field: {
       onChange,
@@ -3993,6 +3901,7 @@ const PropertyWidget = ({
       });
     case PropertyType.STRING:
       return jsx(StringValueField$1, {
+        control: control,
         name: name,
         label: label,
         restrictedValues: property.restrictedValues
@@ -4006,7 +3915,8 @@ const PropertyWidget = ({
       } else {
         return jsx(StringValueField$1, {
           name: name,
-          label: label
+          label: label,
+          control: control
         });
       }
     case PropertyType.FILE:
@@ -4021,7 +3931,8 @@ const PropertyWidget = ({
       } else {
         return jsx(StringValueField$1, {
           name: name,
-          label: label
+          label: label,
+          control: control
         });
       }
     case PropertyType.ANY:
@@ -4326,12 +4237,6 @@ const PropertyFiller = ({
       entityReferenceDefinitionSources: entityReferenceDefinitionSources,
       entityReferenceValueComponent: entityReferenceValueComponent,
       fileReferenceValueComponent: fileReferenceValueComponent
-    }), fillOption === 'dem_builder' && jsx(CreateDefinition, {
-      title: "JSON",
-      definitionFieldName: name,
-      entityReferenceDefinitionSources: entityReferenceDefinitionSources,
-      entityReferenceValueComponent: entityReferenceValueComponent,
-      fileReferenceValueComponent: fileReferenceValueComponent
     }), error && jsx(FormHelperText, Object.assign({
       error: true
     }, {
@@ -4594,6 +4499,7 @@ const MultiplePropertyFiller = ({
 };
 
 const PropertyValueField = ({
+  control,
   propertyFieldName,
   name,
   label: _label = '',
@@ -4602,9 +4508,7 @@ const PropertyValueField = ({
   entityReferenceValueComponent,
   fileReferenceValueComponent
 }) => {
-  const {
-    control
-  } = useFormContext();
+  // const { control } = useFormContext();
   const propertyType = useWatch({
     control,
     name: `${propertyFieldName}.propertyType`
@@ -5060,7 +4964,10 @@ const propertyTypes = Object.values(PropertyType).sort((a, b) => a.localeCompare
   value: propType,
   label: propType.replace('_', ' ').toLowerCase().replace(/(^\w)|([-\s]\w)/g, c => c.toUpperCase())
 }));
-const CreatePropertyFormFields = ({
+const CreatePropertyFormFields = /*#__PURE__*/memo(({
+  setValue,
+  control,
+  // watch,
   propertyFieldName,
   entityDefinition: _entityDefinition = false,
   globalParameter: _globalParameter = false,
@@ -5070,11 +4977,8 @@ const CreatePropertyFormFields = ({
   fileReferenceValueComponent
 }) => {
   var _a;
-  const {
-    control,
-    setValue,
-    watch
-  } = useFormContext();
+  // const { control, setValue, watch } = useFormContext();
+  // console.log(propertyFieldName);
   const propertyType = useWatch({
     control,
     name: `${propertyFieldName}.propertyType`
@@ -5087,6 +4991,7 @@ const CreatePropertyFormFields = ({
     control,
     name: `${propertyFieldName}.isRequired`
   });
+  // console.log('render - ', propertyFieldName);
   const {
     customCheckboxes,
     customFields
@@ -5191,6 +5096,7 @@ const CreatePropertyFormFields = ({
           })
         }))
       }), jsx(PropertyAdditionalFields, {
+        control: control,
         propertyType: typeof propertyType === 'string' ? propertyType : propertyType.value,
         propertyFieldName: propertyFieldName,
         globalParameter: _globalParameter,
@@ -5199,6 +5105,7 @@ const CreatePropertyFormFields = ({
         entityReferenceValueComponent: entityReferenceValueComponent,
         fileReferenceValueComponent: fileReferenceValueComponent
       }), jsx(PropertyValueField, {
+        control: control,
         propertyFieldName: propertyFieldName,
         name: `${propertyFieldName}.${_globalParameter ? 'value' : 'defaultValue'}`,
         // name=
@@ -5216,7 +5123,7 @@ const CreatePropertyFormFields = ({
       }, index))
     }) : null]
   }));
-};
+});
 
 const defaultPropertyValues = {
   key: '',
@@ -5231,34 +5138,45 @@ const defaultPropertyValues = {
   executeValue: '',
   uiSettings: ''
 };
-const CreatePropertiesList = ({
-  parentFieldName,
+const CreatePropertiesList = /*#__PURE__*/forwardRef(({
+  properties,
+  // parentFieldName,
   hideAddButton,
   focusOnIndex,
   required,
   entityDefinition: _entityDefinition = false,
   globalParameter: _globalParameter = false,
   customPropertyFields: _customPropertyFields = [],
-  entityPropFields,
   parentRemove,
   entityReferenceDefinitionSources,
   entityReferenceValueComponent,
   fileReferenceValueComponent
-}) => {
-  var _a, _b;
-  const fieldName = useMemo(() => parentFieldName ? `${parentFieldName}.properties` : `properties`, [parentFieldName]);
+}, ref) => {
+  // const fieldName = useMemo(
+  //   () => (parentFieldName ? `${parentFieldName}.properties` : `properties`),
+  //   [parentFieldName]
+  // );
+  var _a;
   const {
     clearErrors,
     control,
-    watch
-  } = useFormContext();
+    setValue,
+    getValues,
+    reset,
+    trigger
+  } = useForm({
+    mode: 'all',
+    defaultValues: {
+      properties
+    }
+  });
   const {
     fields,
     append,
     remove
   } = useFieldArray({
     control,
-    name: fieldName
+    name: 'properties'
   });
   const {
     fieldState: {
@@ -5266,7 +5184,7 @@ const CreatePropertiesList = ({
     }
   } = useController({
     control,
-    name: fieldName,
+    name: 'properties',
     rules: {
       validate: val => {
         if (required && Array.isArray(val) && val.length === 0) return 'Please, fill the properties';
@@ -5274,11 +5192,15 @@ const CreatePropertiesList = ({
       }
     }
   });
-  const properties = useWatch({
-    control,
-    name: fieldName
-  });
   const refs = useRef([]);
+  const handleAddParameter = useCallback(() => {
+    append(defaultPropertyValues);
+    clearErrors('properties');
+  }, [append, clearErrors]);
+  const handleRemoveParameter = useCallback(index => {
+    if (parentRemove) parentRemove(index);
+    remove(index);
+  }, [parentRemove, remove]);
   useEffect(() => {
     if (typeof focusOnIndex === 'number' && refs.current[focusOnIndex]) {
       refs.current[focusOnIndex].scrollIntoView({
@@ -5287,27 +5209,21 @@ const CreatePropertiesList = ({
       });
     }
   }, [focusOnIndex, refs]);
-  const handleAddParameter = useCallback(() => {
-    append(defaultPropertyValues);
-    clearErrors(fieldName);
-  }, [append, fieldName, clearErrors]);
-  const removeFields = useMemo(() => {
-    if (entityPropFields) {
-      return parentRemove;
-    } else {
-      return remove;
-    }
-  }, [entityPropFields, remove, parentRemove]);
-  const handleRemoveParameter = useCallback(index => {
-    removeFields(index);
-  }, [removeFields]);
-  const propFields = useMemo(() => {
-    if (entityPropFields) {
-      return entityPropFields;
-    } else {
-      return fields;
+  useEffect(() => {
+    var _a;
+    if (properties.length && !((_a = getValues('properties')) === null || _a === void 0 ? void 0 : _a.length)) {
+      reset({
+        properties
+      });
     }
-  }, [entityPropFields, fields]);
+  }, [properties, getValues, reset]);
+  useImperativeHandle(ref, () => {
+    return {
+      getProperties: () => getValues('properties'),
+      addProperty: handleAddParameter,
+      removeProperty: handleRemoveParameter
+    };
+  }, [getValues, handleAddParameter, handleRemoveParameter]);
   return jsxs(Fragment, {
     children: [error && error.message && jsx(Grid, Object.assign({
       sm: 12
@@ -5315,9 +5231,9 @@ const CreatePropertiesList = ({
       children: jsx(Typography, Object.assign({
         color: "secondary"
       }, {
-        children: ((_a = error.root) === null || _a === void 0 ? void 0 : _a.message) || error.message
+        children: error.message
       }))
-    })), Array.isArray(properties) && propFields.map((item, index) => jsx(Grid, Object.assign({
+    })), Array.isArray(fields) && fields.map((item, index) => jsx(Grid, Object.assign({
       sm: 12,
       ref: ref => refs.current[index] = ref
     }, {
@@ -5334,11 +5250,13 @@ const CreatePropertiesList = ({
               wordBreak: 'break-word'
             }
           }, {
-            children: watch(`${fieldName}.${index}.name`) || `Property ${index + 1}`
+            children: item.name || `Property ${index + 1}`
           }))
         })), jsx(AccordionDetails, {
           children: jsx(CreatePropertyFormFields, {
-            propertyFieldName: `${fieldName}.${index}`,
+            control: control,
+            setValue: setValue,
+            propertyFieldName: `properties.${index}`,
             entityDefinition: _entityDefinition,
             globalParameter: _globalParameter,
             customPropertyFields: _customPropertyFields,
@@ -5370,13 +5288,13 @@ const CreatePropertiesList = ({
       })), error && jsx(FormHelperText, Object.assign({
         error: true
       }, {
-        children: (_b = error.root) === null || _b === void 0 ? void 0 : _b.message
+        children: (_a = error.root) === null || _a === void 0 ? void 0 : _a.message
       }))]
     }))]
   });
-};
+});
 
-const CreateDefinition = ({
+const CreateDefinition = /*#__PURE__*/forwardRef(({
   definitionFieldName,
   title,
   hideCodeField,
@@ -5386,10 +5304,12 @@ const CreateDefinition = ({
   entityReferenceDefinitionSources,
   entityReferenceValueComponent,
   fileReferenceValueComponent
-}) => {
+}, ref) => {
   const {
-    control
+    control,
+    getValues
   } = useFormContext();
+  const properties = getValues(`${definitionFieldName}.properties`);
   return jsxs(Grid, Object.assign({
     container: true,
     direction: "column",
@@ -5435,6 +5355,8 @@ const CreateDefinition = ({
         label: "Version"
       })
     })), jsx(CreatePropertiesList, {
+      ref: ref,
+      properties: properties,
       required: _required,
       parentFieldName: definitionFieldName,
       entityReferenceDefinitionSources: entityReferenceDefinitionSources,
@@ -5442,7 +5364,7 @@ const CreateDefinition = ({
       fileReferenceValueComponent: fileReferenceValueComponent
     })]
   }));
-};
+});
 
 const labels = {
   name: 'Name',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dartech/arsenal-ui",
-  "version": "1.3.94",
+  "version": "1.3.96",
   "author": "DAR",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/lib/Definition/CreateDefinition/CreateDefinition.d.ts

@@ -19,5 +19,5 @@ type Props = {
         name: string;
     }>;
 };
-export declare const CreateDefinition: ({ definitionFieldName, title, hideCodeField, hideVersionField, hideNameField, required, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
+export declare const CreateDefinition: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<unknown>>;
 export default CreateDefinition;

package/src/lib/Forms/ControlInput.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { Control } from 'react-hook-form';
 import { TextFieldProps } from '@mui/material/TextField';
 import { ValidateFunc } from '../../interfaces';

package/src/lib/Property/UpsertProperty/CreatePropertiesList.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-import { CustomPropertyFieldProps, EntityReferenceProperty } from '../../../interfaces';
+import { CustomPropertyFieldProps, EntityReferenceProperty, PropertiesArrayType } from '../../../interfaces';
 type Props = {
+    properties: PropertiesArrayType<any>;
     parentFieldName?: string;
     hideAddButton?: boolean;
     focusOnIndex?: number;
@@ -24,5 +25,5 @@ type Props = {
         name: string;
     }>;
 };
-export declare const CreatePropertiesList: ({ parentFieldName, hideAddButton, focusOnIndex, required, entityDefinition, globalParameter, customPropertyFields, entityPropFields, parentRemove, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
+export declare const CreatePropertiesList: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<unknown>>;
 export default CreatePropertiesList;

package/src/lib/Property/UpsertProperty/CreatePropertyFormFields.d.ts

@@ -1,6 +1,9 @@
 /// <reference types="react" />
 import { CustomPropertyFieldProps, EntityReferenceProperty } from '../../../interfaces';
 type Props = {
+    setValue: any;
+    control: any;
+    watch?: any;
     propertyFieldName: string;
     entityDefinition?: boolean;
     globalParameter?: boolean;
@@ -17,5 +20,5 @@ type Props = {
         name: string;
     }>;
 };
-export declare const CreatePropertyFormFields: ({ propertyFieldName, entityDefinition, globalParameter, customPropertyFields, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
+export declare const CreatePropertyFormFields: import("react").MemoExoticComponent<({ setValue, control, propertyFieldName, entityDefinition, globalParameter, customPropertyFields, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element>;
 export default CreatePropertyFormFields;

package/src/lib/Property/UpsertProperty/PropertyAdditionalFields/BigDecimalPropertyFields.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
+import { Control } from 'react-hook-form';
 type Props = {
     propertyFieldName: string;
+    control: Control<any>;
 };
-declare const BigDecimalPropertyFields: ({ propertyFieldName }: Props) => JSX.Element;
+declare const BigDecimalPropertyFields: ({ propertyFieldName, control }: Props) => JSX.Element;
 export default BigDecimalPropertyFields;

package/src/lib/Property/UpsertProperty/PropertyAdditionalFields/DateAdditionalFields.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
+import { Control } from 'react-hook-form';
 type Props = {
     propertyFieldName: string;
     defaultValue?: string;
+    control: Control<any>;
 };
-declare const DateAdditionalFields: ({ propertyFieldName, defaultValue }: Props) => JSX.Element;
+declare const DateAdditionalFields: ({ propertyFieldName, control, defaultValue }: Props) => JSX.Element;
 export default DateAdditionalFields;

package/src/lib/Property/UpsertProperty/PropertyAdditionalFields/EntityAdditionalFields.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
+import { Control } from 'react-hook-form';
 import { EntityReferenceProperty } from '../../../../interfaces';
 type Props = {
+    control: Control<any>;
     parentPropertyFieldName: string;
     entityDefinition?: boolean;
     globalParameter?: boolean;
@@ -16,5 +18,5 @@ type Props = {
         name: string;
     }>;
 };
-declare const EntityAdditionalFields: ({ parentPropertyFieldName, entityDefinition, globalParameter, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
+declare const EntityAdditionalFields: ({ control, parentPropertyFieldName, entityDefinition, globalParameter, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
 export default EntityAdditionalFields;

package/src/lib/Property/UpsertProperty/PropertyAdditionalFields/EntityReferencePropertyFields.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
+import { Control } from 'react-hook-form';
 type Props = {
     propertyFieldName: string;
     sources?: {
         label: string;
         value: string;
     }[];
+    control: Control<any>;
 };
-declare const EntityReferencePropertyFields: ({ propertyFieldName, sources, }: Props) => JSX.Element;
+declare const EntityReferencePropertyFields: ({ propertyFieldName, control, sources, }: Props) => JSX.Element;
 export default EntityReferencePropertyFields;

package/src/lib/Property/UpsertProperty/PropertyAdditionalFields/PropertyAdditionalFields.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 import { PropertyType, EntityReferenceProperty } from '../../../../interfaces';
+import { Control } from 'react-hook-form';
 type Props = {
+    control: Control<any>;
     propertyType: PropertyType;
     propertyFieldName: string;
     entityDefinition?: boolean;
@@ -17,5 +19,5 @@ type Props = {
         name: string;
     }>;
 };
-export declare const PropertyAdditionalFields: ({ propertyType, propertyFieldName, entityDefinition, globalParameter, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
+export declare const PropertyAdditionalFields: ({ control, propertyType, propertyFieldName, entityDefinition, globalParameter, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
 export default PropertyAdditionalFields;

package/src/lib/Property/UpsertProperty/PropertyAdditionalFields/StringPropertyFields.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
+import { Control } from 'react-hook-form';
 type Props = {
     propertyFieldName: string;
+    control: Control<any>;
 };
-declare const StringPropertyFields: ({ propertyFieldName }: Props) => JSX.Element;
+declare const StringPropertyFields: ({ propertyFieldName, control }: Props) => JSX.Element;
 export default StringPropertyFields;

package/src/lib/Property/UpsertProperty/PropertyValueField/BooleanValueField.d.ts

@@ -1,6 +1,8 @@
+import { Control } from 'react-hook-form';
 type Props = {
+    control: Control<any>;
     name: string;
     label?: string;
 };
-declare const BooleanValueField: ({ name, label }: Props) => JSX.Element;
+declare const BooleanValueField: ({ name, label, control }: Props) => JSX.Element;
 export default BooleanValueField;

package/src/lib/Property/UpsertProperty/PropertyValueField/PropertyValueField.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
+import { Control } from 'react-hook-form';
 import { EntityReferenceProperty } from '../../../../interfaces';
 type Props = {
+    control: Control<any>;
     propertyFieldName: string;
     name: string;
     label?: string;
@@ -17,5 +19,5 @@ type Props = {
         name: string;
     }>;
 };
-export declare const PropertyValueField: ({ propertyFieldName, name, label, required, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
+export declare const PropertyValueField: ({ control, propertyFieldName, name, label, required, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
 export default PropertyValueField;

package/src/lib/Property/UpsertProperty/PropertyValueField/StringValueField.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
+import { Control } from 'react-hook-form';
 type Props = {
+    control: Control<any>;
     name: string;
     label?: string;
     required?: boolean;
     restrictedValues?: string[];
     urlValidate?: boolean;
 };
-declare const StringValueField: ({ name, label, required, restrictedValues, }: Props) => JSX.Element;
+declare const StringValueField: ({ control, name, label, required, restrictedValues, }: Props) => JSX.Element;
 export default StringValueField;