@dartech/arsenal-ui 1.3.95 → 1.3.97

package/index.js

@@ -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,
@@ -1076,24 +1086,6 @@ const ControlAceEditor = /*#__PURE__*/forwardRef((_a, ref) => {
     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 +1096,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",
@@ -3684,14 +3676,12 @@ const PropertyAdditionalFields = ({
 };
 
 const StringValueField = ({
+  control,
   name,
   label,
   required,
   restrictedValues
 }) => {
-  const {
-    control
-  } = useFormContext();
   const {
     field: {
       onChange,
@@ -3910,6 +3900,7 @@ const PropertyWidget = ({
       });
     case PropertyType.STRING:
       return jsx(StringValueField$1, {
+        control: control,
         name: name,
         label: label,
         restrictedValues: property.restrictedValues
@@ -3923,7 +3914,8 @@ const PropertyWidget = ({
       } else {
         return jsx(StringValueField$1, {
           name: name,
-          label: label
+          label: label,
+          control: control
         });
       }
     case PropertyType.FILE:
@@ -3938,7 +3930,8 @@ const PropertyWidget = ({
       } else {
         return jsx(StringValueField$1, {
           name: name,
-          label: label
+          label: label,
+          control: control
         });
       }
     case PropertyType.ANY:
@@ -4058,7 +4051,8 @@ const StyledInputLabel = styled(InputLabel)(() => ({
   }
 }));
 
-const PropertyFiller = ({
+const ControlPropertyFiller = ({
+  control,
   property,
   name,
   useExpression,
@@ -4069,14 +4063,12 @@ const PropertyFiller = ({
   entityReferenceValueComponent,
   fileReferenceValueComponent
 }) => {
+  // const { control, clearErrors, setValue, watch } = useFormContext();
   const {
-    control,
-    clearErrors,
-    setValue,
-    watch
-  } = useFormContext();
-  const {
-    // field: { value },
+    field: {
+      value,
+      onChange
+    },
     fieldState: {
       error,
       isDirty
@@ -4092,7 +4084,7 @@ const PropertyFiller = ({
       }
     }
   });
-  const value = watch(name);
+  // const value = watch(name);
   const prevValueRef = useRef({});
   const {
     propertyType,
@@ -4118,7 +4110,7 @@ const PropertyFiller = ({
     setFillOption(selectedType);
     const prevValue = prevValueRef.current[selectedType];
     if (selectedType === 'null') {
-      setValue(name, null, {
+      onChange(null, {
         shouldDirty: true
       });
     } else if (selectedType === 'widget') {
@@ -4127,15 +4119,15 @@ const PropertyFiller = ({
           properties: propertiesArrayToObject(value.property || [])
         });
         try {
-          setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : JSON.stringify(definitionValue, null, '\t'));
+          onChange(prevValue !== null && prevValue !== void 0 ? prevValue : JSON.stringify(definitionValue, null, '\t'));
         } catch (error) {
           console.log('Stringify failed', error);
         }
       } else {
-        setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : property.defaultValue || defaultProperyValue);
+        onChange(prevValue !== null && prevValue !== void 0 ? prevValue : property.defaultValue || defaultProperyValue);
       }
     } else if (selectedType === 'expression' || selectedType === 'string') {
-      setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : '', {
+      onChange(prevValue !== null && prevValue !== void 0 ? prevValue : '', {
         shouldDirty: true
       });
     } else if (selectedType === 'dem_builder') {
@@ -4149,33 +4141,33 @@ const PropertyFiller = ({
         try {
           const definitionValue = JSON.parse(value);
           definitionValue['properties'] = propertiesObjectToArray(definitionValue['properties'] || {});
-          setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : definitionValue, {
+          onChange(prevValue !== null && prevValue !== void 0 ? prevValue : definitionValue, {
             shouldDirty: true
           });
         } catch (error) {
-          setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : defaultArrayValue, {
+          onChange(prevValue !== null && prevValue !== void 0 ? prevValue : defaultArrayValue, {
             shouldDirty: true
           });
         }
       } else {
-        setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : defaultArrayValue, {
+        onChange(prevValue !== null && prevValue !== void 0 ? prevValue : defaultArrayValue, {
           shouldDirty: true
         });
       }
     }
-    clearErrors();
-  }, [name, defaultProperyValue, clearErrors, value, setFillOption, fillOption, propertyType, setValue, property]);
+    // clearErrors();
+  }, [defaultProperyValue, value, setFillOption, fillOption, propertyType, onChange, property]);
   useEffect(() => {
     if (!isDirty && (property.defaultValue || property.value) && !value) {
-      setValue(name, property.defaultValue || property.value);
+      onChange(property.defaultValue || property.value);
     }
-  }, [isDirty, property, name, setValue, value]);
+  }, [isDirty, property, onChange, value]);
   useEffect(() => {
     var _a;
     if (value === undefined || property.isRequired && value === null && !(property.defaultValue || property.value)) {
-      setValue(name, (_a = prevValueRef.current[fillOption]) !== null && _a !== void 0 ? _a : defaultProperyValue);
+      onChange((_a = prevValueRef.current[fillOption]) !== null && _a !== void 0 ? _a : defaultProperyValue);
     }
-  }, [value, setValue, defaultProperyValue, property, name, fillOption]);
+  }, [value, onChange, defaultProperyValue, property, fillOption]);
   return jsxs(Grid, Object.assign({
     xs: 12
   }, {
@@ -4243,6 +4235,12 @@ 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
     }, {
@@ -4251,7 +4249,8 @@ const PropertyFiller = ({
   }));
 };
 
-const MultiplePropertyWidget = ({
+const ControlMultiplePropertyWidget = ({
+  control,
   name,
   property,
   useExpression,
@@ -4261,26 +4260,31 @@ const MultiplePropertyWidget = ({
   entityReferenceValueComponent,
   fileReferenceValueComponent
 }) => {
+  // const { control, setValue, clearErrors } = useFormContext();
+  // const { field: { onChange } } = useController({ control, name });
+  // const values = useWatch({ control, name });
   const {
-    control,
-    setValue,
-    clearErrors
-  } = useFormContext();
-  const values = useWatch({
+    fields: values,
+    append,
+    remove
+  } = useFieldArray({
     control,
     name
   });
-  const handleAddValue = useCallback(() => {
-    if (values && Array.isArray(values)) {
-      setValue(`${name}.${values.length}`, null);
-    } else {
-      setValue(name, []);
-    }
-    clearErrors(name);
-  }, [name, values, setValue, clearErrors]);
-  const handleDeleteValue = useCallback(index => {
-    setValue(name, removeArrayItem(values, index));
-  }, [name, values, setValue]);
+  // const handleAddValue = useCallback(() => {
+  //   if (values && Array.isArray(values)) {
+  //     onChange(`${name}.${values.length}`, null);
+  //   } else {
+  //     onChange([]);
+  //   }
+  //   // clearErrors(name);
+  // }, [name, values, setValue, clearErrors]);
+  // const handleDeleteValue = useCallback(
+  //   (index) => {
+  //     setValue(name, removeArrayItem(values, index));
+  //   },
+  //   [name, values, setValue]
+  // );
   return jsxs(Grid, Object.assign({
     container: true,
     spacing: 2,
@@ -4299,7 +4303,8 @@ const MultiplePropertyWidget = ({
           backgroundColor: '#f1f1f1'
         }
       }, {
-        children: [jsx(PropertyFiller, {
+        children: [jsx(ControlPropertyFiller, {
+          control: control,
           required: required,
           property: property,
           useExpression: useExpression,
@@ -4315,7 +4320,7 @@ const MultiplePropertyWidget = ({
           children: jsx(IconButton, Object.assign({
             id: "close-button",
             size: "small",
-            onClick: () => handleDeleteValue(index)
+            onClick: () => remove(index)
           }, {
             children: jsx(SvgIcon, Object.assign({
               fontSize: "small"
@@ -4327,21 +4332,22 @@ const MultiplePropertyWidget = ({
           }))
         }))]
       }))
-    }), index)) : null, jsx(Grid, {
+    }), value.id)) : null, jsx(Grid, {
       children: jsx(Button, Object.assign({
         variant: "contained",
         size: "small",
         color: "primary",
-        onClick: handleAddValue
+        onClick: () => append(null)
       }, {
         children: "Add value"
       }))
     })]
   }));
 };
-var MultiplePropertyWidget$1 = MultiplePropertyWidget;
+var ControlMultiplePropertyWidget$1 = ControlMultiplePropertyWidget;
 
-const MultiplePropertyFiller = ({
+const ControlMultiplePropertyFiller = ({
+  control,
   property,
   name,
   useExpression,
@@ -4354,15 +4360,10 @@ const MultiplePropertyFiller = ({
 }) => {
   var _a;
   const [selectTouched, setSelectTouched] = useState(false);
-  const {
-    control,
-    clearErrors,
-    setValue,
-    watch
-  } = useFormContext();
+  // const { control, clearErrors, setValue, watch } = useFormContext();
   const {
     field: {
-      ref,
+      value,
       onChange
     },
     fieldState: {
@@ -4380,7 +4381,7 @@ const MultiplePropertyFiller = ({
       }
     }
   });
-  const value = watch(name);
+  // const value = watch(name);
   const prevValueRef = useRef({});
   const {
     propertyType,
@@ -4407,19 +4408,20 @@ const MultiplePropertyFiller = ({
     const selectedType = event.target.value;
     const prevValue = prevValueRef.current[selectedType];
     if (selectedType === 'null') {
-      setValue(name, null);
+      onChange(null);
     } else if (selectedType === 'expression' || selectedType === 'json_valid' || selectedType === 'json_notvalid') {
-      setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : '', {
+      onChange(prevValue !== null && prevValue !== void 0 ? prevValue : '', {
         shouldDirty: true
       });
     } else if (selectedType === 'widget') {
-      setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : [], {
+      onChange(prevValue !== null && prevValue !== void 0 ? prevValue : [], {
         shouldDirty: true
       });
     }
     setFillOption(selectedType);
-    clearErrors(name);
+    // clearErrors(name);
   };
+
   useEffect(() => {
     if (!value) {
       onChange(property.isRequired && property.isMultiple ? [] : null);
@@ -4487,7 +4489,8 @@ const MultiplePropertyFiller = ({
       hideErrorMessage: true
     })
     // <JsonEditor validate name={name} ref={ref} useParsedValue />
-    , fillOption === 'widget' && jsx(MultiplePropertyWidget$1, {
+    , fillOption === 'widget' && jsx(ControlMultiplePropertyWidget$1, {
+      control: control,
       property: property,
       name: name,
       useExpression: useExpression,
@@ -4514,7 +4517,6 @@ const PropertyValueField = ({
   entityReferenceValueComponent,
   fileReferenceValueComponent
 }) => {
-  // const { control } = useFormContext();
   const propertyType = useWatch({
     control,
     name: `${propertyFieldName}.propertyType`
@@ -4562,7 +4564,8 @@ const PropertyValueField = ({
   }, [propertyType, format, restrictedValues, isMultiple, _label,
   // key,
   isRequired, properties, required]);
-  return isMultiple ? jsx(MultiplePropertyFiller, {
+  return isMultiple ? jsx(ControlMultiplePropertyFiller, {
+    control: control,
     name: name,
     property: fillerProperty,
     title: _label,
@@ -4570,7 +4573,8 @@ const PropertyValueField = ({
     entityReferenceDefinitionSources: entityReferenceDefinitionSources,
     entityReferenceValueComponent: entityReferenceValueComponent,
     fileReferenceValueComponent: fileReferenceValueComponent
-  }) : jsx(PropertyFiller, {
+  }) : jsx(ControlPropertyFiller, {
+    control: control,
     name: name,
     property: fillerProperty,
     title: _label,
@@ -5168,8 +5172,10 @@ const CreatePropertiesList = /*#__PURE__*/forwardRef(({
     control,
     setValue,
     getValues,
-    reset
+    reset,
+    trigger
   } = useForm({
+    mode: 'all',
     defaultValues: {
       properties
     }
@@ -5196,8 +5202,6 @@ const CreatePropertiesList = /*#__PURE__*/forwardRef(({
       }
     }
   });
-  // console.log(watch());
-  // const properties = useWatch({ control, name: fieldName });
   const refs = useRef([]);
   const handleAddParameter = useCallback(() => {
     append(defaultPropertyValues);
@@ -5639,6 +5643,452 @@ const ViewPropertiesList = ({
   }));
 };
 
+const PropertyFiller = ({
+  property,
+  name,
+  useExpression,
+  label,
+  required,
+  title,
+  entityReferenceDefinitionSources,
+  entityReferenceValueComponent,
+  fileReferenceValueComponent
+}) => {
+  const {
+    control,
+    clearErrors,
+    setValue,
+    watch
+  } = useFormContext();
+  const {
+    // field: { value },
+    fieldState: {
+      error,
+      isDirty
+    }
+  } = useController({
+    name,
+    control,
+    defaultValue: property.defaultValue,
+    rules: {
+      validate: val => {
+        if (required && val === null) return 'Please, fill this field';
+        return true;
+      }
+    }
+  });
+  const value = watch(name);
+  const prevValueRef = useRef({});
+  const {
+    propertyType,
+    valueLabel,
+    fillOptionLabel,
+    fillOption,
+    fillOptions,
+    setFillOption,
+    defaultProperyValue
+  } = usePropertyFiller$1({
+    value,
+    property,
+    isDirty,
+    label,
+    required,
+    useExpression
+  });
+  const handleFillOptionChange = useCallback(event => {
+    const selectedType = event.target.value;
+    prevValueRef.current = Object.assign(Object.assign({}, prevValueRef.current), {
+      [fillOption]: value
+    });
+    setFillOption(selectedType);
+    const prevValue = prevValueRef.current[selectedType];
+    if (selectedType === 'null') {
+      setValue(name, null, {
+        shouldDirty: true
+      });
+    } else if (selectedType === 'widget') {
+      if (propertyType === PropertyType.JSON && value && typeof value !== 'string' && fillOption === 'dem_builder' && 'properties' in value) {
+        const definitionValue = Object.assign(Object.assign({}, value), {
+          properties: propertiesArrayToObject(value.property || [])
+        });
+        try {
+          setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : JSON.stringify(definitionValue, null, '\t'));
+        } catch (error) {
+          console.log('Stringify failed', error);
+        }
+      } else {
+        setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : property.defaultValue || defaultProperyValue);
+      }
+    } else if (selectedType === 'expression' || selectedType === 'string') {
+      setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : '', {
+        shouldDirty: true
+      });
+    } else if (selectedType === 'dem_builder') {
+      const defaultArrayValue = {
+        code: '',
+        name: '',
+        version: 0,
+        properties: []
+      };
+      if (value) {
+        try {
+          const definitionValue = JSON.parse(value);
+          definitionValue['properties'] = propertiesObjectToArray(definitionValue['properties'] || {});
+          setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : definitionValue, {
+            shouldDirty: true
+          });
+        } catch (error) {
+          setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : defaultArrayValue, {
+            shouldDirty: true
+          });
+        }
+      } else {
+        setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : defaultArrayValue, {
+          shouldDirty: true
+        });
+      }
+    }
+    clearErrors();
+  }, [name, defaultProperyValue, clearErrors, value, setFillOption, fillOption, propertyType, setValue, property]);
+  useEffect(() => {
+    if (!isDirty && (property.defaultValue || property.value) && !value) {
+      setValue(name, property.defaultValue || property.value);
+    }
+  }, [isDirty, property, name, setValue, value]);
+  useEffect(() => {
+    var _a;
+    if (value === undefined || property.isRequired && value === null && !(property.defaultValue || property.value)) {
+      setValue(name, (_a = prevValueRef.current[fillOption]) !== null && _a !== void 0 ? _a : defaultProperyValue);
+    }
+  }, [value, setValue, defaultProperyValue, property, name, fillOption]);
+  return jsxs(Grid, Object.assign({
+    xs: 12
+  }, {
+    children: [title && jsx(Box, Object.assign({
+      mb: 2
+    }, {
+      children: jsx(Typography, Object.assign({
+        variant: "h6"
+      }, {
+        children: title
+      }))
+    })), fillOptions ? jsx(Box, Object.assign({
+      mb: 2
+    }, {
+      children: jsxs(FormControl, Object.assign({
+        fullWidth: true,
+        size: "small",
+        variant: "outlined"
+      }, {
+        children: [jsx(StyledInputLabel, Object.assign({
+          htmlFor: "type-select"
+        }, {
+          children: fillOptionLabel
+        })), jsx(Select, Object.assign({
+          labelId: "type-select",
+          label: fillOptionLabel,
+          value: fillOption || '',
+          onChange: handleFillOptionChange
+        }, {
+          children: fillOptions.map(option => jsx(MenuItem, Object.assign({
+            value: option.value
+          }, {
+            children: option.label
+          }), option.value))
+        }))]
+      }))
+    })) : null, fillOption === 'expression' && (propertyType === PropertyType.JSON || propertyType === PropertyType.ENTITY || propertyType === PropertyType.ANY ? jsx(ControlAceEditor, {
+      name: name,
+      control: control,
+      label: valueLabel,
+      parseValue: true,
+      validateJson: true,
+      hideErrorMessage: true
+    }) : jsx(ControlInput, {
+      control: control,
+      name: name,
+      label: valueLabel,
+      hideErrorMessage: true
+    })), fillOption === 'string' && jsx(ControlInput, {
+      control: control,
+      name: name,
+      label: valueLabel,
+      hideErrorMessage: true
+    }), fillOption === 'json_notvalid' && jsx(ControlAceEditor, {
+      name: name,
+      control: control,
+      label: valueLabel,
+      hideErrorMessage: true
+    }), fillOption === 'widget' && jsx(PropertyWidget, {
+      control: control,
+      property: property,
+      name: name,
+      useExpression: useExpression,
+      label: valueLabel,
+      entityReferenceDefinitionSources: entityReferenceDefinitionSources,
+      entityReferenceValueComponent: entityReferenceValueComponent,
+      fileReferenceValueComponent: fileReferenceValueComponent
+    }), error && jsx(FormHelperText, Object.assign({
+      error: true
+    }, {
+      children: error.message
+    }))]
+  }));
+};
+
+const MultiplePropertyWidget = ({
+  name,
+  property,
+  useExpression,
+  required,
+  label,
+  entityReferenceDefinitionSources,
+  entityReferenceValueComponent,
+  fileReferenceValueComponent
+}) => {
+  const {
+    control,
+    setValue,
+    clearErrors
+  } = useFormContext();
+  const values = useWatch({
+    control,
+    name
+  });
+  const handleAddValue = useCallback(() => {
+    if (values && Array.isArray(values)) {
+      setValue(`${name}.${values.length}`, null);
+    } else {
+      setValue(name, []);
+    }
+    clearErrors(name);
+  }, [name, values, setValue, clearErrors]);
+  const handleDeleteValue = useCallback(index => {
+    setValue(name, removeArrayItem(values, index));
+  }, [name, values, setValue]);
+  return jsxs(Grid, Object.assign({
+    container: true,
+    spacing: 2,
+    direction: "column",
+    xs: 12
+  }, {
+    children: [Array.isArray(values) && values.length ? values.map((value, index) => jsx(Grid, Object.assign({
+      xs: 12
+    }, {
+      children: jsxs(Box, Object.assign({
+        display: "flex",
+        alignItems: "flex-start",
+        width: "100%",
+        p: 2,
+        style: {
+          backgroundColor: '#f1f1f1'
+        }
+      }, {
+        children: [jsx(PropertyFiller, {
+          required: required,
+          property: property,
+          useExpression: useExpression,
+          name: `${name}.${index}`,
+          label: `${label || property.name} (${index + 1})`,
+          entityReferenceDefinitionSources: entityReferenceDefinitionSources,
+          entityReferenceValueComponent: entityReferenceValueComponent,
+          fileReferenceValueComponent: fileReferenceValueComponent
+        }), jsx(Box, Object.assign({
+          mt: "8px",
+          ml: "4px"
+        }, {
+          children: jsx(IconButton, Object.assign({
+            id: "close-button",
+            size: "small",
+            onClick: () => handleDeleteValue(index)
+          }, {
+            children: jsx(SvgIcon, Object.assign({
+              fontSize: "small"
+            }, {
+              children: jsx("path", {
+                d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+              })
+            }))
+          }))
+        }))]
+      }))
+    }), index)) : null, jsx(Grid, {
+      children: jsx(Button, Object.assign({
+        variant: "contained",
+        size: "small",
+        color: "primary",
+        onClick: handleAddValue
+      }, {
+        children: "Add value"
+      }))
+    })]
+  }));
+};
+var MultiplePropertyWidget$1 = MultiplePropertyWidget;
+
+const MultiplePropertyFiller = ({
+  property,
+  name,
+  useExpression,
+  required,
+  label,
+  title,
+  entityReferenceDefinitionSources,
+  entityReferenceValueComponent,
+  fileReferenceValueComponent
+}) => {
+  var _a;
+  const [selectTouched, setSelectTouched] = useState(false);
+  const {
+    control,
+    clearErrors,
+    setValue,
+    watch
+  } = useFormContext();
+  const {
+    field: {
+      ref,
+      onChange
+    },
+    fieldState: {
+      error,
+      isDirty
+    }
+  } = useController({
+    control,
+    name,
+    defaultValue: (_a = property.defaultValue) !== null && _a !== void 0 ? _a : [],
+    rules: {
+      validate: val => {
+        if (required && !val) return 'Please, fill this field';
+        return true;
+      }
+    }
+  });
+  const value = watch(name);
+  const prevValueRef = useRef({});
+  const {
+    propertyType,
+    valueLabel,
+    fillOptionLabel,
+    fillOption,
+    fillOptions,
+    setFillOption,
+    checkFillOption
+  } = usePropertyFiller$1({
+    property,
+    value,
+    isDirty,
+    label,
+    required,
+    useExpression,
+    multipleOptions: true
+  });
+  const handleFillOptionChange = event => {
+    setSelectTouched(true);
+    prevValueRef.current = Object.assign(Object.assign({}, prevValueRef.current), {
+      [fillOption]: value
+    });
+    const selectedType = event.target.value;
+    const prevValue = prevValueRef.current[selectedType];
+    if (selectedType === 'null') {
+      setValue(name, null);
+    } else if (selectedType === 'expression' || selectedType === 'json_valid' || selectedType === 'json_notvalid') {
+      setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : '', {
+        shouldDirty: true
+      });
+    } else if (selectedType === 'widget') {
+      setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : [], {
+        shouldDirty: true
+      });
+    }
+    setFillOption(selectedType);
+    clearErrors(name);
+  };
+  useEffect(() => {
+    if (!value) {
+      onChange(property.isRequired && property.isMultiple ? [] : null);
+    }
+  }, [value, property, onChange]);
+  useEffect(() => {
+    if (value && !selectTouched) {
+      setSelectTouched(true);
+      checkFillOption();
+    }
+  }, [checkFillOption, selectTouched, value]);
+  return jsxs(Grid, {
+    children: [title && jsx(Box, Object.assign({
+      mb: 2
+    }, {
+      children: jsx(Typography, Object.assign({
+        variant: "h6"
+      }, {
+        children: title
+      }))
+    })), fillOptions ? jsx(Box, Object.assign({
+      mb: 2
+    }, {
+      children: jsxs(FormControl, Object.assign({
+        fullWidth: true,
+        size: "small",
+        variant: "outlined"
+      }, {
+        children: [jsx(StyledInputLabel, Object.assign({
+          htmlFor: "type-select"
+        }, {
+          children: fillOptionLabel
+        })), jsx(Select, Object.assign({
+          labelId: "type-select",
+          label: fillOptionLabel,
+          value: fillOption || '',
+          onChange: handleFillOptionChange
+        }, {
+          children: fillOptions.map(option => jsx(MenuItem, Object.assign({
+            value: option.value
+          }, {
+            children: option.label
+          }), option.value))
+        }))]
+      }))
+    })) : null, fillOption === 'expression' && (propertyType === PropertyType.JSON || propertyType === PropertyType.ENTITY || propertyType === PropertyType.ANY ? jsx(ControlAceEditor, {
+      name: name,
+      control: control,
+      label: valueLabel,
+      parseValue: true,
+      validateJson: true,
+      hideErrorMessage: true
+    }) : jsx(ControlInput, {
+      required: true,
+      hideErrorMessage: true,
+      control: control,
+      name: name,
+      label: valueLabel
+    })), fillOption === 'json_valid' && jsx(ControlAceEditor, {
+      name: name,
+      control: control,
+      label: valueLabel,
+      parseValue: true,
+      validateJson: true,
+      hideErrorMessage: true
+    })
+    // <JsonEditor validate name={name} ref={ref} useParsedValue />
+    , fillOption === 'widget' && jsx(MultiplePropertyWidget$1, {
+      property: property,
+      name: name,
+      useExpression: useExpression,
+      required: required,
+      label: label,
+      entityReferenceDefinitionSources: entityReferenceDefinitionSources,
+      entityReferenceValueComponent: entityReferenceValueComponent,
+      fileReferenceValueComponent: fileReferenceValueComponent
+    }), error && jsx(FormHelperText, Object.assign({
+      error: true
+    }, {
+      children: error.message
+    }))]
+  });
+};
+
 const DefinitionFiller = ({
   properties,
   dataFieldName,

package/package.json

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

package/src/lib/Property/PropertyFiller/ControlFiller/ControlMultiplePropertyFiller.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { Control } from 'react-hook-form';
+import { EntityReferenceProperty, PropertyUnion } from '../../../../interfaces';
+type Props = {
+    control: Control<any>;
+    property: PropertyUnion;
+    name: string;
+    useExpression?: boolean;
+    required?: boolean;
+    label?: string;
+    title?: string;
+    entityReferenceDefinitionSources?: {
+        label: string;
+        value: string;
+    }[];
+    entityReferenceValueComponent?: React.ElementType<{
+        name: string;
+        property: EntityReferenceProperty;
+    }>;
+    fileReferenceValueComponent?: React.ElementType<{
+        name: string;
+    }>;
+};
+export declare const ControlMultiplePropertyFiller: ({ control, property, name, useExpression, required, label, title, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
+export default ControlMultiplePropertyFiller;

package/src/lib/Property/PropertyFiller/ControlFiller/ControlMultiplePropertyWidget.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { Control } from 'react-hook-form';
+import { EntityReferenceProperty, PropertyUnion } from '../../../../interfaces';
+type Props = {
+    control: Control<any>;
+    name: string;
+    property: PropertyUnion;
+    useExpression?: boolean;
+    required?: boolean;
+    label?: string;
+    entityReferenceDefinitionSources?: {
+        label: string;
+        value: string;
+    }[];
+    entityReferenceValueComponent?: React.ElementType<{
+        name: string;
+        property: EntityReferenceProperty;
+    }>;
+    fileReferenceValueComponent?: React.ElementType<{
+        name: string;
+    }>;
+};
+export declare const ControlMultiplePropertyWidget: ({ control, name, property, useExpression, required, label, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
+export default ControlMultiplePropertyWidget;

package/src/lib/Property/PropertyFiller/ControlFiller/ControlPropertyFiller.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { Control } from 'react-hook-form';
+import { EntityReferenceProperty, PropertyUnion } from '../../../../interfaces';
+export type ControlPropertyFillerProps = {
+    control: Control<any>;
+    property: PropertyUnion;
+    name: string;
+    useExpression?: boolean;
+    label?: string;
+    required?: boolean;
+    title?: string;
+    entityReferenceDefinitionSources?: {
+        label: string;
+        value: string;
+    }[];
+    entityReferenceValueComponent?: React.ElementType<{
+        name: string;
+        property: EntityReferenceProperty;
+    }>;
+    fileReferenceValueComponent?: React.ElementType<{
+        name: string;
+    }>;
+};
+export declare const ControlPropertyFiller: ({ control, property, name, useExpression, label, required, title, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: ControlPropertyFillerProps) => JSX.Element;
+export default ControlPropertyFiller;

package/src/lib/Property/PropertyFiller/ControlFiller/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ControlPropertyFiller';
+export * from './ControlMultiplePropertyFiller';
+export * from './ControlMultiplePropertyWidget';

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

@@ -1,7 +1,8 @@
-/// <reference types="react" />
+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/DateTimeValueField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     name: string;
     label?: string;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     name: string;
     format: string;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     name: string;
     label?: string;

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;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     name: string;
     label?: string;

package/src/lib/Property/ViewProperty/PropertyItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PropertyUnion } from '../../../interfaces';
 type PropertyItemProps = {
     property: PropertyUnion;