@dartech/arsenal-ui 1.3.92 → 1.3.94

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,7 +9,7 @@ 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 } from 'react-hook-form';
13
13
  import TextField from '@mui/material/TextField';
14
14
  import React, { useRef, useEffect, useState, useCallback, useMemo, createElement, forwardRef, createContext, useContext, memo, Suspense } from 'react';
15
15
  import MenuItem from '@mui/material/MenuItem';
@@ -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';
@@ -2037,14 +2038,26 @@ const ControlSwitch = _a => {
2037
2038
  });
2038
2039
  };
2039
2040
 
2040
- const ControlDate = ({
2041
- control,
2042
- name,
2043
- required,
2044
- label,
2045
- format: _format = DATE_DEFAULT_FORMAT,
2046
- hideErrorMessage: _hideErrorMessage = false
2047
- }) => {
2041
+ 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";
2042
+ var DateIcon = img$3;
2043
+
2044
+ const DateIconComponent$1 = () => {
2045
+ return jsx("img", {
2046
+ src: DateIcon,
2047
+ alt: ""
2048
+ });
2049
+ };
2050
+ const ControlDate = _a => {
2051
+ var {
2052
+ control,
2053
+ name,
2054
+ required,
2055
+ label,
2056
+ format: format$1 = DATE_DEFAULT_FORMAT,
2057
+ hideErrorMessage = false,
2058
+ textFieldProps = {}
2059
+ } = _a,
2060
+ datePickerProps = __rest(_a, ["control", "name", "required", "label", "format", "hideErrorMessage", "textFieldProps"]);
2048
2061
  const [localFormat, setLocalFormat] = useState(DATE_DEFAULT_FORMAT);
2049
2062
  const {
2050
2063
  field,
@@ -2057,7 +2070,8 @@ const ControlDate = ({
2057
2070
  rules: {
2058
2071
  required: required && 'Please, fill this field',
2059
2072
  validate: val => {
2060
- if (isMatch(val, localFormat)) {
2073
+ console.log('DATE', val);
2074
+ if (val === '' || isMatch(val, localFormat)) {
2061
2075
  return true;
2062
2076
  }
2063
2077
  return 'Incorrect date format';
@@ -2068,14 +2082,14 @@ const ControlDate = ({
2068
2082
  field.onChange(isValid(date) ? format(date, localFormat) : date);
2069
2083
  }, [field, localFormat]);
2070
2084
  useEffect(() => {
2071
- const fixedTimeZone = _format.replace(/[Z,z,x]+/g, 'XX');
2085
+ const fixedTimeZone = format$1.replace(/[Z,z,x]+/g, 'XX');
2072
2086
  try {
2073
2087
  isMatch(format(new Date(), fixedTimeZone), fixedTimeZone);
2074
2088
  setLocalFormat(fixedTimeZone);
2075
2089
  } catch (e) {
2076
2090
  console.error(e);
2077
2091
  }
2078
- }, [_format]);
2092
+ }, [format$1]);
2079
2093
  return jsx(DatePicker, Object.assign({}, field, {
2080
2094
  label: required ? jsxs(Fragment, {
2081
2095
  children: [label, " ", jsx("span", {
@@ -2085,7 +2099,11 @@ const ControlDate = ({
2085
2099
  inputFormat: localFormat,
2086
2100
  value: localFormat ? parse(field.value, localFormat, new Date()) : field.value,
2087
2101
  onChange: handleChange,
2088
- renderInput: props => jsx(TextField, Object.assign({}, props, {
2102
+ components: {
2103
+ OpenPickerIcon: DateIconComponent$1
2104
+ }
2105
+ }, datePickerProps, {
2106
+ renderInput: params => jsx(TextField, Object.assign({}, params, {
2089
2107
  fullWidth: true,
2090
2108
  size: "small",
2091
2109
  sx: {
@@ -2096,19 +2114,28 @@ const ControlDate = ({
2096
2114
  variant: "outlined",
2097
2115
  name: name,
2098
2116
  error: !!error,
2099
- helperText: !_hideErrorMessage && (error === null || error === void 0 ? void 0 : error.message)
2100
- }))
2117
+ helperText: !hideErrorMessage && (error === null || error === void 0 ? void 0 : error.message)
2118
+ }, textFieldProps))
2101
2119
  }));
2102
2120
  };
2103
2121
 
2104
- const ControlDateTime = ({
2105
- control,
2106
- name,
2107
- required,
2108
- label,
2109
- format: _format = DATE_TIME_DEFAULT_FORMAT,
2110
- hideErrorMessage: _hideErrorMessage = false
2111
- }) => {
2122
+ const DateIconComponent = () => {
2123
+ return jsx("img", {
2124
+ src: DateIcon,
2125
+ alt: ""
2126
+ });
2127
+ };
2128
+ const ControlDateTime = _a => {
2129
+ var {
2130
+ control,
2131
+ name,
2132
+ required,
2133
+ label,
2134
+ format: format$1 = DATE_TIME_DEFAULT_FORMAT,
2135
+ hideErrorMessage = false,
2136
+ textFieldProps
2137
+ } = _a,
2138
+ dateTimePickerProps = __rest(_a, ["control", "name", "required", "label", "format", "hideErrorMessage", "textFieldProps"]);
2112
2139
  const [localFormat, setLocalFormat] = useState(DATE_TIME_DEFAULT_FORMAT);
2113
2140
  const {
2114
2141
  field,
@@ -2132,14 +2159,14 @@ const ControlDateTime = ({
2132
2159
  field.onChange(isValid(date) ? format(date, localFormat) : date);
2133
2160
  }, [field, localFormat]);
2134
2161
  useEffect(() => {
2135
- const fixedTimeZone = _format.replace(/[Z,z,x]+/g, 'XX');
2162
+ const fixedTimeZone = format$1.replace(/[Z,z,x]+/g, 'XX');
2136
2163
  try {
2137
2164
  isMatch(format(new Date(), fixedTimeZone), fixedTimeZone);
2138
2165
  setLocalFormat(fixedTimeZone);
2139
2166
  } catch (e) {
2140
2167
  console.error(e);
2141
2168
  }
2142
- }, [_format]);
2169
+ }, [format$1]);
2143
2170
  return jsx(DateTimePicker, Object.assign({}, field, {
2144
2171
  ampm: false,
2145
2172
  label: required ? jsxs(Fragment, {
@@ -2150,7 +2177,11 @@ const ControlDateTime = ({
2150
2177
  value: localFormat ? parse(field.value, localFormat, new Date()) : field.value,
2151
2178
  inputFormat: localFormat,
2152
2179
  onChange: handleChange,
2153
- renderInput: props => jsx(TextField, Object.assign({}, props, {
2180
+ components: {
2181
+ OpenPickerIcon: DateIconComponent
2182
+ }
2183
+ }, dateTimePickerProps, {
2184
+ renderInput: params => jsx(TextField, Object.assign({}, params, {
2154
2185
  fullWidth: true,
2155
2186
  size: "small",
2156
2187
  sx: {
@@ -2161,8 +2192,8 @@ const ControlDateTime = ({
2161
2192
  variant: "outlined",
2162
2193
  name: name,
2163
2194
  error: !!error,
2164
- helperText: !_hideErrorMessage && (error === null || error === void 0 ? void 0 : error.message)
2165
- }))
2195
+ helperText: !hideErrorMessage && (error === null || error === void 0 ? void 0 : error.message)
2196
+ }, textFieldProps))
2166
2197
  }));
2167
2198
  };
2168
2199
 
@@ -2507,6 +2538,75 @@ const ControlPeriodInput = ({
2507
2538
  });
2508
2539
  };
2509
2540
 
2541
+ 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";
2542
+ var FlagKz = img$2;
2543
+
2544
+ const ControlPhoneInput = _a => {
2545
+ var {
2546
+ name,
2547
+ label,
2548
+ required,
2549
+ mask = '+7 (799) 999 99 99'
2550
+ } = _a,
2551
+ textFieldProps = __rest(_a, ["name", "label", "required", "mask"]);
2552
+ const {
2553
+ control,
2554
+ watch,
2555
+ trigger
2556
+ } = useFormContext();
2557
+ const phoneNumber = watch(name);
2558
+ useEffect(() => {
2559
+ if (/(\+7\s\(\d{3}\)\s)(\d{3}\s\d{2})(\s\d{2})/.test(phoneNumber)) {
2560
+ trigger(name);
2561
+ }
2562
+ }, [phoneNumber, trigger, name]);
2563
+ return jsx(Controller, {
2564
+ control: control,
2565
+ name: name,
2566
+ rules: {
2567
+ required: required && 'Please, fill this field',
2568
+ validate: val => {
2569
+ if (/(\+7\s\(\d{3}\)\s)(\d{3}\s\d{2})(\s\d{2})/.test(val)) {
2570
+ return true;
2571
+ }
2572
+ return 'Incorrect phone number format';
2573
+ }
2574
+ },
2575
+ render: ({
2576
+ field,
2577
+ fieldState: {
2578
+ error
2579
+ }
2580
+ }) => jsx(InputMask, Object.assign({
2581
+ mask: mask
2582
+ }, field, {
2583
+ children: () => jsx(TextField, Object.assign({
2584
+ fullWidth: true,
2585
+ size: "small",
2586
+ label: required && label ? jsxs(Fragment, {
2587
+ children: [label, " ", jsx("span", {
2588
+ children: "*"
2589
+ })]
2590
+ }) : label,
2591
+ inputMode: "numeric",
2592
+ InputProps: {
2593
+ startAdornment: jsx(InputAdornment, Object.assign({
2594
+ position: "start"
2595
+ }, {
2596
+ children: jsx("img", {
2597
+ src: FlagKz,
2598
+ alt: ""
2599
+ })
2600
+ }))
2601
+ }
2602
+ }, textFieldProps, {
2603
+ error: !!error,
2604
+ helperText: error === null || error === void 0 ? void 0 : error.message
2605
+ }))
2606
+ }))
2607
+ });
2608
+ };
2609
+
2510
2610
  const TablePagination = () => {
2511
2611
  const apiRef = useGridApiContext();
2512
2612
  const page = useGridSelector(apiRef, gridPageSelector);
@@ -3284,13 +3384,17 @@ var EntityPropertiesShortView$1 = EntityPropertiesShortView;
3284
3384
 
3285
3385
  const defaultPropertyValues$1 = {
3286
3386
  key: '',
3287
- propertyType: '',
3387
+ propertyType: null,
3288
3388
  name: '',
3289
3389
  defaultValue: '',
3390
+ value: '',
3391
+ defaultValues: [],
3290
3392
  isRequired: true,
3291
3393
  isMultiple: false,
3292
3394
  sortOrder: 0,
3293
- isEnabled: true
3395
+ isEnabled: true,
3396
+ executeValue: '',
3397
+ uiSettings: ''
3294
3398
  };
3295
3399
  const EntityAdditionalFields = ({
3296
3400
  parentPropertyFieldName,
@@ -3814,10 +3918,8 @@ const PropertyWidget = ({
3814
3918
  entityReferenceValueComponent: EntityReferenceValueComponent,
3815
3919
  fileReferenceValueComponent: FileReferenceValueComponent
3816
3920
  }) => {
3817
- const propertyType = useMemo(() => {
3818
- var _a;
3819
- return typeof property.propertyType === 'string' ? property.propertyType : (_a = property['propertyType']) === null || _a === void 0 ? void 0 : _a['value'];
3820
- }, [property]);
3921
+ var _a;
3922
+ const propertyType = typeof property.propertyType === 'string' ? property.propertyType : (_a = property['propertyType']) === null || _a === void 0 ? void 0 : _a['value'];
3821
3923
  switch (propertyType) {
3822
3924
  case PropertyType.BIG_DECIMAL:
3823
3925
  case PropertyType.FLOAT:
@@ -3993,7 +4095,7 @@ const usePropertyFiller = ({
3993
4095
  case PropertyType.FLOAT:
3994
4096
  return 0;
3995
4097
  default:
3996
- return {};
4098
+ return null;
3997
4099
  }
3998
4100
  }, [propertyType]);
3999
4101
  const needRecursionCheck = useMemo(() => propertyType === PropertyType.JSON || propertyType === PropertyType.ANY, [propertyType]);
@@ -4057,6 +4159,7 @@ const PropertyFiller = ({
4057
4159
  watch
4058
4160
  } = useFormContext();
4059
4161
  const {
4162
+ // field: { value },
4060
4163
  fieldState: {
4061
4164
  error,
4062
4165
  isDirty
@@ -4146,13 +4249,13 @@ const PropertyFiller = ({
4146
4249
  clearErrors();
4147
4250
  }, [name, defaultProperyValue, clearErrors, value, setFillOption, fillOption, propertyType, setValue, property]);
4148
4251
  useEffect(() => {
4149
- if (!isDirty && property.defaultValue && !value) {
4150
- setValue(name, property.defaultValue);
4252
+ if (!isDirty && (property.defaultValue || property.value) && !value) {
4253
+ setValue(name, property.defaultValue || property.value);
4151
4254
  }
4152
4255
  }, [isDirty, property, name, setValue, value]);
4153
4256
  useEffect(() => {
4154
4257
  var _a;
4155
- if (value === undefined || property.isRequired && value === null && !property.defaultValue) {
4258
+ if (value === undefined || property.isRequired && value === null && !(property.defaultValue || property.value)) {
4156
4259
  setValue(name, (_a = prevValueRef.current[fillOption]) !== null && _a !== void 0 ? _a : defaultProperyValue);
4157
4260
  }
4158
4261
  }, [value, setValue, defaultProperyValue, property, name, fillOption]);
@@ -4500,33 +4603,55 @@ const PropertyValueField = ({
4500
4603
  fileReferenceValueComponent
4501
4604
  }) => {
4502
4605
  const {
4503
- watch
4606
+ control
4504
4607
  } = useFormContext();
4505
- const propertyType = watch(`${propertyFieldName}.propertyType`);
4506
- const isMultiple = watch(`${propertyFieldName}.isMultiple`);
4507
- const format = watch(`${propertyFieldName}.format`);
4508
- const restrictedValues = watch(`${propertyFieldName}.restrictedValues`);
4509
- const properties = watch(`${propertyFieldName}.properties`);
4510
- const isRequired = watch(`${propertyFieldName}.isRequired`);
4608
+ const propertyType = useWatch({
4609
+ control,
4610
+ name: `${propertyFieldName}.propertyType`
4611
+ });
4612
+ const isMultiple = useWatch({
4613
+ control,
4614
+ name: `${propertyFieldName}.isMultiple`
4615
+ });
4616
+ const format = useWatch({
4617
+ control,
4618
+ name: `${propertyFieldName}.format`
4619
+ });
4620
+ const restrictedValues = useWatch({
4621
+ control,
4622
+ name: `${propertyFieldName}.restrictedValues`
4623
+ });
4624
+ const properties = useWatch({
4625
+ control,
4626
+ name: `${propertyFieldName}.properties`
4627
+ });
4628
+ const isRequired = useWatch({
4629
+ control,
4630
+ name: `${propertyFieldName}.isRequired`
4631
+ });
4511
4632
  const fillerProperty = useMemo(() => {
4512
- const typeValue = typeof propertyType === 'string' ? propertyType : propertyType.value;
4513
- return {
4633
+ return Object.assign(Object.assign(Object.assign(Object.assign({
4514
4634
  name: _label,
4515
4635
  isRequired: required !== null && required !== void 0 ? required : isRequired,
4516
- isMultiple,
4517
- format,
4518
- restrictedValues,
4519
- properties,
4520
- propertyType: typeValue,
4636
+ isMultiple
4637
+ }, !!format && {
4638
+ format
4639
+ }), {
4640
+ restrictedValues
4641
+ }), !!properties && {
4642
+ properties
4643
+ }), {
4644
+ propertyType: typeof propertyType === 'string' ? propertyType : propertyType.value,
4521
4645
  defaultValue: null,
4522
4646
  defaultValues: [],
4523
4647
  sortOrder: 0,
4524
4648
  isEnabled: true,
4525
4649
  uiSettings: null,
4526
4650
  validationNode: null
4527
- };
4528
- }, [propertyType, format, restrictedValues, isMultiple, _label, isRequired, properties, required]);
4529
- console.log('isMultiple', isMultiple);
4651
+ });
4652
+ }, [propertyType, format, restrictedValues, isMultiple, _label,
4653
+ // key,
4654
+ isRequired, properties, required]);
4530
4655
  return isMultiple ? jsx(MultiplePropertyFiller, {
4531
4656
  name: name,
4532
4657
  property: fillerProperty,
@@ -4950,9 +5075,18 @@ const CreatePropertyFormFields = ({
4950
5075
  setValue,
4951
5076
  watch
4952
5077
  } = useFormContext();
4953
- const propertyType = watch(`${propertyFieldName}.propertyType`);
4954
- const isMultiple = watch(`${propertyFieldName}.isMultiple`);
4955
- const isRequired = watch(`${propertyFieldName}.isRequired`);
5078
+ const propertyType = useWatch({
5079
+ control,
5080
+ name: `${propertyFieldName}.propertyType`
5081
+ });
5082
+ const isMultiple = useWatch({
5083
+ control,
5084
+ name: `${propertyFieldName}.isMultiple`
5085
+ });
5086
+ const isRequired = useWatch({
5087
+ control,
5088
+ name: `${propertyFieldName}.isRequired`
5089
+ });
4956
5090
  const {
4957
5091
  customCheckboxes,
4958
5092
  customFields
@@ -5111,7 +5245,7 @@ const CreatePropertiesList = ({
5111
5245
  entityReferenceValueComponent,
5112
5246
  fileReferenceValueComponent
5113
5247
  }) => {
5114
- var _a;
5248
+ var _a, _b;
5115
5249
  const fieldName = useMemo(() => parentFieldName ? `${parentFieldName}.properties` : `properties`, [parentFieldName]);
5116
5250
  const {
5117
5251
  clearErrors,
@@ -5181,7 +5315,7 @@ const CreatePropertiesList = ({
5181
5315
  children: jsx(Typography, Object.assign({
5182
5316
  color: "secondary"
5183
5317
  }, {
5184
- children: error.message
5318
+ children: ((_a = error.root) === null || _a === void 0 ? void 0 : _a.message) || error.message
5185
5319
  }))
5186
5320
  })), Array.isArray(properties) && propFields.map((item, index) => jsx(Grid, Object.assign({
5187
5321
  sm: 12,
@@ -5236,7 +5370,7 @@ const CreatePropertiesList = ({
5236
5370
  })), error && jsx(FormHelperText, Object.assign({
5237
5371
  error: true
5238
5372
  }, {
5239
- children: (_a = error.root) === null || _a === void 0 ? void 0 : _a.message
5373
+ children: (_b = error.root) === null || _b === void 0 ? void 0 : _b.message
5240
5374
  }))]
5241
5375
  }))]
5242
5376
  });
@@ -6984,4 +7118,4 @@ const defaultDefinitionObjectValue = {
6984
7118
  properties: {}
6985
7119
  };
6986
7120
 
6987
- 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 };
7121
+ 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.92",
3
+ "version": "1.3.94",
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",
@@ -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;
@@ -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,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,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { PropertyUnion } from '../../../interfaces';
3
2
  type PropertyItemProps = {
4
3
  property: PropertyUnion;