@dartech/arsenal-ui 1.3.59 → 1.3.61

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.js CHANGED
@@ -70,7 +70,6 @@ import StepLabel from '@mui/material/StepLabel';
70
70
  import StepContent from '@mui/material/StepContent';
71
71
  import StepConnector from '@mui/material/StepConnector';
72
72
  import Select from '@mui/material/Select';
73
- import CloseIcon from '@mui/icons-material/Close';
74
73
  import InputLabel from '@mui/material/InputLabel';
75
74
  import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
76
75
  import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
@@ -242,18 +241,15 @@ const ControlInput = _a => {
242
241
  _d = _c.field,
243
242
  {
244
243
  ref,
245
- onChange
244
+ onChange,
245
+ value
246
246
  } = _d,
247
- fieldProps = __rest(_d, ["ref", "onChange"]),
247
+ fieldProps = __rest(_d, ["ref", "onChange", "value"]),
248
248
  {
249
249
  fieldState: {
250
250
  error
251
251
  }
252
252
  } = _c;
253
- const value = useWatch({
254
- control,
255
- name
256
- });
257
253
  return jsx(TextField, Object.assign({}, fieldProps, {
258
254
  fullWidth: true,
259
255
  size: "small",
@@ -432,18 +428,15 @@ const ControlSelect = _a => {
432
428
  _d = _c.field,
433
429
  {
434
430
  ref,
435
- onChange
431
+ onChange,
432
+ value
436
433
  } = _d,
437
- fieldProps = __rest(_d, ["ref", "onChange"]),
434
+ fieldProps = __rest(_d, ["ref", "onChange", "value"]),
438
435
  {
439
436
  fieldState: {
440
437
  error
441
438
  }
442
439
  } = _c;
443
- const value = useWatch({
444
- control,
445
- name
446
- });
447
440
  const getValue = useCallback(option => {
448
441
  if (typeof option === 'string') return option;
449
442
  return valueKey ? option[valueKey] : option.value;
@@ -539,18 +532,15 @@ const ControlCheckbox = _a => {
539
532
  _c = _b.field,
540
533
  {
541
534
  ref,
542
- onChange
535
+ onChange,
536
+ value
543
537
  } = _c,
544
- fieldProps = __rest(_c, ["ref", "onChange"]),
538
+ fieldProps = __rest(_c, ["ref", "onChange", "value"]),
545
539
  {
546
540
  fieldState: {
547
541
  error
548
542
  }
549
543
  } = _b;
550
- const value = useWatch({
551
- control,
552
- name
553
- });
554
544
  const checked = useMemo(() => {
555
545
  if (typeof value === 'boolean') {
556
546
  return value;
@@ -618,19 +608,15 @@ const ControlRadio = ({
618
608
  }),
619
609
  _b = _a.field,
620
610
  {
621
- ref,
622
611
  onChange
623
612
  } = _b,
624
- fieldProps = __rest(_b, ["ref", "onChange"]),
613
+ fieldProps = __rest(_b, ["onChange"]),
625
614
  {
626
615
  fieldState: {
627
616
  error
628
617
  }
629
618
  } = _a;
630
- const value = useWatch({
631
- control,
632
- name
633
- });
619
+ // const value = useWatch({ control, name });
634
620
  const getValue = useCallback(option => {
635
621
  if (typeof option === 'string') return option;
636
622
  return valueKey ? option[valueKey] : option.value;
@@ -650,9 +636,6 @@ const ControlRadio = ({
650
636
  })), jsx(RadioGroup, Object.assign({}, fieldProps, {
651
637
  row: row,
652
638
  "aria-labelledby": "radio-buttons-group",
653
- ref: ref,
654
- name: name,
655
- value: value,
656
639
  onChange: customOnChange ? customOnChange : onChange
657
640
  }, {
658
641
  children: _values.map((item, i) => jsx(FormControlLabel, {
@@ -727,28 +710,26 @@ const ControlAutocomplete = _a => {
727
710
  disableCloseOnSelect
728
711
  } = _a,
729
712
  autocompleteProps = __rest(_a, ["control", "validate", "name", "label", "required", "defaultValue", "disabled", "hideErrorMessage", "onChange", "labelKey", "valueKey", "options", "multiple", "textFieldProps", "disableCloseOnSelect"]);
730
- const {
731
- field: {
713
+ const _b = useController({
714
+ name,
715
+ control,
716
+ defaultValue: defaultValue || (multiple ? [] : null),
717
+ rules: {
718
+ required: required && 'Please, fill this field',
719
+ validate
720
+ }
721
+ }),
722
+ _c = _b.field,
723
+ {
732
724
  ref,
733
725
  onChange
734
- },
735
- fieldState: {
736
- error
737
- }
738
- } = useController({
739
- name,
740
- control,
741
- defaultValue,
742
- rules: {
743
- required: required && 'Please, fill this field',
744
- validate
745
- }
746
- });
747
- const formValue = useWatch({
748
- control,
749
- name,
750
- defaultValue: multiple ? [] : null
751
- });
726
+ } = _c,
727
+ fieldProps = __rest(_c, ["ref", "onChange"]),
728
+ {
729
+ fieldState: {
730
+ error
731
+ }
732
+ } = _b;
752
733
  const {
753
734
  getOptionLabel,
754
735
  isOptionEqualToValue,
@@ -760,7 +741,7 @@ const ControlAutocomplete = _a => {
760
741
  const handleChange = (_, value) => {
761
742
  onChange(value);
762
743
  };
763
- return jsx(Autocomplete, Object.assign({
744
+ return jsx(Autocomplete, Object.assign({}, fieldProps, {
764
745
  fullWidth: true,
765
746
  disablePortal: true,
766
747
  size: "small",
@@ -771,7 +752,6 @@ const ControlAutocomplete = _a => {
771
752
  isOptionEqualToValue: isOptionEqualToValue,
772
753
  disableCloseOnSelect: disableCloseOnSelect || multiple,
773
754
  filterSelectedOptions: multiple,
774
- value: formValue,
775
755
  onChange: customOnChange ? customOnChange : handleChange,
776
756
  renderOption: renderOption,
777
757
  renderInput: params => {
@@ -817,28 +797,29 @@ function ControlQueryAutocomplete(_a) {
817
797
  itemQueryFunction
818
798
  } = _a,
819
799
  autocompleteProps = __rest(_a, ["name", "label", "control", "required", "searchBy", "labelKey", "multiple", "disabled", "valueKey", "sortBy", "hideErrorMessage", "disableCloseOnSelect", "textFieldProps", "onChange", "queryFunction", "validate", "itemQueryFunction"]);
820
- const {
821
- field: {
800
+ const _b = useController({
801
+ control,
802
+ name,
803
+ defaultValue: multiple ? [] : null,
804
+ rules: {
805
+ required: required && 'Please, fill this field',
806
+ validate
807
+ }
808
+ }),
809
+ _c = _b.field,
810
+ {
822
811
  ref,
823
- onChange: setFieldValue
824
- },
825
- fieldState: {
826
- error,
827
- isDirty
828
- }
829
- } = useController({
830
- control,
831
- name,
832
- rules: {
833
- required: required && 'Please, fill this field',
834
- validate
835
- }
836
- });
837
- const formValue = useWatch({
838
- control,
839
- name,
840
- defaultValue: multiple ? [] : null
841
- });
812
+ onChange: setFieldValue,
813
+ value: formValue
814
+ } = _c,
815
+ fieldProps = __rest(_c, ["ref", "onChange", "value"]),
816
+ {
817
+ fieldState: {
818
+ error,
819
+ isDirty
820
+ }
821
+ } = _b;
822
+ // const formValue = useWatch({ control, name, defaultValue: });
842
823
  const {
843
824
  getOptionLabel,
844
825
  isOptionEqualToValue,
@@ -914,7 +895,7 @@ function ControlQueryAutocomplete(_a) {
914
895
  setTotalItems(data.totalItems);
915
896
  }
916
897
  }, [data]);
917
- return jsx(Autocomplete, Object.assign({
898
+ return jsx(Autocomplete, Object.assign({}, fieldProps, {
918
899
  fullWidth: true,
919
900
  disablePortal: true,
920
901
  size: "small",
@@ -1057,43 +1038,46 @@ const ControlAceEditor = /*#__PURE__*/forwardRef((_a, ref) => {
1057
1038
  setError,
1058
1039
  clearErrors
1059
1040
  } = useFormContext();
1060
- const {
1061
- field: {
1041
+ const _b = useController({
1042
+ control,
1043
+ name,
1044
+ rules: {
1045
+ required: required && 'Please, fill this field'
1046
+ }
1047
+ }),
1048
+ _c = _b.field,
1049
+ {
1062
1050
  onChange,
1051
+ value,
1063
1052
  ref: formRef
1064
- },
1065
- fieldState: {
1066
- error
1067
- }
1068
- } = useController({
1069
- control,
1070
- name,
1071
- rules: {
1072
- required: required && 'Please, fill this field'
1073
- }
1074
- });
1075
- const value = useWatch({
1076
- control,
1077
- name
1078
- });
1053
+ } = _c,
1054
+ fieldProps = __rest(_c, ["onChange", "value", "ref"]),
1055
+ {
1056
+ fieldState: {
1057
+ error
1058
+ }
1059
+ } = _b;
1060
+ // console.log('validateJson', validateJson, name);
1061
+ // console.log('parseValue', parseValue, name);
1079
1062
  const extensions = useMemo(() => ({
1080
1063
  json: [langs.json()],
1081
1064
  javascript: [langs.javascript()],
1082
1065
  python: [langs.python()]
1083
1066
  }), []);
1084
1067
  const handleChange = useCallback(value => {
1085
- if (!value && required) {
1086
- setError(name, {
1087
- message: 'Required field'
1088
- });
1089
- } else {
1090
- clearErrors(name);
1091
- }
1068
+ // console.log('handleChange', name, value);
1069
+ // if (!value && required) {
1070
+ // setError(name, { message: 'Required field' });
1071
+ // } else {
1072
+ // clearErrors(name);
1073
+ // }
1092
1074
  if (validateJson) {
1093
1075
  try {
1076
+ // console.log('validateJson', JSON.parse(value), name);
1094
1077
  JSON.parse(value);
1095
1078
  clearErrors(name);
1096
1079
  } catch (error) {
1080
+ console.error(error);
1097
1081
  setError(name, {
1098
1082
  message: 'Invalid JSON'
1099
1083
  });
@@ -1109,7 +1093,7 @@ const ControlAceEditor = /*#__PURE__*/forwardRef((_a, ref) => {
1109
1093
  } else {
1110
1094
  onChange(value);
1111
1095
  }
1112
- }, [setError, clearErrors, onChange, required, name, parseValue, validateJson]);
1096
+ }, [setError, clearErrors, onChange, name, parseValue, validateJson]);
1113
1097
  return jsxs(Box, Object.assign({
1114
1098
  display: "flex",
1115
1099
  flexDirection: "column",
@@ -1133,7 +1117,7 @@ const ControlAceEditor = /*#__PURE__*/forwardRef((_a, ref) => {
1133
1117
  }) : label
1134
1118
  }))
1135
1119
  }), jsxs(Fragment, {
1136
- children: [jsx(CodeMirror, Object.assign({
1120
+ children: [jsx(CodeMirror, Object.assign({}, fieldProps, {
1137
1121
  ref: ref || formRef,
1138
1122
  basicSetup: {
1139
1123
  autocompletion: true,
@@ -1959,13 +1943,10 @@ const ControlSwitch = _a => {
1959
1943
  }).field,
1960
1944
  {
1961
1945
  ref,
1962
- onChange
1946
+ onChange,
1947
+ value
1963
1948
  } = _b,
1964
- fieldProps = __rest(_b, ["ref", "onChange"]);
1965
- const value = useWatch({
1966
- control,
1967
- name
1968
- });
1949
+ fieldProps = __rest(_b, ["ref", "onChange", "value"]);
1969
1950
  const checked = useMemo(() => {
1970
1951
  if (typeof value === 'boolean') {
1971
1952
  return value;
@@ -2157,18 +2138,15 @@ const ControlTime = ({
2157
2138
  _b = _a.field,
2158
2139
  {
2159
2140
  onChange,
2160
- ref
2141
+ ref,
2142
+ value
2161
2143
  } = _b,
2162
- fieldProps = __rest(_b, ["onChange", "ref"]),
2144
+ fieldProps = __rest(_b, ["onChange", "ref", "value"]),
2163
2145
  {
2164
2146
  fieldState: {
2165
2147
  error
2166
2148
  }
2167
2149
  } = _a;
2168
- const value = useWatch({
2169
- control,
2170
- name
2171
- });
2172
2150
  const [fieldValue, setFieldValue] = useState(null);
2173
2151
  const handleChange = date => {
2174
2152
  setFieldValue(date);
@@ -3597,53 +3575,6 @@ const PropertyAdditionalFields = ({
3597
3575
  }
3598
3576
  };
3599
3577
 
3600
- const JsonEditor = /*#__PURE__*/forwardRef(({
3601
- validate: _validate = false,
3602
- name,
3603
- useParsedValue
3604
- }, ref) => {
3605
- const {
3606
- control,
3607
- setValue,
3608
- setError,
3609
- clearErrors
3610
- } = useFormContext();
3611
- const value = useWatch({
3612
- control,
3613
- name
3614
- });
3615
- const handleChange = value => {
3616
- try {
3617
- if (value) setValue(name, useParsedValue ? JSON.parse(value) : value);
3618
- clearErrors(name);
3619
- } catch (e) {
3620
- if (_validate) setError(name, {
3621
- message: 'Invalid JSON'
3622
- });
3623
- }
3624
- };
3625
- return jsx(CodeMirror, {
3626
- ref: ref,
3627
- basicSetup: {
3628
- autocompletion: true,
3629
- history: true
3630
- },
3631
- theme: abcdef,
3632
- width: "100%",
3633
- height: "200px",
3634
- style: {
3635
- fontSize: 14,
3636
- lineHeight: 1.4,
3637
- zIndex: 0,
3638
- isolation: 'isolate'
3639
- },
3640
- value: typeof value !== 'string' ? value === null ? '' : JSON.stringify(value) : value,
3641
- onChange: handleChange,
3642
- extensions: [langs.json()]
3643
- });
3644
- });
3645
- var JsonEditor$1 = JsonEditor;
3646
-
3647
3578
  const StringValueField = ({
3648
3579
  name,
3649
3580
  label,
@@ -3705,21 +3636,20 @@ const StringValueField = ({
3705
3636
  };
3706
3637
  var StringValueField$1 = StringValueField;
3707
3638
 
3708
- const PropertyWidget = /*#__PURE__*/forwardRef(({
3639
+ const PropertyWidget = ({
3709
3640
  property,
3710
3641
  name,
3711
3642
  label,
3712
- useExpression
3713
- }, ref) => {
3714
- const {
3715
- control
3716
- } = useFormContext();
3643
+ useExpression,
3644
+ control
3645
+ }) => {
3717
3646
  const propertyType = useMemo(() => typeof property.propertyType === 'string' ? property.propertyType : property['propertyType']['value'], [property]);
3718
3647
  switch (propertyType) {
3719
3648
  case PropertyType.BIG_DECIMAL:
3720
3649
  case PropertyType.FLOAT:
3721
3650
  case PropertyType.DOUBLE:
3722
3651
  return jsx(ControlNumberInput, {
3652
+ required: true,
3723
3653
  decimal: true,
3724
3654
  hideErrorMessage: true,
3725
3655
  control: control,
@@ -3730,10 +3660,8 @@ const PropertyWidget = /*#__PURE__*/forwardRef(({
3730
3660
  case PropertyType.INTEGER:
3731
3661
  case PropertyType.BIG_INTEGER:
3732
3662
  case PropertyType.LONG:
3733
- return jsx(ControlNumberInput
3734
- // required
3735
- , {
3736
- // required
3663
+ return jsx(ControlNumberInput, {
3664
+ required: true,
3737
3665
  hideErrorMessage: true,
3738
3666
  control: control,
3739
3667
  name: name,
@@ -3779,12 +3707,15 @@ const PropertyWidget = /*#__PURE__*/forwardRef(({
3779
3707
  format: property.format
3780
3708
  });
3781
3709
  case PropertyType.JSON:
3782
- return jsx(JsonEditor$1, {
3783
- validate: true,
3710
+ return jsx(ControlAceEditor, {
3711
+ control: control,
3784
3712
  name: name,
3785
- ref: ref,
3786
- useParsedValue: true
3713
+ label: label,
3714
+ parseValue: true,
3715
+ hideErrorMessage: true,
3716
+ validateJson: true
3787
3717
  });
3718
+ // return <JsonEditor validate name={name} ref={ref} useParsedValue />;
3788
3719
  case PropertyType.STRING:
3789
3720
  return jsx(StringValueField$1
3790
3721
  // required={!property.isRequired}
@@ -3803,9 +3734,11 @@ const PropertyWidget = /*#__PURE__*/forwardRef(({
3803
3734
  control: control
3804
3735
  });
3805
3736
  case PropertyType.ANY:
3806
- return jsx(JsonEditor$1, {
3737
+ return jsx(ControlAceEditor, {
3738
+ control: control,
3807
3739
  name: name,
3808
- ref: ref
3740
+ hideErrorMessage: true,
3741
+ label: label
3809
3742
  });
3810
3743
  case PropertyType.ENTITY:
3811
3744
  return jsx(DefinitionFiller, {
@@ -3818,7 +3751,7 @@ const PropertyWidget = /*#__PURE__*/forwardRef(({
3818
3751
  children: "No widget"
3819
3752
  });
3820
3753
  }
3821
- });
3754
+ };
3822
3755
 
3823
3756
  const usePropertyFiller = ({
3824
3757
  value,
@@ -3846,31 +3779,29 @@ const usePropertyFiller = ({
3846
3779
  useExpression: _useExpression
3847
3780
  }), [_useExpression, _required, propertyType, _multipleOptions]);
3848
3781
  const defaultProperyValue = useMemo(() => {
3849
- if (property.isRequired) {
3850
- switch (propertyType) {
3851
- case PropertyType.STRING:
3852
- case PropertyType.DATE:
3853
- case PropertyType.TIME:
3854
- case PropertyType.DATE_TIME:
3855
- case PropertyType.ENTITY_REFERENCE:
3856
- case PropertyType.ANY:
3857
- return '';
3858
- case PropertyType.JSON:
3859
- return {};
3860
- case PropertyType.BOOLEAN:
3861
- return true;
3862
- case PropertyType.INTEGER:
3863
- case PropertyType.BIG_DECIMAL:
3864
- case PropertyType.BIG_INTEGER:
3865
- case PropertyType.DOUBLE:
3866
- case PropertyType.LONG:
3867
- case PropertyType.FLOAT:
3868
- return 0;
3869
- default:
3870
- return {};
3871
- }
3872
- } else return null;
3873
- }, [propertyType, property]);
3782
+ switch (propertyType) {
3783
+ case PropertyType.STRING:
3784
+ case PropertyType.DATE:
3785
+ case PropertyType.TIME:
3786
+ case PropertyType.DATE_TIME:
3787
+ case PropertyType.ENTITY_REFERENCE:
3788
+ case PropertyType.ANY:
3789
+ return '';
3790
+ case PropertyType.JSON:
3791
+ return {};
3792
+ case PropertyType.BOOLEAN:
3793
+ return true;
3794
+ case PropertyType.INTEGER:
3795
+ case PropertyType.BIG_DECIMAL:
3796
+ case PropertyType.BIG_INTEGER:
3797
+ case PropertyType.DOUBLE:
3798
+ case PropertyType.LONG:
3799
+ case PropertyType.FLOAT:
3800
+ return 0;
3801
+ default:
3802
+ return {};
3803
+ }
3804
+ }, [propertyType]);
3874
3805
  useEffect(() => {
3875
3806
  if (!fillOption) {
3876
3807
  if (isPropertyValueEmpty(value) && (fillOptions === null || fillOptions === void 0 ? void 0 : fillOptions.length)) {
@@ -3924,8 +3855,6 @@ const PropertyFiller = ({
3924
3855
  } = useFormContext();
3925
3856
  const {
3926
3857
  field: {
3927
- ref,
3928
- onChange,
3929
3858
  value
3930
3859
  },
3931
3860
  fieldState: {
@@ -3967,7 +3896,7 @@ const PropertyFiller = ({
3967
3896
  properties: propertiesArrayToObject(value.property || [])
3968
3897
  });
3969
3898
  try {
3970
- onChange(JSON.stringify(definitionValue, null, '\t'));
3899
+ setValue(name, JSON.stringify(definitionValue, null, '\t'));
3971
3900
  } catch (error) {
3972
3901
  console.log('Stringify failed', error);
3973
3902
  }
@@ -3975,7 +3904,7 @@ const PropertyFiller = ({
3975
3904
  setValue(name, property.defaultValue || defaultProperyValue);
3976
3905
  }
3977
3906
  } else if (selectedType === 'expression' || selectedType === 'string') {
3978
- onChange('');
3907
+ setValue(name, '');
3979
3908
  } else if (selectedType === 'dem_builder') {
3980
3909
  const defaultArrayValue = {
3981
3910
  code: '',
@@ -3987,22 +3916,27 @@ const PropertyFiller = ({
3987
3916
  try {
3988
3917
  const definitionValue = JSON.parse(value);
3989
3918
  definitionValue['properties'] = propertiesObjectToArray(definitionValue['properties'] || {});
3990
- onChange(definitionValue);
3919
+ setValue(name, definitionValue);
3991
3920
  } catch (error) {
3992
- onChange(defaultArrayValue);
3921
+ setValue(name, defaultArrayValue);
3993
3922
  // console.log('Parse failed');
3994
3923
  }
3995
3924
  } else {
3996
- onChange(defaultArrayValue);
3925
+ setValue(name, defaultArrayValue);
3997
3926
  }
3998
3927
  }
3999
3928
  clearErrors();
4000
- }, [name, defaultProperyValue, clearErrors, value, setFillOption, onChange, fillOption, propertyType, setValue, property]);
3929
+ }, [name, defaultProperyValue, clearErrors, value, setFillOption, fillOption, propertyType, setValue, property]);
4001
3930
  useEffect(() => {
4002
- if (value === undefined) {
4003
- onChange(property.defaultValue || defaultProperyValue);
3931
+ if (!isDirty && property.defaultValue) {
3932
+ setValue(name, property.defaultValue);
4004
3933
  }
4005
- }, [value, onChange, defaultProperyValue, property]);
3934
+ }, [isDirty, property, name, setValue]);
3935
+ useEffect(() => {
3936
+ if (value === undefined || property.isRequired && value === null) {
3937
+ setValue(name, defaultProperyValue);
3938
+ }
3939
+ }, [value, setValue, defaultProperyValue, property, name, isDirty]);
4006
3940
  return jsxs(Grid$1, Object.assign({
4007
3941
  xs: 12
4008
3942
  }, {
@@ -4039,10 +3973,15 @@ const PropertyFiller = ({
4039
3973
  }), option.value))
4040
3974
  }))]
4041
3975
  }))
4042
- })) : null, fillOption === 'expression' && (propertyType === PropertyType.JSON || propertyType === PropertyType.ENTITY || propertyType === PropertyType.ANY ? jsx(JsonEditor$1, {
3976
+ })) : null, fillOption === 'expression' && (propertyType === PropertyType.JSON || propertyType === PropertyType.ENTITY || propertyType === PropertyType.ANY ?
3977
+ // <JsonEditor validate name={name} useParsedValue />
3978
+ jsx(ControlAceEditor, {
4043
3979
  name: name,
4044
- ref: ref,
4045
- useParsedValue: true
3980
+ control: control,
3981
+ label: valueLabel,
3982
+ parseValue: true,
3983
+ validateJson: true,
3984
+ hideErrorMessage: true
4046
3985
  }) : jsx(ControlInput, {
4047
3986
  control: control,
4048
3987
  name: name,
@@ -4055,15 +3994,19 @@ const PropertyFiller = ({
4055
3994
  label: valueLabel,
4056
3995
  required: true,
4057
3996
  hideErrorMessage: true
4058
- }), fillOption === 'json_notvalid' && jsx(JsonEditor$1, {
3997
+ }), fillOption === 'json_notvalid' &&
3998
+ // <JsonEditor validate name={name} />
3999
+ jsx(ControlAceEditor, {
4059
4000
  name: name,
4060
- ref: ref
4001
+ control: control,
4002
+ label: valueLabel,
4003
+ hideErrorMessage: true
4061
4004
  }), fillOption === 'widget' && jsx(PropertyWidget, {
4005
+ control: control,
4062
4006
  property: property,
4063
4007
  name: name,
4064
4008
  useExpression: useExpression,
4065
4009
  label: valueLabel,
4066
- ref: ref,
4067
4010
  required: required
4068
4011
  }), fillOption === 'dem_builder' && jsx(CreateDefinition, {
4069
4012
  title: "JSON",
@@ -4076,6 +4019,53 @@ const PropertyFiller = ({
4076
4019
  }));
4077
4020
  };
4078
4021
 
4022
+ const JsonEditor = /*#__PURE__*/forwardRef(({
4023
+ validate: _validate = false,
4024
+ name,
4025
+ useParsedValue
4026
+ }, ref) => {
4027
+ const {
4028
+ control,
4029
+ setValue,
4030
+ setError,
4031
+ clearErrors
4032
+ } = useFormContext();
4033
+ const value = useWatch({
4034
+ control,
4035
+ name
4036
+ });
4037
+ const handleChange = value => {
4038
+ try {
4039
+ if (value) setValue(name, useParsedValue ? JSON.parse(value) : value);
4040
+ clearErrors(name);
4041
+ } catch (e) {
4042
+ if (_validate) setError(name, {
4043
+ message: 'Invalid JSON'
4044
+ });
4045
+ }
4046
+ };
4047
+ return jsx(CodeMirror, {
4048
+ ref: ref,
4049
+ basicSetup: {
4050
+ autocompletion: true,
4051
+ history: true
4052
+ },
4053
+ theme: abcdef,
4054
+ width: "100%",
4055
+ height: "200px",
4056
+ style: {
4057
+ fontSize: 14,
4058
+ lineHeight: 1.4,
4059
+ zIndex: 0,
4060
+ isolation: 'isolate'
4061
+ },
4062
+ value: typeof value !== 'string' ? value === null ? '' : JSON.stringify(value) : value,
4063
+ onChange: handleChange,
4064
+ extensions: [langs.json()]
4065
+ });
4066
+ });
4067
+ var JsonEditor$1 = JsonEditor;
4068
+
4079
4069
  const MultiplePropertyWidget = ({
4080
4070
  name,
4081
4071
  property,
@@ -4135,9 +4125,13 @@ const MultiplePropertyWidget = ({
4135
4125
  size: "small",
4136
4126
  onClick: () => handleDeleteValue(index)
4137
4127
  }, {
4138
- children: jsx(CloseIcon, {
4128
+ children: jsx(SvgIcon, Object.assign({
4139
4129
  fontSize: "small"
4140
- })
4130
+ }, {
4131
+ children: jsx("path", {
4132
+ 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"
4133
+ })
4134
+ }))
4141
4135
  }))
4142
4136
  }))]
4143
4137
  }))
@@ -4171,7 +4165,8 @@ const MultiplePropertyFiller = ({
4171
4165
  const {
4172
4166
  field: {
4173
4167
  ref,
4174
- onChange
4168
+ onChange,
4169
+ value
4175
4170
  },
4176
4171
  fieldState: {
4177
4172
  error,
@@ -4188,10 +4183,6 @@ const MultiplePropertyFiller = ({
4188
4183
  }
4189
4184
  }
4190
4185
  });
4191
- const value = useWatch({
4192
- control,
4193
- name
4194
- });
4195
4186
  const {
4196
4187
  propertyType,
4197
4188
  valueLabel,
@@ -4221,7 +4212,7 @@ const MultiplePropertyFiller = ({
4221
4212
  clearErrors(name);
4222
4213
  };
4223
4214
  useEffect(() => {
4224
- if (value === undefined) {
4215
+ if (!value) {
4225
4216
  onChange(property.isRequired ? [] : null);
4226
4217
  }
4227
4218
  }, [value, property, onChange]);
@@ -4324,7 +4315,7 @@ const PropertyValueField = ({
4324
4315
  const typeValue = typeof propertyType === 'string' ? propertyType : propertyType.value;
4325
4316
  return {
4326
4317
  name: _label,
4327
- isRequired,
4318
+ isRequired: required !== null && required !== void 0 ? required : isRequired,
4328
4319
  isMultiple,
4329
4320
  format,
4330
4321
  restrictedValues,
@@ -4337,7 +4328,7 @@ const PropertyValueField = ({
4337
4328
  uiSettings: null,
4338
4329
  validationNode: null
4339
4330
  };
4340
- }, [propertyType, format, restrictedValues, isMultiple, _label, isRequired, properties]);
4331
+ }, [propertyType, format, restrictedValues, isMultiple, _label, isRequired, properties, required]);
4341
4332
  return isMultiple ? jsx(MultiplePropertyFiller, {
4342
4333
  name: name,
4343
4334
  property: fillerProperty,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dartech/arsenal-ui",
3
- "version": "1.3.59",
3
+ "version": "1.3.61",
4
4
  "author": "DAR",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ import { Control } from 'react-hook-form';
2
3
  import { PropertyUnion } from '../../../interfaces';
3
4
  type Props = {
4
5
  property: PropertyUnion;
@@ -6,6 +7,7 @@ type Props = {
6
7
  label?: string;
7
8
  useExpression?: boolean;
8
9
  required?: boolean;
10
+ control: Control<any>;
9
11
  };
10
- export declare const PropertyWidget: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<any>>;
12
+ export declare const PropertyWidget: ({ property, name, label, useExpression, control }: Props) => JSX.Element;
11
13
  export default PropertyWidget;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  type Props = {
3
2
  name: string;
4
3
  label?: string;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  type Props = {
3
2
  name: string;
4
3
  label?: string;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  type Props = {
3
2
  name: string;
4
3
  format: string;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  type Props = {
3
2
  name: string;
4
3
  label?: string;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  type Props = {
3
2
  name: string;
4
3
  label?: string;
@@ -1,2 +1,3 @@
1
1
  export * from './CreatePropertiesList';
2
2
  export * from './CreatePropertyFormFields';
3
+ export * from './PropertyValueField';
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { PropertyUnion } from '../../../interfaces';
3
2
  type PropertyItemProps = {
4
3
  property: PropertyUnion;
@@ -1,5 +1,4 @@
1
1
  export * from './UpsertProperty';
2
- export * from './PropertyValueField';
3
2
  export * from './ViewProperty';
4
3
  export * from './ViewPropertiesList';
5
4
  export * from './PropertyFiller';