@dartech/arsenal-ui 1.3.93 → 1.3.95

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
@@ -9,9 +9,9 @@ import DialogTitle from '@mui/material/DialogTitle';
9
9
  import Box from '@mui/material/Box';
10
10
  import CircularProgress from '@mui/material/CircularProgress';
11
11
  import { __rest, __awaiter } from 'tslib';
12
- import { useController, useWatch, useFormContext, useFieldArray } from 'react-hook-form';
12
+ import { useController, useWatch, useFormContext, Controller, useFieldArray, useForm } from 'react-hook-form';
13
13
  import TextField from '@mui/material/TextField';
14
- import React, { useRef, useEffect, useState, useCallback, useMemo, createElement, forwardRef, createContext, useContext, memo, Suspense } from 'react';
14
+ import React, { useRef, useEffect, useState, useCallback, useMemo, createElement, forwardRef, createContext, useContext, memo, useImperativeHandle, Suspense } from 'react';
15
15
  import MenuItem from '@mui/material/MenuItem';
16
16
  import SvgIcon from '@mui/material/SvgIcon';
17
17
  import IconButton from '@mui/material/IconButton';
@@ -40,6 +40,7 @@ import { TimePicker } from '@mui/x-date-pickers/TimePicker';
40
40
  import Chip from '@mui/material/Chip';
41
41
  import Grid from '@mui/material/Unstable_Grid2';
42
42
  import { toString, parse as parse$1 } from 'duration-fns';
43
+ import InputMask from 'react-input-mask';
43
44
  import Pagination from '@mui/material/Pagination';
44
45
  import MuiTablePagination from '@mui/material/TablePagination';
45
46
  import { useGridApiContext, useGridSelector, gridPageSelector, gridPageCountSelector, gridRowCountSelector, gridPageSizeSelector, GridColumnMenuContainer, GridFilterMenuItem, DataGrid, GridActionsCellItem } from '@mui/x-data-grid';
@@ -1517,6 +1518,7 @@ const formatPropertyValue = (propertyType, value, params) => {
1517
1518
  return null;
1518
1519
  }
1519
1520
  let parsedValue = value;
1521
+ // console.log(value);
1520
1522
  switch (propertyType) {
1521
1523
  case PropertyType.BOOLEAN:
1522
1524
  if (value) {
@@ -1536,8 +1538,10 @@ const formatPropertyValue = (propertyType, value, params) => {
1536
1538
  case PropertyType.DATE:
1537
1539
  case PropertyType.DATE_TIME:
1538
1540
  case PropertyType.TIME:
1539
- parsedValue = format(new Date(value.toString()), params.formatText);
1540
- break;
1541
+ {
1542
+ if (value) parsedValue = format(new Date(value.toString()), params.formatText);
1543
+ break;
1544
+ }
1541
1545
  case PropertyType.JSON:
1542
1546
  case PropertyType.ANY:
1543
1547
  try {
@@ -2037,14 +2041,26 @@ const ControlSwitch = _a => {
2037
2041
  });
2038
2042
  };
2039
2043
 
2040
- const ControlDate = ({
2041
- control,
2042
- name,
2043
- required,
2044
- label,
2045
- format: _format = DATE_DEFAULT_FORMAT,
2046
- hideErrorMessage: _hideErrorMessage = false
2047
- }) => {
2044
+ var img$3 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M17.75 3C18.612 3 19.4386 3.34241 20.0481 3.9519C20.6576 4.5614 21 5.38805 21 6.25V17.75C21 18.612 20.6576 19.4386 20.0481 20.0481C19.4386 20.6576 18.612 21 17.75 21H6.25C5.38805 21 4.5614 20.6576 3.9519 20.0481C3.34241 19.4386 3 18.612 3 17.75V6.25C3 5.38805 3.34241 4.5614 3.9519 3.9519C4.5614 3.34241 5.38805 3 6.25 3H17.75ZM19.5 8.5H4.5V17.75C4.5 18.716 5.284 19.5 6.25 19.5H17.75C18.2141 19.5 18.6592 19.3156 18.9874 18.9874C19.3156 18.6592 19.5 18.2141 19.5 17.75V8.5ZM7.75 14.5C8.08152 14.5 8.39946 14.6317 8.63388 14.8661C8.8683 15.1005 9 15.4185 9 15.75C9 16.0815 8.8683 16.3995 8.63388 16.6339C8.39946 16.8683 8.08152 17 7.75 17C7.41848 17 7.10054 16.8683 6.86612 16.6339C6.6317 16.3995 6.5 16.0815 6.5 15.75C6.5 15.4185 6.6317 15.1005 6.86612 14.8661C7.10054 14.6317 7.41848 14.5 7.75 14.5ZM12 14.5C12.3315 14.5 12.6495 14.6317 12.8839 14.8661C13.1183 15.1005 13.25 15.4185 13.25 15.75C13.25 16.0815 13.1183 16.3995 12.8839 16.6339C12.6495 16.8683 12.3315 17 12 17C11.6685 17 11.3505 16.8683 11.1161 16.6339C10.8817 16.3995 10.75 16.0815 10.75 15.75C10.75 15.4185 10.8817 15.1005 11.1161 14.8661C11.3505 14.6317 11.6685 14.5 12 14.5ZM7.75 10.5C8.08152 10.5 8.39946 10.6317 8.63388 10.8661C8.8683 11.1005 9 11.4185 9 11.75C9 12.0815 8.8683 12.3995 8.63388 12.6339C8.39946 12.8683 8.08152 13 7.75 13C7.41848 13 7.10054 12.8683 6.86612 12.6339C6.6317 12.3995 6.5 12.0815 6.5 11.75C6.5 11.4185 6.6317 11.1005 6.86612 10.8661C7.10054 10.6317 7.41848 10.5 7.75 10.5ZM12 10.5C12.3315 10.5 12.6495 10.6317 12.8839 10.8661C13.1183 11.1005 13.25 11.4185 13.25 11.75C13.25 12.0815 13.1183 12.3995 12.8839 12.6339C12.6495 12.8683 12.3315 13 12 13C11.6685 13 11.3505 12.8683 11.1161 12.6339C10.8817 12.3995 10.75 12.0815 10.75 11.75C10.75 11.4185 10.8817 11.1005 11.1161 10.8661C11.3505 10.6317 11.6685 10.5 12 10.5ZM16.25 10.5C16.5815 10.5 16.8995 10.6317 17.1339 10.8661C17.3683 11.1005 17.5 11.4185 17.5 11.75C17.5 12.0815 17.3683 12.3995 17.1339 12.6339C16.8995 12.8683 16.5815 13 16.25 13C15.9185 13 15.6005 12.8683 15.3661 12.6339C15.1317 12.3995 15 12.0815 15 11.75C15 11.4185 15.1317 11.1005 15.3661 10.8661C15.6005 10.6317 15.9185 10.5 16.25 10.5ZM17.75 4.5H6.25C5.78587 4.5 5.34075 4.68437 5.01256 5.01256C4.68437 5.34075 4.5 5.78587 4.5 6.25V7H19.5V6.25C19.5 5.78587 19.3156 5.34075 18.9874 5.01256C18.6592 4.68437 18.2141 4.5 17.75 4.5Z' fill='%238B8C9E'/%3e%3c/svg%3e";
2045
+ var DateIcon = img$3;
2046
+
2047
+ const DateIconComponent$1 = () => {
2048
+ return jsx("img", {
2049
+ src: DateIcon,
2050
+ alt: ""
2051
+ });
2052
+ };
2053
+ const ControlDate = _a => {
2054
+ var {
2055
+ control,
2056
+ name,
2057
+ required,
2058
+ label,
2059
+ format: format$1 = DATE_DEFAULT_FORMAT,
2060
+ hideErrorMessage = false,
2061
+ textFieldProps = {}
2062
+ } = _a,
2063
+ datePickerProps = __rest(_a, ["control", "name", "required", "label", "format", "hideErrorMessage", "textFieldProps"]);
2048
2064
  const [localFormat, setLocalFormat] = useState(DATE_DEFAULT_FORMAT);
2049
2065
  const {
2050
2066
  field,
@@ -2069,14 +2085,14 @@ const ControlDate = ({
2069
2085
  field.onChange(isValid(date) ? format(date, localFormat) : date);
2070
2086
  }, [field, localFormat]);
2071
2087
  useEffect(() => {
2072
- const fixedTimeZone = _format.replace(/[Z,z,x]+/g, 'XX');
2088
+ const fixedTimeZone = format$1.replace(/[Z,z,x]+/g, 'XX');
2073
2089
  try {
2074
2090
  isMatch(format(new Date(), fixedTimeZone), fixedTimeZone);
2075
2091
  setLocalFormat(fixedTimeZone);
2076
2092
  } catch (e) {
2077
2093
  console.error(e);
2078
2094
  }
2079
- }, [_format]);
2095
+ }, [format$1]);
2080
2096
  return jsx(DatePicker, Object.assign({}, field, {
2081
2097
  label: required ? jsxs(Fragment, {
2082
2098
  children: [label, " ", jsx("span", {
@@ -2086,7 +2102,11 @@ const ControlDate = ({
2086
2102
  inputFormat: localFormat,
2087
2103
  value: localFormat ? parse(field.value, localFormat, new Date()) : field.value,
2088
2104
  onChange: handleChange,
2089
- renderInput: props => jsx(TextField, Object.assign({}, props, {
2105
+ components: {
2106
+ OpenPickerIcon: DateIconComponent$1
2107
+ }
2108
+ }, datePickerProps, {
2109
+ renderInput: params => jsx(TextField, Object.assign({}, params, {
2090
2110
  fullWidth: true,
2091
2111
  size: "small",
2092
2112
  sx: {
@@ -2097,19 +2117,28 @@ const ControlDate = ({
2097
2117
  variant: "outlined",
2098
2118
  name: name,
2099
2119
  error: !!error,
2100
- helperText: !_hideErrorMessage && (error === null || error === void 0 ? void 0 : error.message)
2101
- }))
2120
+ helperText: !hideErrorMessage && (error === null || error === void 0 ? void 0 : error.message)
2121
+ }, textFieldProps))
2102
2122
  }));
2103
2123
  };
2104
2124
 
2105
- const ControlDateTime = ({
2106
- control,
2107
- name,
2108
- required,
2109
- label,
2110
- format: _format = DATE_TIME_DEFAULT_FORMAT,
2111
- hideErrorMessage: _hideErrorMessage = false
2112
- }) => {
2125
+ const DateIconComponent = () => {
2126
+ return jsx("img", {
2127
+ src: DateIcon,
2128
+ alt: ""
2129
+ });
2130
+ };
2131
+ const ControlDateTime = _a => {
2132
+ var {
2133
+ control,
2134
+ name,
2135
+ required,
2136
+ label,
2137
+ format: format$1 = DATE_TIME_DEFAULT_FORMAT,
2138
+ hideErrorMessage = false,
2139
+ textFieldProps
2140
+ } = _a,
2141
+ dateTimePickerProps = __rest(_a, ["control", "name", "required", "label", "format", "hideErrorMessage", "textFieldProps"]);
2113
2142
  const [localFormat, setLocalFormat] = useState(DATE_TIME_DEFAULT_FORMAT);
2114
2143
  const {
2115
2144
  field,
@@ -2133,14 +2162,14 @@ const ControlDateTime = ({
2133
2162
  field.onChange(isValid(date) ? format(date, localFormat) : date);
2134
2163
  }, [field, localFormat]);
2135
2164
  useEffect(() => {
2136
- const fixedTimeZone = _format.replace(/[Z,z,x]+/g, 'XX');
2165
+ const fixedTimeZone = format$1.replace(/[Z,z,x]+/g, 'XX');
2137
2166
  try {
2138
2167
  isMatch(format(new Date(), fixedTimeZone), fixedTimeZone);
2139
2168
  setLocalFormat(fixedTimeZone);
2140
2169
  } catch (e) {
2141
2170
  console.error(e);
2142
2171
  }
2143
- }, [_format]);
2172
+ }, [format$1]);
2144
2173
  return jsx(DateTimePicker, Object.assign({}, field, {
2145
2174
  ampm: false,
2146
2175
  label: required ? jsxs(Fragment, {
@@ -2151,7 +2180,11 @@ const ControlDateTime = ({
2151
2180
  value: localFormat ? parse(field.value, localFormat, new Date()) : field.value,
2152
2181
  inputFormat: localFormat,
2153
2182
  onChange: handleChange,
2154
- renderInput: props => jsx(TextField, Object.assign({}, props, {
2183
+ components: {
2184
+ OpenPickerIcon: DateIconComponent
2185
+ }
2186
+ }, dateTimePickerProps, {
2187
+ renderInput: params => jsx(TextField, Object.assign({}, params, {
2155
2188
  fullWidth: true,
2156
2189
  size: "small",
2157
2190
  sx: {
@@ -2162,8 +2195,8 @@ const ControlDateTime = ({
2162
2195
  variant: "outlined",
2163
2196
  name: name,
2164
2197
  error: !!error,
2165
- helperText: !_hideErrorMessage && (error === null || error === void 0 ? void 0 : error.message)
2166
- }))
2198
+ helperText: !hideErrorMessage && (error === null || error === void 0 ? void 0 : error.message)
2199
+ }, textFieldProps))
2167
2200
  }));
2168
2201
  };
2169
2202
 
@@ -2251,15 +2284,15 @@ const ControlArrayInput = ({
2251
2284
  var _a, _b, _c;
2252
2285
  const [localValue, setLoacalValue] = useState('');
2253
2286
  const {
2254
- register,
2255
- setValue,
2256
- setError,
2257
- clearErrors,
2287
+ field: {
2288
+ onChange,
2289
+ value: values
2290
+ },
2291
+ // fieldState: { error },
2258
2292
  formState: {
2259
2293
  errors
2260
2294
  }
2261
- } = useFormContext();
2262
- const values = useWatch({
2295
+ } = useController({
2263
2296
  control,
2264
2297
  name
2265
2298
  });
@@ -2268,25 +2301,18 @@ const ControlArrayInput = ({
2268
2301
  value
2269
2302
  } = e.target;
2270
2303
  setLoacalValue(value);
2271
- if (values.includes(value)) {
2272
- setError(name, {
2273
- type: 'custom',
2274
- message: 'This value already exists'
2275
- });
2276
- } else {
2277
- clearErrors(name);
2278
- }
2279
- }, [values, name, setError, clearErrors]);
2304
+ if (Array.isArray(values) && values.includes(value)) ;
2305
+ }, [values]);
2280
2306
  const handleAdd = useCallback(() => {
2281
2307
  var _a;
2282
2308
  if (localValue && !((_a = errors[name]) === null || _a === void 0 ? void 0 : _a.message)) {
2283
- setValue(name, [...values, localValue]);
2309
+ onChange([...(values !== null && values !== void 0 ? values : []), localValue]);
2284
2310
  setLoacalValue('');
2285
2311
  }
2286
- }, [localValue, setValue, values, name, errors]);
2312
+ }, [localValue, onChange, values, name, errors]);
2287
2313
  const handleDelete = useCallback(value => {
2288
- setValue(name, values.filter(code => code !== value));
2289
- }, [values, name, setValue]);
2314
+ onChange(values.filter(code => code !== value));
2315
+ }, [values, onChange]);
2290
2316
  const handleKeyDown = useCallback(e => {
2291
2317
  if (e.key === 'Enter' || e.keyCode === 13) {
2292
2318
  e.stopPropagation();
@@ -2310,7 +2336,7 @@ const ControlArrayInput = ({
2310
2336
  display: "flex",
2311
2337
  flexWrap: "wrap"
2312
2338
  }, {
2313
- children: values.map((value, index) => jsx(Chip, {
2339
+ children: values === null || values === void 0 ? void 0 : values.map((value, index) => jsx(Chip, {
2314
2340
  sx: {
2315
2341
  mr: 1,
2316
2342
  mb: 1
@@ -2321,7 +2347,7 @@ const ControlArrayInput = ({
2321
2347
  }, index))
2322
2348
  })), jsx("input", Object.assign({
2323
2349
  type: "hidden"
2324
- }, register(name, {
2350
+ }, control.register(name, {
2325
2351
  required: required && 'Please, add a value'
2326
2352
  }))), jsx(TextField, {
2327
2353
  fullWidth: true,
@@ -2508,6 +2534,75 @@ const ControlPeriodInput = ({
2508
2534
  });
2509
2535
  };
2510
2536
 
2537
+ var img$2 = "data:image/svg+xml,%3csvg width='32' height='24' viewBox='0 0 32 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0_6762_5474)'%3e%3crect width='32' height='24' rx='2' fill='white'/%3e%3cmask id='mask0_6762_5474' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='32' height='24'%3e%3crect width='32' height='24' rx='2' fill='white'/%3e%3c/mask%3e%3cg mask='url(%23mask0_6762_5474)'%3e%3crect width='32' height='24' fill='%2330C6E0'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.0001 16.8002C18.5249 16.8002 20.5716 14.6512 20.5716 12.0002C20.5716 9.34923 18.5249 7.2002 16.0001 7.2002C13.4754 7.2002 11.4287 9.34923 11.4287 12.0002C11.4287 14.6512 13.4754 16.8002 16.0001 16.8002Z' fill='%23FFCD4B'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.1352 20.5791L16.0001 17.6561L17.865 20.5791L18.3374 17.096L21.2255 18.8799L20.2118 15.5264L23.5511 15.818L21.252 13.2584L24.381 11.9998L21.252 10.7411L23.5511 8.1816L20.2118 8.47311L21.2255 5.11966L18.3374 6.90359L17.865 3.42041L16.0001 6.34344L14.1352 3.42041L13.6628 6.90359L10.7747 5.11966L11.7884 8.47311L8.44912 8.1816L10.7482 10.7411L7.61914 11.9998L10.7482 13.2584L8.44912 15.818L11.7884 15.5264L10.7747 18.8799L13.6628 17.096L14.1352 20.5791ZM21.3334 11.9998C21.3334 15.0926 18.9456 17.5998 16.0001 17.5998C13.0546 17.5998 10.6668 15.0926 10.6668 11.9998C10.6668 8.90698 13.0546 6.39978 16.0001 6.39978C18.9456 6.39978 21.3334 8.90698 21.3334 11.9998Z' fill='%23FFCD4B'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.52393 1.93343C1.52393 1.74934 1.67316 1.6001 1.85726 1.6001H2.7144C2.8985 1.6001 3.04774 1.74934 3.04774 1.93343V2.86676C3.04774 3.05086 2.8985 3.2001 2.7144 3.2001H1.85726C1.67316 3.2001 1.52393 3.05086 1.52393 2.86676V1.93343ZM1.52393 5.13343C1.52393 4.94934 1.67316 4.8001 1.85726 4.8001H2.7144C2.8985 4.8001 3.04774 4.94934 3.04774 5.13343V6.06676C3.04774 6.25086 2.8985 6.4001 2.7144 6.4001H1.85726C1.67316 6.4001 1.52393 6.25086 1.52393 6.06676V5.13343ZM1.85726 8.0001C1.67316 8.0001 1.52393 8.14934 1.52393 8.33343V9.26676C1.52393 9.45086 1.67316 9.6001 1.85726 9.6001H2.7144C2.8985 9.6001 3.04774 9.45086 3.04774 9.26676V8.33343C3.04774 8.14934 2.8985 8.0001 2.7144 8.0001H1.85726ZM1.52393 11.5334C1.52393 11.3493 1.67316 11.2001 1.85726 11.2001H2.7144C2.8985 11.2001 3.04774 11.3493 3.04774 11.5334V12.4668C3.04774 12.6509 2.8985 12.8001 2.7144 12.8001H1.85726C1.67316 12.8001 1.52393 12.6509 1.52393 12.4668V11.5334ZM1.85726 14.4001C1.67316 14.4001 1.52393 14.5493 1.52393 14.7334V15.6668C1.52393 15.8509 1.67316 16.0001 1.85726 16.0001H2.7144C2.8985 16.0001 3.04774 15.8509 3.04774 15.6668V14.7334C3.04774 14.5493 2.8985 14.4001 2.7144 14.4001H1.85726ZM1.52393 17.9334C1.52393 17.7493 1.67316 17.6001 1.85726 17.6001H2.7144C2.8985 17.6001 3.04774 17.7493 3.04774 17.9334V18.8668C3.04774 19.0509 2.8985 19.2001 2.7144 19.2001H1.85726C1.67316 19.2001 1.52393 19.0509 1.52393 18.8668V17.9334ZM1.85726 20.8001C1.67316 20.8001 1.52393 20.9493 1.52393 21.1334V22.0668C1.52393 22.2509 1.67316 22.4001 1.85726 22.4001H2.7144C2.8985 22.4001 3.04774 22.2509 3.04774 22.0668V21.1334C3.04774 20.9493 2.8985 20.8001 2.7144 20.8001H1.85726ZM3.04774 19.5334C3.04774 19.3493 3.19697 19.2001 3.38107 19.2001H4.23821C4.42231 19.2001 4.57154 19.3493 4.57154 19.5334V20.4668C4.57154 20.6509 4.42231 20.8001 4.23821 20.8001H3.38107C3.19697 20.8001 3.04774 20.6509 3.04774 20.4668V19.5334ZM3.38107 16.0001C3.19697 16.0001 3.04774 16.1493 3.04774 16.3334V17.2668C3.04774 17.4509 3.19697 17.6001 3.38107 17.6001H4.23821C4.42231 17.6001 4.57154 17.4509 4.57154 17.2668V16.3334C4.57154 16.1493 4.42231 16.0001 4.23821 16.0001H3.38107ZM3.04774 13.1334C3.04774 12.9493 3.19697 12.8001 3.38107 12.8001H4.23821C4.42231 12.8001 4.57154 12.9493 4.57154 13.1334V14.0668C4.57154 14.2509 4.42231 14.4001 4.23821 14.4001H3.38107C3.19697 14.4001 3.04774 14.2509 3.04774 14.0668V13.1334ZM3.38107 9.6001C3.19697 9.6001 3.04774 9.74934 3.04774 9.93343V10.8668C3.04774 11.0509 3.19697 11.2001 3.38107 11.2001H4.23821C4.42231 11.2001 4.57154 11.0509 4.57154 10.8668V9.93343C4.57154 9.74934 4.42231 9.6001 4.23821 9.6001H3.38107ZM3.04774 6.73343C3.04774 6.54934 3.19697 6.4001 3.38107 6.4001H4.23821C4.42231 6.4001 4.57154 6.54934 4.57154 6.73343V7.66676C4.57154 7.85086 4.42231 8.0001 4.23821 8.0001H3.38107C3.19697 8.0001 3.04774 7.85086 3.04774 7.66676V6.73343ZM3.38107 3.2001C3.19697 3.2001 3.04774 3.34934 3.04774 3.53343V4.46676C3.04774 4.65086 3.19697 4.8001 3.38107 4.8001H4.23821C4.42231 4.8001 4.57154 4.65086 4.57154 4.46676V3.53343C4.57154 3.34934 4.42231 3.2001 4.23821 3.2001H3.38107Z' fill='%23FFCD4B'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0_6762_5474'%3e%3crect width='32' height='24' rx='4' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
2538
+ var FlagKz = img$2;
2539
+
2540
+ const ControlPhoneInput = _a => {
2541
+ var {
2542
+ name,
2543
+ label,
2544
+ required,
2545
+ mask = '+7 (799) 999 99 99'
2546
+ } = _a,
2547
+ textFieldProps = __rest(_a, ["name", "label", "required", "mask"]);
2548
+ const {
2549
+ control,
2550
+ watch,
2551
+ trigger
2552
+ } = useFormContext();
2553
+ const phoneNumber = watch(name);
2554
+ useEffect(() => {
2555
+ if (/(\+7\s\(\d{3}\)\s)(\d{3}\s\d{2})(\s\d{2})/.test(phoneNumber)) {
2556
+ trigger(name);
2557
+ }
2558
+ }, [phoneNumber, trigger, name]);
2559
+ return jsx(Controller, {
2560
+ control: control,
2561
+ name: name,
2562
+ rules: {
2563
+ required: required && 'Please, fill this field',
2564
+ validate: val => {
2565
+ if (/(\+7\s\(\d{3}\)\s)(\d{3}\s\d{2})(\s\d{2})/.test(val)) {
2566
+ return true;
2567
+ }
2568
+ return 'Incorrect phone number format';
2569
+ }
2570
+ },
2571
+ render: ({
2572
+ field,
2573
+ fieldState: {
2574
+ error
2575
+ }
2576
+ }) => jsx(InputMask, Object.assign({
2577
+ mask: mask
2578
+ }, field, {
2579
+ children: () => jsx(TextField, Object.assign({
2580
+ fullWidth: true,
2581
+ size: "small",
2582
+ label: required && label ? jsxs(Fragment, {
2583
+ children: [label, " ", jsx("span", {
2584
+ children: "*"
2585
+ })]
2586
+ }) : label,
2587
+ inputMode: "numeric",
2588
+ InputProps: {
2589
+ startAdornment: jsx(InputAdornment, Object.assign({
2590
+ position: "start"
2591
+ }, {
2592
+ children: jsx("img", {
2593
+ src: FlagKz,
2594
+ alt: ""
2595
+ })
2596
+ }))
2597
+ }
2598
+ }, textFieldProps, {
2599
+ error: !!error,
2600
+ helperText: error === null || error === void 0 ? void 0 : error.message
2601
+ }))
2602
+ }))
2603
+ });
2604
+ };
2605
+
2511
2606
  const TablePagination = () => {
2512
2607
  const apiRef = useGridApiContext();
2513
2608
  const page = useGridSelector(apiRef, gridPageSelector);
@@ -3152,11 +3247,10 @@ const InfoItem = ({
3152
3247
 
3153
3248
  const roundingModes = Object.values(RoundingMode).sort((a, b) => a.localeCompare(b));
3154
3249
  const BigDecimalPropertyFields = ({
3155
- propertyFieldName
3250
+ propertyFieldName,
3251
+ control
3156
3252
  }) => {
3157
- const {
3158
- control
3159
- } = useFormContext();
3253
+ // const { control } = useFormContext();
3160
3254
  return jsxs(Fragment, {
3161
3255
  children: [jsx(Grid, {
3162
3256
  children: jsx(ControlNumberInput, {
@@ -3182,11 +3276,9 @@ var BigDecimalPropertyFields$1 = BigDecimalPropertyFields;
3182
3276
 
3183
3277
  const DateAdditionalFields = ({
3184
3278
  propertyFieldName,
3279
+ control,
3185
3280
  defaultValue: _defaultValue = ''
3186
3281
  }) => {
3187
- const {
3188
- control
3189
- } = useFormContext();
3190
3282
  return jsx(Grid, {
3191
3283
  children: jsx(ControlInput, {
3192
3284
  required: true,
@@ -3298,6 +3390,7 @@ const defaultPropertyValues$1 = {
3298
3390
  uiSettings: ''
3299
3391
  };
3300
3392
  const EntityAdditionalFields = ({
3393
+ control,
3301
3394
  parentPropertyFieldName,
3302
3395
  entityDefinition: _entityDefinition = false,
3303
3396
  globalParameter: _globalParameter = false,
@@ -3305,15 +3398,19 @@ const EntityAdditionalFields = ({
3305
3398
  entityReferenceValueComponent,
3306
3399
  fileReferenceValueComponent
3307
3400
  }) => {
3401
+ const propsRef = useRef(null);
3308
3402
  const {
3403
+ field: {
3404
+ onChange
3405
+ }
3406
+ } = useController({
3309
3407
  control,
3310
- getValues,
3311
- trigger
3312
- } = useFormContext();
3408
+ name: `${parentPropertyFieldName}.properties`
3409
+ });
3313
3410
  const properties = useWatch({
3314
3411
  control,
3315
3412
  name: `${parentPropertyFieldName}.properties`,
3316
- defaultValue: getValues(`${parentPropertyFieldName}.properties`) || []
3413
+ defaultValue: []
3317
3414
  });
3318
3415
  const parentPropertyName = useWatch({
3319
3416
  control,
@@ -3330,21 +3427,26 @@ const EntityAdditionalFields = ({
3330
3427
  const parametersModal = useToggle();
3331
3428
  const [focusedProperty, setFocusedProperty] = useState(0);
3332
3429
  const handleAddParameter = useCallback(() => {
3333
- if (fields.length > 0) {
3430
+ if ((properties === null || properties === void 0 ? void 0 : properties.length) > 0) {
3334
3431
  append(defaultPropertyValues$1);
3335
- const propertyIndex = fields.length;
3432
+ const propertyIndex = properties.length;
3336
3433
  setFocusedProperty(propertyIndex);
3337
3434
  } else {
3338
3435
  append(defaultPropertyValues$1);
3339
3436
  }
3340
- }, [fields, append]);
3437
+ propsRef.current.addProperty();
3438
+ }, [properties, append]);
3341
3439
  const handleStepperClick = index => setFocusedProperty(index);
3342
3440
  const handleSubmitClick = () => __awaiter(void 0, void 0, void 0, function* () {
3343
- const isValid = yield trigger(`${parentPropertyFieldName}.properties`);
3344
- if (isValid) {
3345
- parametersModal.onClose();
3346
- }
3441
+ // console.log(propsRef.current.getProperties());
3442
+ onChange(propsRef.current.getProperties());
3443
+ // const isValid = await trigger(`${parentPropertyFieldName}.properties`);
3444
+ parametersModal.onClose();
3445
+ // if (isValid) {
3446
+ // parametersModal.onClose();
3447
+ // }
3347
3448
  });
3449
+
3348
3450
  return jsxs(Fragment, {
3349
3451
  children: [jsx(Grid, {
3350
3452
  children: jsx(Typography, Object.assign({
@@ -3403,7 +3505,7 @@ const EntityAdditionalFields = ({
3403
3505
  paddingLeft: '4px'
3404
3506
  }
3405
3507
  }, {
3406
- children: properties.map((property, index) => jsxs(Step, Object.assign({
3508
+ children: fields.map((property, index) => jsxs(Step, Object.assign({
3407
3509
  onClick: () => handleStepperClick(index),
3408
3510
  style: {
3409
3511
  cursor: 'pointer'
@@ -3417,7 +3519,7 @@ const EntityAdditionalFields = ({
3417
3519
  wordBreak: 'break-word'
3418
3520
  }
3419
3521
  }, {
3420
- children: property.name || '(no name)'
3522
+ children: property['name'] || '(no name)'
3421
3523
  })), jsx(StepContent, {})]
3422
3524
  }), index))
3423
3525
  })), jsx(Button, Object.assign({
@@ -3440,10 +3542,12 @@ const EntityAdditionalFields = ({
3440
3542
  }
3441
3543
  }, {
3442
3544
  children: jsx(CreatePropertiesList, {
3545
+ ref: propsRef,
3546
+ properties: fields,
3443
3547
  hideAddButton: true,
3444
- entityPropFields: fields,
3548
+ // entityPropFields={properties as any}
3445
3549
  parentRemove: remove,
3446
- parentFieldName: parentPropertyFieldName,
3550
+ // parentFieldName={parentPropertyFieldName}
3447
3551
  focusOnIndex: focusedProperty,
3448
3552
  entityDefinition: _entityDefinition,
3449
3553
  globalParameter: _globalParameter,
@@ -3469,14 +3573,12 @@ var EntityAdditionalFields$1 = EntityAdditionalFields;
3469
3573
 
3470
3574
  const EntityReferencePropertyFields = ({
3471
3575
  propertyFieldName,
3576
+ control,
3472
3577
  sources: _sources = [{
3473
3578
  label: 'Arsenal Entities',
3474
3579
  value: 'ARSENAL_ENTITIES'
3475
3580
  }]
3476
3581
  }) => {
3477
- const {
3478
- control
3479
- } = useFormContext();
3480
3582
  return jsxs(Fragment, {
3481
3583
  children: [jsx(Grid, {
3482
3584
  children: jsx(ControlSelect, {
@@ -3520,102 +3622,8 @@ const EntityReferencePropertyFields = ({
3520
3622
  };
3521
3623
  var EntityReferencePropertyFields$1 = EntityReferencePropertyFields;
3522
3624
 
3523
- const StringPropertyFields = ({
3524
- propertyFieldName
3525
- }) => {
3526
- const fieldName = useMemo(() => `${propertyFieldName}.restrictedValues`, [propertyFieldName]);
3527
- const {
3528
- control,
3529
- setValue,
3530
- getValues
3531
- } = useFormContext();
3532
- const restrictedValues = useWatch({
3533
- control,
3534
- name: fieldName,
3535
- defaultValue: getValues(`${propertyFieldName}.restrictedValues`) || []
3536
- });
3537
- const [inputValue, setInputValue] = useState('');
3538
- const [error, setError] = useState('');
3539
- const handleDelete = useCallback(index => {
3540
- setValue(fieldName, removeArrayItem(restrictedValues, index));
3541
- }, [restrictedValues, fieldName, setValue]);
3542
- const handleAddValue = () => {
3543
- if (inputValue) {
3544
- setValue(fieldName, [...restrictedValues, inputValue]);
3545
- setInputValue('');
3546
- }
3547
- };
3548
- const handleInputChange = e => {
3549
- const {
3550
- value
3551
- } = e.target;
3552
- setInputValue(value);
3553
- if (restrictedValues.includes(value)) {
3554
- setError('This value already exists');
3555
- } else {
3556
- setError('');
3557
- }
3558
- };
3559
- const handleKeyDown = e => {
3560
- if (e.key === 'Enter') {
3561
- handleAddValue();
3562
- }
3563
- };
3564
- return jsxs(Fragment, {
3565
- children: [jsx(Grid, {
3566
- children: jsx(Typography, Object.assign({
3567
- variant: "h6"
3568
- }, {
3569
- children: "Restricted Values"
3570
- }))
3571
- }), !!(restrictedValues === null || restrictedValues === void 0 ? void 0 : restrictedValues.length) && jsx(Grid, {
3572
- children: jsx(Box, Object.assign({
3573
- display: "flex",
3574
- flexWrap: "wrap"
3575
- }, {
3576
- children: restrictedValues.map((value, index) => jsx(Chip, {
3577
- sx: {
3578
- mr: 1
3579
- },
3580
- variant: "outlined",
3581
- label: value,
3582
- onDelete: () => handleDelete(index)
3583
- }, index))
3584
- }))
3585
- }), jsx(Grid, {
3586
- children: jsx(TextField, {
3587
- fullWidth: true,
3588
- variant: "outlined",
3589
- size: "small",
3590
- label: "Add restricted value",
3591
- value: inputValue,
3592
- onChange: handleInputChange,
3593
- error: !!error,
3594
- helperText: error,
3595
- name: "restrictedValues",
3596
- inputProps: {
3597
- onKeyDown: handleKeyDown
3598
- },
3599
- InputProps: {
3600
- endAdornment: jsx(IconButton, Object.assign({
3601
- size: "small",
3602
- onClick: handleAddValue,
3603
- disabled: !!error
3604
- }, {
3605
- children: jsx(SvgIcon, {
3606
- children: jsx("path", {
3607
- d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
3608
- })
3609
- })
3610
- }))
3611
- }
3612
- })
3613
- })]
3614
- });
3615
- };
3616
- var StringPropertyFields$1 = StringPropertyFields;
3617
-
3618
3625
  const PropertyAdditionalFields = ({
3626
+ control,
3619
3627
  propertyType,
3620
3628
  propertyFieldName,
3621
3629
  entityDefinition: _entityDefinition = false,
@@ -3626,35 +3634,43 @@ const PropertyAdditionalFields = ({
3626
3634
  }) => {
3627
3635
  switch (propertyType) {
3628
3636
  case PropertyType.STRING:
3629
- return jsx(StringPropertyFields$1, {
3630
- propertyFieldName: propertyFieldName
3637
+ return jsx(ControlArrayInput, {
3638
+ name: `${propertyFieldName}.restrictedValues`,
3639
+ control: control,
3640
+ label: "Restricted Values"
3631
3641
  });
3632
3642
  case PropertyType.BIG_DECIMAL:
3633
3643
  return jsx(BigDecimalPropertyFields$1, {
3634
- propertyFieldName: propertyFieldName
3644
+ propertyFieldName: propertyFieldName,
3645
+ control: control
3635
3646
  });
3636
3647
  case PropertyType.DATE:
3637
3648
  return jsx(DateAdditionalFields$1, {
3649
+ control: control,
3638
3650
  propertyFieldName: propertyFieldName,
3639
3651
  defaultValue: DATE_DEFAULT_FORMAT
3640
3652
  });
3641
3653
  case PropertyType.TIME:
3642
3654
  return jsx(DateAdditionalFields$1, {
3655
+ control: control,
3643
3656
  propertyFieldName: propertyFieldName,
3644
3657
  defaultValue: TIME_DEFAULT_FORMAT
3645
3658
  });
3646
3659
  case PropertyType.DATE_TIME:
3647
3660
  return jsx(DateAdditionalFields$1, {
3661
+ control: control,
3648
3662
  propertyFieldName: propertyFieldName,
3649
3663
  defaultValue: DATE_TIME_DEFAULT_FORMAT
3650
3664
  });
3651
3665
  case PropertyType.ENTITY_REFERENCE:
3652
3666
  return jsx(EntityReferencePropertyFields$1, {
3667
+ control: control,
3653
3668
  propertyFieldName: propertyFieldName,
3654
3669
  sources: entityReferenceDefinitionSources
3655
3670
  });
3656
3671
  case PropertyType.ENTITY:
3657
3672
  return jsx(EntityAdditionalFields$1, {
3673
+ control: control,
3658
3674
  parentPropertyFieldName: propertyFieldName,
3659
3675
  globalParameter: _globalParameter,
3660
3676
  entityDefinition: _entityDefinition,
@@ -4227,12 +4243,6 @@ const PropertyFiller = ({
4227
4243
  entityReferenceDefinitionSources: entityReferenceDefinitionSources,
4228
4244
  entityReferenceValueComponent: entityReferenceValueComponent,
4229
4245
  fileReferenceValueComponent: fileReferenceValueComponent
4230
- }), fillOption === 'dem_builder' && jsx(CreateDefinition, {
4231
- title: "JSON",
4232
- definitionFieldName: name,
4233
- entityReferenceDefinitionSources: entityReferenceDefinitionSources,
4234
- entityReferenceValueComponent: entityReferenceValueComponent,
4235
- fileReferenceValueComponent: fileReferenceValueComponent
4236
4246
  }), error && jsx(FormHelperText, Object.assign({
4237
4247
  error: true
4238
4248
  }, {
@@ -4495,6 +4505,7 @@ const MultiplePropertyFiller = ({
4495
4505
  };
4496
4506
 
4497
4507
  const PropertyValueField = ({
4508
+ control,
4498
4509
  propertyFieldName,
4499
4510
  name,
4500
4511
  label: _label = '',
@@ -4503,9 +4514,7 @@ const PropertyValueField = ({
4503
4514
  entityReferenceValueComponent,
4504
4515
  fileReferenceValueComponent
4505
4516
  }) => {
4506
- const {
4507
- control
4508
- } = useFormContext();
4517
+ // const { control } = useFormContext();
4509
4518
  const propertyType = useWatch({
4510
4519
  control,
4511
4520
  name: `${propertyFieldName}.propertyType`
@@ -4961,7 +4970,10 @@ const propertyTypes = Object.values(PropertyType).sort((a, b) => a.localeCompare
4961
4970
  value: propType,
4962
4971
  label: propType.replace('_', ' ').toLowerCase().replace(/(^\w)|([-\s]\w)/g, c => c.toUpperCase())
4963
4972
  }));
4964
- const CreatePropertyFormFields = ({
4973
+ const CreatePropertyFormFields = /*#__PURE__*/memo(({
4974
+ setValue,
4975
+ control,
4976
+ // watch,
4965
4977
  propertyFieldName,
4966
4978
  entityDefinition: _entityDefinition = false,
4967
4979
  globalParameter: _globalParameter = false,
@@ -4971,11 +4983,8 @@ const CreatePropertyFormFields = ({
4971
4983
  fileReferenceValueComponent
4972
4984
  }) => {
4973
4985
  var _a;
4974
- const {
4975
- control,
4976
- setValue,
4977
- watch
4978
- } = useFormContext();
4986
+ // const { control, setValue, watch } = useFormContext();
4987
+ // console.log(propertyFieldName);
4979
4988
  const propertyType = useWatch({
4980
4989
  control,
4981
4990
  name: `${propertyFieldName}.propertyType`
@@ -4988,6 +4997,7 @@ const CreatePropertyFormFields = ({
4988
4997
  control,
4989
4998
  name: `${propertyFieldName}.isRequired`
4990
4999
  });
5000
+ // console.log('render - ', propertyFieldName);
4991
5001
  const {
4992
5002
  customCheckboxes,
4993
5003
  customFields
@@ -5092,6 +5102,7 @@ const CreatePropertyFormFields = ({
5092
5102
  })
5093
5103
  }))
5094
5104
  }), jsx(PropertyAdditionalFields, {
5105
+ control: control,
5095
5106
  propertyType: typeof propertyType === 'string' ? propertyType : propertyType.value,
5096
5107
  propertyFieldName: propertyFieldName,
5097
5108
  globalParameter: _globalParameter,
@@ -5100,6 +5111,7 @@ const CreatePropertyFormFields = ({
5100
5111
  entityReferenceValueComponent: entityReferenceValueComponent,
5101
5112
  fileReferenceValueComponent: fileReferenceValueComponent
5102
5113
  }), jsx(PropertyValueField, {
5114
+ control: control,
5103
5115
  propertyFieldName: propertyFieldName,
5104
5116
  name: `${propertyFieldName}.${_globalParameter ? 'value' : 'defaultValue'}`,
5105
5117
  // name=
@@ -5117,7 +5129,7 @@ const CreatePropertyFormFields = ({
5117
5129
  }, index))
5118
5130
  }) : null]
5119
5131
  }));
5120
- };
5132
+ });
5121
5133
 
5122
5134
  const defaultPropertyValues = {
5123
5135
  key: '',
@@ -5132,34 +5144,43 @@ const defaultPropertyValues = {
5132
5144
  executeValue: '',
5133
5145
  uiSettings: ''
5134
5146
  };
5135
- const CreatePropertiesList = ({
5136
- parentFieldName,
5147
+ const CreatePropertiesList = /*#__PURE__*/forwardRef(({
5148
+ properties,
5149
+ // parentFieldName,
5137
5150
  hideAddButton,
5138
5151
  focusOnIndex,
5139
5152
  required,
5140
5153
  entityDefinition: _entityDefinition = false,
5141
5154
  globalParameter: _globalParameter = false,
5142
5155
  customPropertyFields: _customPropertyFields = [],
5143
- entityPropFields,
5144
5156
  parentRemove,
5145
5157
  entityReferenceDefinitionSources,
5146
5158
  entityReferenceValueComponent,
5147
5159
  fileReferenceValueComponent
5148
- }) => {
5160
+ }, ref) => {
5161
+ // const fieldName = useMemo(
5162
+ // () => (parentFieldName ? `${parentFieldName}.properties` : `properties`),
5163
+ // [parentFieldName]
5164
+ // );
5149
5165
  var _a;
5150
- const fieldName = useMemo(() => parentFieldName ? `${parentFieldName}.properties` : `properties`, [parentFieldName]);
5151
5166
  const {
5152
5167
  clearErrors,
5153
5168
  control,
5154
- watch
5155
- } = useFormContext();
5169
+ setValue,
5170
+ getValues,
5171
+ reset
5172
+ } = useForm({
5173
+ defaultValues: {
5174
+ properties
5175
+ }
5176
+ });
5156
5177
  const {
5157
5178
  fields,
5158
5179
  append,
5159
5180
  remove
5160
5181
  } = useFieldArray({
5161
5182
  control,
5162
- name: fieldName
5183
+ name: 'properties'
5163
5184
  });
5164
5185
  const {
5165
5186
  fieldState: {
@@ -5167,7 +5188,7 @@ const CreatePropertiesList = ({
5167
5188
  }
5168
5189
  } = useController({
5169
5190
  control,
5170
- name: fieldName,
5191
+ name: 'properties',
5171
5192
  rules: {
5172
5193
  validate: val => {
5173
5194
  if (required && Array.isArray(val) && val.length === 0) return 'Please, fill the properties';
@@ -5175,11 +5196,17 @@ const CreatePropertiesList = ({
5175
5196
  }
5176
5197
  }
5177
5198
  });
5178
- const properties = useWatch({
5179
- control,
5180
- name: fieldName
5181
- });
5199
+ // console.log(watch());
5200
+ // const properties = useWatch({ control, name: fieldName });
5182
5201
  const refs = useRef([]);
5202
+ const handleAddParameter = useCallback(() => {
5203
+ append(defaultPropertyValues);
5204
+ clearErrors('properties');
5205
+ }, [append, clearErrors]);
5206
+ const handleRemoveParameter = useCallback(index => {
5207
+ if (parentRemove) parentRemove(index);
5208
+ remove(index);
5209
+ }, [parentRemove, remove]);
5183
5210
  useEffect(() => {
5184
5211
  if (typeof focusOnIndex === 'number' && refs.current[focusOnIndex]) {
5185
5212
  refs.current[focusOnIndex].scrollIntoView({
@@ -5188,27 +5215,21 @@ const CreatePropertiesList = ({
5188
5215
  });
5189
5216
  }
5190
5217
  }, [focusOnIndex, refs]);
5191
- const handleAddParameter = useCallback(() => {
5192
- append(defaultPropertyValues);
5193
- clearErrors(fieldName);
5194
- }, [append, fieldName, clearErrors]);
5195
- const removeFields = useMemo(() => {
5196
- if (entityPropFields) {
5197
- return parentRemove;
5198
- } else {
5199
- return remove;
5200
- }
5201
- }, [entityPropFields, remove, parentRemove]);
5202
- const handleRemoveParameter = useCallback(index => {
5203
- removeFields(index);
5204
- }, [removeFields]);
5205
- const propFields = useMemo(() => {
5206
- if (entityPropFields) {
5207
- return entityPropFields;
5208
- } else {
5209
- return fields;
5218
+ useEffect(() => {
5219
+ var _a;
5220
+ if (properties.length && !((_a = getValues('properties')) === null || _a === void 0 ? void 0 : _a.length)) {
5221
+ reset({
5222
+ properties
5223
+ });
5210
5224
  }
5211
- }, [entityPropFields, fields]);
5225
+ }, [properties, getValues, reset]);
5226
+ useImperativeHandle(ref, () => {
5227
+ return {
5228
+ getProperties: () => getValues('properties'),
5229
+ addProperty: handleAddParameter,
5230
+ removeProperty: handleRemoveParameter
5231
+ };
5232
+ }, [getValues, handleAddParameter, handleRemoveParameter]);
5212
5233
  return jsxs(Fragment, {
5213
5234
  children: [error && error.message && jsx(Grid, Object.assign({
5214
5235
  sm: 12
@@ -5218,7 +5239,7 @@ const CreatePropertiesList = ({
5218
5239
  }, {
5219
5240
  children: error.message
5220
5241
  }))
5221
- })), Array.isArray(properties) && propFields.map((item, index) => jsx(Grid, Object.assign({
5242
+ })), Array.isArray(fields) && fields.map((item, index) => jsx(Grid, Object.assign({
5222
5243
  sm: 12,
5223
5244
  ref: ref => refs.current[index] = ref
5224
5245
  }, {
@@ -5235,11 +5256,13 @@ const CreatePropertiesList = ({
5235
5256
  wordBreak: 'break-word'
5236
5257
  }
5237
5258
  }, {
5238
- children: watch(`${fieldName}.${index}.name`) || `Property ${index + 1}`
5259
+ children: item.name || `Property ${index + 1}`
5239
5260
  }))
5240
5261
  })), jsx(AccordionDetails, {
5241
5262
  children: jsx(CreatePropertyFormFields, {
5242
- propertyFieldName: `${fieldName}.${index}`,
5263
+ control: control,
5264
+ setValue: setValue,
5265
+ propertyFieldName: `properties.${index}`,
5243
5266
  entityDefinition: _entityDefinition,
5244
5267
  globalParameter: _globalParameter,
5245
5268
  customPropertyFields: _customPropertyFields,
@@ -5275,9 +5298,9 @@ const CreatePropertiesList = ({
5275
5298
  }))]
5276
5299
  }))]
5277
5300
  });
5278
- };
5301
+ });
5279
5302
 
5280
- const CreateDefinition = ({
5303
+ const CreateDefinition = /*#__PURE__*/forwardRef(({
5281
5304
  definitionFieldName,
5282
5305
  title,
5283
5306
  hideCodeField,
@@ -5287,10 +5310,12 @@ const CreateDefinition = ({
5287
5310
  entityReferenceDefinitionSources,
5288
5311
  entityReferenceValueComponent,
5289
5312
  fileReferenceValueComponent
5290
- }) => {
5313
+ }, ref) => {
5291
5314
  const {
5292
- control
5315
+ control,
5316
+ getValues
5293
5317
  } = useFormContext();
5318
+ const properties = getValues(`${definitionFieldName}.properties`);
5294
5319
  return jsxs(Grid, Object.assign({
5295
5320
  container: true,
5296
5321
  direction: "column",
@@ -5336,6 +5361,8 @@ const CreateDefinition = ({
5336
5361
  label: "Version"
5337
5362
  })
5338
5363
  })), jsx(CreatePropertiesList, {
5364
+ ref: ref,
5365
+ properties: properties,
5339
5366
  required: _required,
5340
5367
  parentFieldName: definitionFieldName,
5341
5368
  entityReferenceDefinitionSources: entityReferenceDefinitionSources,
@@ -5343,7 +5370,7 @@ const CreateDefinition = ({
5343
5370
  fileReferenceValueComponent: fileReferenceValueComponent
5344
5371
  })]
5345
5372
  }));
5346
- };
5373
+ });
5347
5374
 
5348
5375
  const labels = {
5349
5376
  name: 'Name',
@@ -7019,4 +7046,4 @@ const defaultDefinitionObjectValue = {
7019
7046
  properties: {}
7020
7047
  };
7021
7048
 
7022
- export { AlertDialog, BackButton, Breadcrumbs, ContentLayout, ControlAceEditor, ControlArrayInput, ControlAutocomplete, ControlCheckbox, ControlDate, ControlDateTime, ControlDebouncedInput, ControlInput, ControlNumberInput, ControlPeriodInput, ControlQueryAutocomplete, ControlRadio, ControlSelect, ControlSwitch, ControlTime, CopyButton, CreateDefinition, CreatePropertiesList, CreatePropertyFormFields, DATE_DEFAULT_FORMAT, DATE_TIME_DEFAULT_FORMAT, DefinitionFiller, DefinitionValueView, InfoItem, JsonModalView, JsonPathPicker, JsonView, Loader, MenuIcon, MultiplePropertyFiller, PropertyFiller, PropertyType, PropertyValueField, RoundingMode, RouteTabs, Sidebar, SimpleTable, Status, StepperView, TIME_DEFAULT_FORMAT, TabPanel, Table, TableAction, TableActionCell, ViewPropertiesList, ViewProperty, capitalize, deepParseJson, defaultDefinitionArrayValue, defaultDefinitionObjectValue, digitsOnly, floatsOnly, formatDefinitionData, formatTableRowValue, getDemPropertyDateFormat, getEntityStarterValue, getJsonStringValue, getMultiplePropertyFillOptions, getSinglePropertyFillOptions, isDateType, isExpression, isPropertyValueEmpty, propertiesArrayToObject, propertiesObjectToArray, removeArrayItem, safeParseJson, sortArrayOfObjects, theme, useDebounce, useToggle, validateJson };
7049
+ export { AlertDialog, BackButton, Breadcrumbs, ContentLayout, ControlAceEditor, ControlArrayInput, ControlAutocomplete, ControlCheckbox, ControlDate, ControlDateTime, ControlDebouncedInput, ControlInput, ControlNumberInput, ControlPeriodInput, ControlPhoneInput, ControlQueryAutocomplete, ControlRadio, ControlSelect, ControlSwitch, ControlTime, CopyButton, CreateDefinition, CreatePropertiesList, CreatePropertyFormFields, DATE_DEFAULT_FORMAT, DATE_TIME_DEFAULT_FORMAT, DefinitionFiller, DefinitionValueView, InfoItem, JsonModalView, JsonPathPicker, JsonView, Loader, MenuIcon, MultiplePropertyFiller, PropertyFiller, PropertyType, PropertyValueField, RoundingMode, RouteTabs, Sidebar, SimpleTable, Status, StepperView, TIME_DEFAULT_FORMAT, TabPanel, Table, TableAction, TableActionCell, ViewPropertiesList, ViewProperty, capitalize, deepParseJson, defaultDefinitionArrayValue, defaultDefinitionObjectValue, digitsOnly, floatsOnly, formatDefinitionData, formatTableRowValue, getDemPropertyDateFormat, getEntityStarterValue, getJsonStringValue, getMultiplePropertyFillOptions, getSinglePropertyFillOptions, isDateType, isExpression, isPropertyValueEmpty, propertiesArrayToObject, propertiesObjectToArray, removeArrayItem, safeParseJson, sortArrayOfObjects, theme, useDebounce, useToggle, validateJson };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dartech/arsenal-ui",
3
- "version": "1.3.93",
3
+ "version": "1.3.95",
4
4
  "author": "DAR",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -27,7 +27,8 @@
27
27
  "classnames": "^2.3.1",
28
28
  "@tanstack/react-query": "^4.24.10",
29
29
  "@rollup/plugin-node-resolve": "13.3.0",
30
- "qs": "6.11.0"
30
+ "qs": "6.11.0",
31
+ "react-input-mask": "2.0.4"
31
32
  },
32
33
  "module": "./index.js",
33
34
  "main": "./index.js",
@@ -19,5 +19,5 @@ type Props = {
19
19
  name: string;
20
20
  }>;
21
21
  };
22
- export declare const CreateDefinition: ({ definitionFieldName, title, hideCodeField, hideVersionField, hideNameField, required, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
22
+ export declare const CreateDefinition: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<unknown>>;
23
23
  export default CreateDefinition;
@@ -1,6 +1,8 @@
1
1
  import { ReactNode } from 'react';
2
+ import { TextFieldProps } from '@mui/material/TextField';
3
+ import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
2
4
  import { Control } from 'react-hook-form';
3
- type Props = {
5
+ type ControlDateProps = Partial<DatePickerProps<unknown, unknown>> & {
4
6
  /**
5
7
  * React Hook Form `control`
6
8
  */
@@ -13,6 +15,7 @@ type Props = {
13
15
  label?: ReactNode;
14
16
  format?: string;
15
17
  hideErrorMessage?: boolean;
18
+ textFieldProps?: TextFieldProps;
16
19
  };
17
- export declare const ControlDate: ({ control, name, required, label, format, hideErrorMessage, }: Props) => JSX.Element;
20
+ export declare const ControlDate: ({ control, name, required, label, format, hideErrorMessage, textFieldProps, ...datePickerProps }: ControlDateProps) => JSX.Element;
18
21
  export default ControlDate;
@@ -1,6 +1,8 @@
1
1
  import { ReactNode } from 'react';
2
+ import { TextFieldProps } from '@mui/material/TextField';
3
+ import { DateTimePickerProps } from '@mui/x-date-pickers/DateTimePicker';
2
4
  import { Control } from 'react-hook-form';
3
- type Props = {
5
+ type dateTimePickerProps = Partial<DateTimePickerProps<unknown, unknown>> & {
4
6
  /**
5
7
  * React Hook Form `control`
6
8
  */
@@ -13,6 +15,7 @@ type Props = {
13
15
  label?: ReactNode;
14
16
  format?: string;
15
17
  hideErrorMessage?: boolean;
18
+ textFieldProps?: TextFieldProps;
16
19
  };
17
- export declare const ControlDateTime: ({ control, name, required, label, format, hideErrorMessage, }: Props) => JSX.Element;
20
+ export declare const ControlDateTime: ({ control, name, required, label, format, hideErrorMessage, textFieldProps, ...dateTimePickerProps }: dateTimePickerProps) => JSX.Element;
18
21
  export default ControlDateTime;
@@ -1,4 +1,4 @@
1
- import type { ReactNode } from 'react';
1
+ import { ReactNode } from 'react';
2
2
  import { Control } from 'react-hook-form';
3
3
  import { TextFieldProps } from '@mui/material/TextField';
4
4
  import { ValidateFunc } from '../../interfaces';
@@ -0,0 +1,10 @@
1
+ import { ReactNode } from 'react';
2
+ import { TextFieldProps } from '@mui/material/TextField';
3
+ type Props = TextFieldProps & {
4
+ name: string;
5
+ required?: boolean;
6
+ mask?: string;
7
+ label?: ReactNode;
8
+ };
9
+ export declare const ControlPhoneInput: ({ name, label, required, mask, ...textFieldProps }: Props) => JSX.Element;
10
+ export default ControlPhoneInput;
@@ -14,3 +14,4 @@ export * from './ControlDateTime';
14
14
  export * from './ControlTime';
15
15
  export * from './ControlArrayInput';
16
16
  export * from './ControlPeriodInput';
17
+ export * from './ControlPhoneInput';
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
- import { CustomPropertyFieldProps, EntityReferenceProperty } from '../../../interfaces';
2
+ import { CustomPropertyFieldProps, EntityReferenceProperty, PropertiesArrayType } from '../../../interfaces';
3
3
  type Props = {
4
+ properties: PropertiesArrayType<any>;
4
5
  parentFieldName?: string;
5
6
  hideAddButton?: boolean;
6
7
  focusOnIndex?: number;
@@ -24,5 +25,5 @@ type Props = {
24
25
  name: string;
25
26
  }>;
26
27
  };
27
- export declare const CreatePropertiesList: ({ parentFieldName, hideAddButton, focusOnIndex, required, entityDefinition, globalParameter, customPropertyFields, entityPropFields, parentRemove, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
28
+ export declare const CreatePropertiesList: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<unknown>>;
28
29
  export default CreatePropertiesList;
@@ -1,6 +1,9 @@
1
1
  /// <reference types="react" />
2
2
  import { CustomPropertyFieldProps, EntityReferenceProperty } from '../../../interfaces';
3
3
  type Props = {
4
+ setValue: any;
5
+ control: any;
6
+ watch?: any;
4
7
  propertyFieldName: string;
5
8
  entityDefinition?: boolean;
6
9
  globalParameter?: boolean;
@@ -17,5 +20,5 @@ type Props = {
17
20
  name: string;
18
21
  }>;
19
22
  };
20
- export declare const CreatePropertyFormFields: ({ propertyFieldName, entityDefinition, globalParameter, customPropertyFields, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
23
+ export declare const CreatePropertyFormFields: import("react").MemoExoticComponent<({ setValue, control, propertyFieldName, entityDefinition, globalParameter, customPropertyFields, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element>;
21
24
  export default CreatePropertyFormFields;
@@ -1,6 +1,8 @@
1
1
  /// <reference types="react" />
2
+ import { Control } from 'react-hook-form';
2
3
  type Props = {
3
4
  propertyFieldName: string;
5
+ control: Control<any>;
4
6
  };
5
- declare const BigDecimalPropertyFields: ({ propertyFieldName }: Props) => JSX.Element;
7
+ declare const BigDecimalPropertyFields: ({ propertyFieldName, control }: Props) => JSX.Element;
6
8
  export default BigDecimalPropertyFields;
@@ -1,7 +1,9 @@
1
1
  /// <reference types="react" />
2
+ import { Control } from 'react-hook-form';
2
3
  type Props = {
3
4
  propertyFieldName: string;
4
5
  defaultValue?: string;
6
+ control: Control<any>;
5
7
  };
6
- declare const DateAdditionalFields: ({ propertyFieldName, defaultValue }: Props) => JSX.Element;
8
+ declare const DateAdditionalFields: ({ propertyFieldName, control, defaultValue }: Props) => JSX.Element;
7
9
  export default DateAdditionalFields;
@@ -1,6 +1,8 @@
1
1
  /// <reference types="react" />
2
+ import { Control } from 'react-hook-form';
2
3
  import { EntityReferenceProperty } from '../../../../interfaces';
3
4
  type Props = {
5
+ control: Control<any>;
4
6
  parentPropertyFieldName: string;
5
7
  entityDefinition?: boolean;
6
8
  globalParameter?: boolean;
@@ -16,5 +18,5 @@ type Props = {
16
18
  name: string;
17
19
  }>;
18
20
  };
19
- declare const EntityAdditionalFields: ({ parentPropertyFieldName, entityDefinition, globalParameter, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
21
+ declare const EntityAdditionalFields: ({ control, parentPropertyFieldName, entityDefinition, globalParameter, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
20
22
  export default EntityAdditionalFields;
@@ -1,10 +1,12 @@
1
1
  /// <reference types="react" />
2
+ import { Control } from 'react-hook-form';
2
3
  type Props = {
3
4
  propertyFieldName: string;
4
5
  sources?: {
5
6
  label: string;
6
7
  value: string;
7
8
  }[];
9
+ control: Control<any>;
8
10
  };
9
- declare const EntityReferencePropertyFields: ({ propertyFieldName, sources, }: Props) => JSX.Element;
11
+ declare const EntityReferencePropertyFields: ({ propertyFieldName, control, sources, }: Props) => JSX.Element;
10
12
  export default EntityReferencePropertyFields;
@@ -1,6 +1,8 @@
1
1
  /// <reference types="react" />
2
2
  import { PropertyType, EntityReferenceProperty } from '../../../../interfaces';
3
+ import { Control } from 'react-hook-form';
3
4
  type Props = {
5
+ control: Control<any>;
4
6
  propertyType: PropertyType;
5
7
  propertyFieldName: string;
6
8
  entityDefinition?: boolean;
@@ -17,5 +19,5 @@ type Props = {
17
19
  name: string;
18
20
  }>;
19
21
  };
20
- export declare const PropertyAdditionalFields: ({ propertyType, propertyFieldName, entityDefinition, globalParameter, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
22
+ export declare const PropertyAdditionalFields: ({ control, propertyType, propertyFieldName, entityDefinition, globalParameter, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
21
23
  export default PropertyAdditionalFields;
@@ -1,6 +1,8 @@
1
1
  /// <reference types="react" />
2
+ import { Control } from 'react-hook-form';
2
3
  type Props = {
3
4
  propertyFieldName: string;
5
+ control: Control<any>;
4
6
  };
5
- declare const StringPropertyFields: ({ propertyFieldName }: Props) => JSX.Element;
7
+ declare const StringPropertyFields: ({ propertyFieldName, control }: Props) => JSX.Element;
6
8
  export default StringPropertyFields;
@@ -1,6 +1,8 @@
1
1
  /// <reference types="react" />
2
+ import { Control } from 'react-hook-form';
2
3
  import { EntityReferenceProperty } from '../../../../interfaces';
3
4
  type Props = {
5
+ control: Control<any>;
4
6
  propertyFieldName: string;
5
7
  name: string;
6
8
  label?: string;
@@ -17,5 +19,5 @@ type Props = {
17
19
  name: string;
18
20
  }>;
19
21
  };
20
- export declare const PropertyValueField: ({ propertyFieldName, name, label, required, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
22
+ export declare const PropertyValueField: ({ control, propertyFieldName, name, label, required, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
21
23
  export default PropertyValueField;