@dartech/arsenal-ui 1.3.58 → 1.3.60

package/index.js

@@ -70,7 +70,6 @@ import StepLabel from '@mui/material/StepLabel';
 import StepContent from '@mui/material/StepContent';
 import StepConnector from '@mui/material/StepConnector';
 import Select from '@mui/material/Select';
-import CloseIcon from '@mui/icons-material/Close';
 import InputLabel from '@mui/material/InputLabel';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
@@ -216,6 +215,7 @@ const AlertDialog = ({
  * @category Forms
  */
 const ControlInput = _a => {
+  var _b;
   var {
       control,
       validate,
@@ -229,25 +229,31 @@ const ControlInput = _a => {
       onChange: customOnChange
     } = _a,
     textFieldProps = __rest(_a, ["control", "validate", "name", "label", "required", "defaultValue", "disabled", "textarea", "hideErrorMessage", "onChange"]);
-  const {
-    field: {
+  const _c = useController({
+      name,
+      control,
+      defaultValue,
+      rules: {
+        required: required && 'Please, fill this field',
+        validate
+      }
+    }),
+    _d = _c.field,
+    {
       ref,
-      onChange,
-      value
-    },
-    fieldState: {
-      error
-    }
-  } = useController({
-    name,
+      onChange
+    } = _d,
+    fieldProps = __rest(_d, ["ref", "onChange"]),
+    {
+      fieldState: {
+        error
+      }
+    } = _c;
+  const value = useWatch({
     control,
-    defaultValue,
-    rules: {
-      required: required && 'Please, fill this field',
-      validate
-    }
+    name
   });
-  return jsx(TextField, Object.assign({
+  return jsx(TextField, Object.assign({}, fieldProps, {
     fullWidth: true,
     size: "small",
     variant: "outlined",
@@ -270,7 +276,10 @@ const ControlInput = _a => {
     multiline: textarea,
     minRows: textarea ? 3 : 1,
     value: value !== null && value !== void 0 ? value : '',
-    onChange: customOnChange ? customOnChange : onChange
+    onChange: customOnChange ? customOnChange : onChange,
+    inputProps: Object.assign(Object.assign({}, (_b = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.inputProps) !== null && _b !== void 0 ? _b : {}), {
+      value: value !== null && value !== void 0 ? value : ''
+    })
   }, textFieldProps));
 };
 
@@ -410,23 +419,26 @@ const ControlSelect = _a => {
       options = []
     } = _a,
     textFieldProps = __rest(_a, ["control", "validate", "name", "label", "required", "defaultValue", "disabled", "hideErrorMessage", "onChange", "labelKey", "valueKey", "options"]);
-  const {
-    field: {
+  const _c = useController({
+      name,
+      control,
+      defaultValue,
+      rules: {
+        required: required && 'Please, fill this field',
+        validate
+      }
+    }),
+    _d = _c.field,
+    {
       ref,
       onChange
-    },
-    fieldState: {
-      error
-    }
-  } = useController({
-    name,
-    control,
-    defaultValue,
-    rules: {
-      required: required && 'Please, fill this field',
-      validate
-    }
-  });
+    } = _d,
+    fieldProps = __rest(_d, ["ref", "onChange"]),
+    {
+      fieldState: {
+        error
+      }
+    } = _c;
   const value = useWatch({
     control,
     name
@@ -444,7 +456,7 @@ const ControlSelect = _a => {
       customOnChange(null);
     } else onChange(null);
   }, [onChange, customOnChange]);
-  return jsx(TextField, Object.assign({
+  return jsx(TextField, Object.assign({}, fieldProps, {
     select: true,
     fullWidth: true,
     size: "small",
@@ -518,19 +530,22 @@ const ControlCheckbox = _a => {
       onChange: customOnChange
     } = _a,
     checkboxProps = __rest(_a, ["control", "validate", "name", "label", "required", "defaultValue", "disabled", "hideErrorMessage", "onChange"]);
-  const {
-    field: {
+  const _b = useController({
+      name,
+      control,
+      defaultValue: false
+    }),
+    _c = _b.field,
+    {
       ref,
       onChange
-    },
-    fieldState: {
-      error
-    }
-  } = useController({
-    name,
-    control,
-    defaultValue: false
-  });
+    } = _c,
+    fieldProps = __rest(_c, ["ref", "onChange"]),
+    {
+      fieldState: {
+        error
+      }
+    } = _b;
   const value = useWatch({
     control,
     name
@@ -556,7 +571,7 @@ const ControlCheckbox = _a => {
     disabled: disabled
   }, {
     children: [jsx(FormControlLabel, {
-      control: jsx(Checkbox, Object.assign({
+      control: jsx(Checkbox, Object.assign({}, fieldProps, {
         checked: checked,
         onChange: customOnChange ? customOnChange : onChange,
         name: name,
@@ -591,23 +606,26 @@ const ControlRadio = ({
   row,
   radioProps
 }) => {
-  const {
-    field: {
+  const _a = useController({
+      name,
+      control,
+      defaultValue,
+      rules: {
+        required: required && 'Please, fill this field',
+        validate
+      }
+    }),
+    _b = _a.field,
+    {
       ref,
       onChange
-    },
-    fieldState: {
-      error
-    }
-  } = useController({
-    name,
-    control,
-    defaultValue,
-    rules: {
-      required: required && 'Please, fill this field',
-      validate
-    }
-  });
+    } = _b,
+    fieldProps = __rest(_b, ["ref", "onChange"]),
+    {
+      fieldState: {
+        error
+      }
+    } = _a;
   const value = useWatch({
     control,
     name
@@ -628,7 +646,7 @@ const ControlRadio = ({
       id: "radio-buttons-group"
     }, {
       children: label
-    })), jsx(RadioGroup, Object.assign({
+    })), jsx(RadioGroup, Object.assign({}, fieldProps, {
       row: row,
       "aria-labelledby": "radio-buttons-group",
       ref: ref,
@@ -1041,8 +1059,7 @@ const ControlAceEditor = /*#__PURE__*/forwardRef((_a, ref) => {
   const {
     field: {
       onChange,
-      value,
-      ref: fromRef
+      ref: formRef
     },
     fieldState: {
       error
@@ -1054,7 +1071,10 @@ const ControlAceEditor = /*#__PURE__*/forwardRef((_a, ref) => {
       required: required && 'Please, fill this field'
     }
   });
-  // const value = useWatch({ control, name });
+  const value = useWatch({
+    control,
+    name
+  });
   const extensions = useMemo(() => ({
     json: [langs.json()],
     javascript: [langs.javascript()],
@@ -1113,7 +1133,7 @@ const ControlAceEditor = /*#__PURE__*/forwardRef((_a, ref) => {
       }))
     }), jsxs(Fragment, {
       children: [jsx(CodeMirror, Object.assign({
-        ref: ref || fromRef,
+        ref: ref || formRef,
         basicSetup: {
           autocompletion: true,
           history: true
@@ -1836,7 +1856,7 @@ const ControlNumberInput = _a => {
       name = '',
       label = '',
       required = false,
-      defaultValue,
+      defaultValue = null,
       disabled = false,
       hideErrorMessage = false,
       onChange: customOnChange,
@@ -1844,35 +1864,35 @@ const ControlNumberInput = _a => {
       valueAsNumber = true
     } = _a,
     textFieldProps = __rest(_a, ["control", "validate", "name", "label", "required", "defaultValue", "disabled", "hideErrorMessage", "onChange", "decimal", "valueAsNumber"]);
-  const {
-    field: {
-      ref,
-      onChange
-    },
-    fieldState: {
-      error
-    }
-  } = useController({
-    name,
-    control,
-    defaultValue,
-    rules: {
-      required: required && 'Please, fill this field',
-      validate: val => {
-        if (val === null || val === 0) return true;
-        if (decimal && !floatsOnly.test(val) || /^-*0+$/.test(val)) {
-          return 'Not valid number';
-        } else if (!decimal && !digitsOnly.test(val)) {
-          return 'Not valid integer';
+  const _c = useController({
+      name,
+      control,
+      defaultValue,
+      rules: {
+        required: required && 'Please, fill this field',
+        validate: val => {
+          if (val === null || val === 0) return true;
+          if (decimal && !floatsOnly.test(val) || /^-*0+$/.test(val)) {
+            return 'Not valid number';
+          } else if (!decimal && !digitsOnly.test(val)) {
+            return 'Not valid integer';
+          }
+          return true;
         }
-        return true;
       }
-    }
-  });
-  const value = useWatch({
-    control,
-    name
-  });
+    }),
+    _d = _c.field,
+    {
+      ref,
+      onChange,
+      value
+    } = _d,
+    fieldProps = __rest(_d, ["ref", "onChange", "value"]),
+    {
+      fieldState: {
+        error
+      }
+    } = _c;
   const handleChange = event => {
     var _a;
     const lastData = event.nativeEvent['data'] || event.target.value;
@@ -1897,7 +1917,7 @@ const ControlNumberInput = _a => {
       onChange(event.target.value);
     }
   };
-  return jsx(TextField, Object.assign({
+  return jsx(TextField, Object.assign({}, fieldProps, {
     fullWidth: true,
     size: "small",
     variant: "outlined",
@@ -1917,13 +1937,12 @@ const ControlNumberInput = _a => {
     error: !!error,
     helperText: !hideErrorMessage && (error === null || error === void 0 ? void 0 : error.message),
     disabled: disabled,
-    value: value !== null && value !== void 0 ? value : ''
-  }, textFieldProps, {
+    value: value !== null && value !== void 0 ? value : '',
     onChange: handleChange,
     inputProps: Object.assign(Object.assign({}, (_b = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.inputProps) !== null && _b !== void 0 ? _b : {}), {
       value: value !== null && value !== void 0 ? value : ''
     })
-  }));
+  }, textFieldProps));
 };
 
 const ControlSwitch = _a => {
@@ -1933,15 +1952,15 @@ const ControlSwitch = _a => {
       label
     } = _a,
     switchProps = __rest(_a, ["control", "name", "label"]);
-  const {
-    field: {
+  const _b = useController({
+      control,
+      name
+    }).field,
+    {
       ref,
       onChange
-    }
-  } = useController({
-    control,
-    name
-  });
+    } = _b,
+    fieldProps = __rest(_b, ["ref", "onChange"]);
   const value = useWatch({
     control,
     name
@@ -1974,7 +1993,7 @@ const ControlSwitch = _a => {
   return jsx(FormControlLabel, {
     label: label,
     name: name,
-    control: jsx(Switch, Object.assign({
+    control: jsx(Switch, Object.assign({}, fieldProps, {
       color: "primary",
       size: "small",
       inputRef: ref,
@@ -2121,27 +2140,30 @@ const ControlTime = ({
   format: _format = TIME_DEFAULT_FORMAT,
   hideErrorMessage: _hideErrorMessage = false
 }) => {
-  const {
-    field: {
+  const _a = useController({
+      control,
+      name,
+      rules: {
+        required: required && 'Please, fill this field',
+        validate: val => {
+          if (isMatch(val, _format)) {
+            return true;
+          }
+          return 'Incorrect date format';
+        }
+      }
+    }),
+    _b = _a.field,
+    {
       onChange,
       ref
-    },
-    fieldState: {
-      error
-    }
-  } = useController({
-    control,
-    name,
-    rules: {
-      required: required && 'Please, fill this field',
-      validate: val => {
-        if (isMatch(val, _format)) {
-          return true;
-        }
-        return 'Incorrect date format';
+    } = _b,
+    fieldProps = __rest(_b, ["onChange", "ref"]),
+    {
+      fieldState: {
+        error
       }
-    }
-  });
+    } = _a;
   const value = useWatch({
     control,
     name
@@ -2160,7 +2182,7 @@ const ControlTime = ({
       setFieldValue(parsedValue);
     }
   }, [value, _format]);
-  return jsx(TimePicker, {
+  return jsx(TimePicker, Object.assign({}, fieldProps, {
     mask: "",
     inputRef: ref,
     label: required ? jsxs(Fragment, {
@@ -2185,7 +2207,7 @@ const ControlTime = ({
       error: !!error,
       helperText: !_hideErrorMessage && (error === null || error === void 0 ? void 0 : error.message)
     }))
-  });
+  }));
 };
 
 const ControlArrayInput = ({
@@ -3614,7 +3636,7 @@ const JsonEditor = /*#__PURE__*/forwardRef(({
       zIndex: 0,
       isolation: 'isolate'
     },
-    value: typeof value !== 'string' ? value === null ? '' : JSON.stringify(value, null, 2) : value,
+    value: typeof value !== 'string' ? value === null ? '' : JSON.stringify(value) : value,
     onChange: handleChange,
     extensions: [langs.json()]
   });
@@ -3682,13 +3704,12 @@ const StringValueField = ({
 };
 var StringValueField$1 = StringValueField;
 
-const PropertyWidget = ({
+const PropertyWidget = /*#__PURE__*/forwardRef(({
   property,
   name,
   label,
-  useExpression,
-  inputRef
-}) => {
+  useExpression
+}, ref) => {
   const {
     control
   } = useFormContext();
@@ -3699,7 +3720,6 @@ const PropertyWidget = ({
     case PropertyType.DOUBLE:
       return jsx(ControlNumberInput, {
         decimal: true,
-        required: true,
         hideErrorMessage: true,
         control: control,
         name: name,
@@ -3709,8 +3729,10 @@ const PropertyWidget = ({
     case PropertyType.INTEGER:
     case PropertyType.BIG_INTEGER:
     case PropertyType.LONG:
-      return jsx(ControlNumberInput, {
-        required: true,
+      return jsx(ControlNumberInput
+      // required
+      , {
+        // required
         hideErrorMessage: true,
         control: control,
         name: name,
@@ -3723,8 +3745,10 @@ const PropertyWidget = ({
         name: name
       });
     case PropertyType.DATE:
-      return jsx(ControlDate, {
-        required: true,
+      return jsx(ControlDate
+      // required
+      , {
+        // required
         hideErrorMessage: true,
         control: control,
         name: name,
@@ -3732,8 +3756,10 @@ const PropertyWidget = ({
         format: property.format
       });
     case PropertyType.TIME:
-      return jsx(ControlTime, {
-        required: true,
+      return jsx(ControlTime
+      // required
+      , {
+        // required
         hideErrorMessage: true,
         control: control,
         name: name,
@@ -3741,8 +3767,10 @@ const PropertyWidget = ({
         format: property.format
       });
     case PropertyType.DATE_TIME:
-      return jsx(ControlDateTime, {
-        required: true,
+      return jsx(ControlDateTime
+      // required
+      , {
+        // required
         hideErrorMessage: true,
         control: control,
         name: name,
@@ -3753,12 +3781,14 @@ const PropertyWidget = ({
       return jsx(JsonEditor$1, {
         validate: true,
         name: name,
-        ref: inputRef,
+        ref: ref,
         useParsedValue: true
       });
     case PropertyType.STRING:
-      return jsx(StringValueField$1, {
-        required: true,
+      return jsx(StringValueField$1
+      // required={!property.isRequired}
+      , {
+        // required={!property.isRequired}
         name: name,
         label: label,
         restrictedValues: property.restrictedValues
@@ -3774,7 +3804,7 @@ const PropertyWidget = ({
     case PropertyType.ANY:
       return jsx(JsonEditor$1, {
         name: name,
-        ref: inputRef
+        ref: ref
       });
     case PropertyType.ENTITY:
       return jsx(DefinitionFiller, {
@@ -3787,7 +3817,7 @@ const PropertyWidget = ({
         children: "No widget"
       });
   }
-};
+});
 
 const usePropertyFiller = ({
   value,
@@ -3815,28 +3845,31 @@ const usePropertyFiller = ({
     useExpression: _useExpression
   }), [_useExpression, _required, propertyType, _multipleOptions]);
   const defaultProperyValue = useMemo(() => {
-    switch (propertyType) {
-      case PropertyType.STRING:
-      case PropertyType.DATE:
-      case PropertyType.TIME:
-      case PropertyType.DATE_TIME:
-      case PropertyType.ANY:
-        return '';
-      case PropertyType.JSON:
-        return {};
-      case PropertyType.BOOLEAN:
-        return true;
-      case PropertyType.INTEGER:
-      case PropertyType.BIG_DECIMAL:
-      case PropertyType.BIG_INTEGER:
-      case PropertyType.DOUBLE:
-      case PropertyType.LONG:
-      case PropertyType.FLOAT:
-        return 0;
-      default:
-        return {};
-    }
-  }, [propertyType]);
+    if (property.isRequired || property.isMultiple) {
+      switch (propertyType) {
+        case PropertyType.STRING:
+        case PropertyType.DATE:
+        case PropertyType.TIME:
+        case PropertyType.DATE_TIME:
+        case PropertyType.ENTITY_REFERENCE:
+        case PropertyType.ANY:
+          return '';
+        case PropertyType.JSON:
+          return {};
+        case PropertyType.BOOLEAN:
+          return true;
+        case PropertyType.INTEGER:
+        case PropertyType.BIG_DECIMAL:
+        case PropertyType.BIG_INTEGER:
+        case PropertyType.DOUBLE:
+        case PropertyType.LONG:
+        case PropertyType.FLOAT:
+          return 0;
+        default:
+          return {};
+      }
+    } else return null;
+  }, [propertyType, property]);
   useEffect(() => {
     if (!fillOption) {
       if (isPropertyValueEmpty(value) && (fillOptions === null || fillOptions === void 0 ? void 0 : fillOptions.length)) {
@@ -3901,11 +3934,11 @@ const PropertyFiller = ({
   } = useController({
     name,
     control,
+    defaultValue: property.defaultValue,
     rules: {
       required
     }
   });
-  // const value = useWatch({ control, name });
   const {
     propertyType,
     valueLabel,
@@ -3938,7 +3971,7 @@ const PropertyFiller = ({
           console.log('Stringify failed', error);
         }
       } else {
-        setValue(name, defaultProperyValue);
+        setValue(name, property.defaultValue || defaultProperyValue);
       }
     } else if (selectedType === 'expression' || selectedType === 'string') {
       onChange('');
@@ -3956,19 +3989,19 @@ const PropertyFiller = ({
           onChange(definitionValue);
         } catch (error) {
           onChange(defaultArrayValue);
-          console.log('Parse failed');
+          // console.log('Parse failed');
         }
       } else {
         onChange(defaultArrayValue);
       }
     }
     clearErrors();
-  }, [name, defaultProperyValue, clearErrors, value, setFillOption, onChange, fillOption, propertyType, setValue]);
+  }, [name, defaultProperyValue, clearErrors, value, setFillOption, onChange, fillOption, propertyType, setValue, property]);
   useEffect(() => {
     if (value === undefined) {
-      onChange(null);
+      onChange(property.defaultValue || defaultProperyValue);
     }
-  }, [value, onChange, defaultProperyValue]);
+  }, [value, onChange, defaultProperyValue, property]);
   return jsxs(Grid$1, Object.assign({
     xs: 12
   }, {
@@ -4007,21 +4040,14 @@ const PropertyFiller = ({
       }))
     })) : null, fillOption === 'expression' && (propertyType === PropertyType.JSON || propertyType === PropertyType.ENTITY || propertyType === PropertyType.ANY ? jsx(JsonEditor$1, {
       name: name,
-      ref: ref
+      ref: ref,
+      useParsedValue: true
     }) : jsx(ControlInput, {
       control: control,
       name: name,
       label: valueLabel,
       required: true,
-      hideErrorMessage: true,
-      onChange: e => {
-        try {
-          onChange(JSON.parse(e.target.value));
-        } catch (err) {
-          onChange(e.target.value);
-        }
-      },
-      value: typeof value === 'string' ? value : JSON.stringify(value)
+      hideErrorMessage: true
     })), fillOption === 'string' && jsx(ControlInput, {
       control: control,
       name: name,
@@ -4036,7 +4062,7 @@ const PropertyFiller = ({
       name: name,
       useExpression: useExpression,
       label: valueLabel,
-      inputRef: ref,
+      ref: ref,
       required: required
     }), fillOption === 'dem_builder' && jsx(CreateDefinition, {
       title: "JSON",
@@ -4108,9 +4134,13 @@ const MultiplePropertyWidget = ({
             size: "small",
             onClick: () => handleDeleteValue(index)
           }, {
-            children: jsx(CloseIcon, {
+            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"
+              })
+            }))
           }))
         }))]
       }))
@@ -4153,7 +4183,7 @@ const MultiplePropertyFiller = ({
   } = useController({
     control,
     name,
-    defaultValue: [],
+    defaultValue: property.defaultValue,
     rules: {
       validate: val => {
         if (required && !val) return 'Please, fill this field';
@@ -4188,16 +4218,17 @@ const MultiplePropertyFiller = ({
     } else if (selectedType === 'expression' || selectedType === 'json_valid' || selectedType === 'json_notvalid') {
       onChange('');
     } else if (selectedType === 'widget') {
+      console.log('WiDGET??');
       onChange([]);
     }
     setFillOption(selectedType);
     clearErrors(name);
   };
-  // useEffect(() => {
-  //   if (value === undefined) {
-  //     onChange([]);
-  //   } 
-  // }, [value, property, onChange]);
+  useEffect(() => {
+    if (value === undefined) {
+      onChange(property.isRequired ? [] : null);
+    }
+  }, [value, property, onChange]);
   return jsxs(Grid$1, {
     children: [title && jsx(Box, Object.assign({
       mb: 2
@@ -4562,7 +4593,7 @@ const ValidationNodeSelector = ({
       content: jsxs(Fragment, {
         children: [jsxs(Box, Object.assign({
           display: "flex",
-          alignItems: "center"
+          alignItems: "flex-end"
         }, {
           children: [jsx(ControlSelect, {
             required: true,

package/package.json

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

package/src/lib/Property/PropertyWidget/PropertyWidget.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { RefCallBack } from 'react-hook-form';
 import { PropertyUnion } from '../../../interfaces';
 type Props = {
     property: PropertyUnion;
@@ -7,7 +6,6 @@ type Props = {
     label?: string;
     useExpression?: boolean;
     required?: boolean;
-    inputRef: RefCallBack;
 };
-export declare const PropertyWidget: ({ property, name, label, useExpression, inputRef }: Props) => JSX.Element;
+export declare const PropertyWidget: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<any>>;
 export default PropertyWidget;