@dartcom/ui-kit 10.1.13 → 10.1.14

package/dist/index.cjs

@@ -15,8 +15,8 @@ var reactDom = require('react-dom');
 var axios = require('axios');
 var xDatePickers = require('@mui/x-date-pickers');
 var AdapterDateFns = require('@mui/x-date-pickers/AdapterDateFns');
-var DateField$1 = require('@mui/x-date-pickers/DateField');
 var ArrowDownwardIcon = require('@mui/icons-material/ArrowDownward');
+var DateField$1 = require('@mui/x-date-pickers/DateField');
 var lab = require('@mui/lab');
 var Box = require('@mui/material/Box');
 var Modal = require('@mui/material/Modal');
@@ -23361,6 +23361,13 @@ const trafficSignDateFields = [
     'warranty_expr_date',
 ];
 const trafficSignDateFormat = 'dd.MM.yyyy';
+const maxTrafficSignDopsCount = 2;
+const trafficSignWords = {
+    title: 'Дорожные знаки',
+};
+const trafficSignDopWords = {
+    title: 'Дополнительная информация',
+};
 
 const getTrafficSignLayers = (source) => {
     const layers = [];
@@ -27093,6 +27100,33 @@ const TrafficSignTable = ({ pageSize = 15, defaultValues, filtered = {}, onSelec
 };
 var TrafficSignTable$1 = observer(TrafficSignTable);
 
+const Accordion = ({ items, onOpen, defaultValue = null, }) => {
+    const [currentValue, setCurrentValue] = React__namespace.useState(defaultValue);
+    const handleClose = React__namespace.useCallback(() => {
+        setCurrentValue(null);
+    }, []);
+    React__namespace.useEffect(() => {
+        if (defaultValue) {
+            setCurrentValue(defaultValue);
+        }
+    }, [defaultValue]);
+    const id = React__namespace.useId();
+    return (jsxRuntime.jsx(material.Box, { id: id, children: items.map(({ value, summary, getDetails }) => {
+            const key = `${id}-accordion-${value}`;
+            return (jsxRuntime.jsxs(material.Accordion, { expanded: value === currentValue, children: [jsxRuntime.jsx(material.AccordionSummary, { expandIcon: jsxRuntime.jsx(ArrowDownwardIcon, {}), onClick: () => {
+                            setCurrentValue((prevState) => {
+                                if (prevState === value) {
+                                    return null;
+                                }
+                                onOpen?.(value);
+                                return value;
+                            });
+                        }, "aria-controls": `${key}-content`, id: `${key}-header`, children: summary }), jsxRuntime.jsx(material.AccordionDetails, { children: getDetails({
+                            onClose: handleClose,
+                        }) })] }, key));
+        }) }));
+};
+
 const CustomCard = ({ children, sx = {}, ...props }) => {
     return (jsxRuntime.jsx(material.Box, { ...props, sx: {
             padding: '20px 15px',
@@ -27115,33 +27149,60 @@ function DateField({ name, ...props }) {
         } }));
 }
 
+const Tabs = ({ items, initialValue, onChange }) => {
+    const [value, setValue] = React__namespace.useState(() => initialValue ?? items[0].value);
+    const id = React__namespace.useId();
+    React__namespace.useEffect(() => {
+        if (initialValue) {
+            setValue(initialValue);
+        }
+    }, [initialValue]);
+    return (jsxRuntime.jsxs(lab.TabContext, { value: value, children: [jsxRuntime.jsx(material.Box, { sx: { borderBottom: 1, borderColor: 'divider' }, children: jsxRuntime.jsx(lab.TabList, { "aria-label": `tabs-${id}`, onChange: (_, value) => {
+                        setValue(value);
+                        onChange?.(value);
+                    }, children: items.map(({ label, value }) => {
+                        const key = `${id}-tab-${value}`;
+                        return (jsxRuntime.jsx(material.Tab, { label: label, value: value, sx: {
+                                textTransform: 'none',
+                            } }, key));
+                    }) }) }), items.map(({ content, value }) => {
+                const key = `${id}-tab-panel-${value}`;
+                return (jsxRuntime.jsx(lab.TabPanel, { value: value, children: content }, key));
+            })] }));
+};
+
 const fieldName$1 = 'oldDops';
 const TrafficSignDopUpdateForm = ({ index, onDelete, onUpdate, }) => {
-    const [expanded, setExpanded] = React__namespace.useState(false);
     const { register, setValue, watch } = useFormContext$1();
     const trafficSign = watch(`${fieldName$1}.${index}`);
     const { dop_sign_number } = trafficSign;
     return (jsxRuntime.jsxs(material.Box, { sx: {
             display: 'grid',
             gap: '12px',
-        }, children: [jsxRuntime.jsxs(material.Accordion, { expanded: expanded, children: [jsxRuntime.jsx(material.AccordionSummary, { expandIcon: jsxRuntime.jsx(ArrowDownwardIcon, {}), onClick: () => {
-                            setExpanded((prevState) => !prevState);
-                        }, "aria-controls": "panel1-content", id: "panel1-header", children: jsxRuntime.jsxs(material.Box, { sx: {
+        }, children: [jsxRuntime.jsx(Accordion, { items: [
+                    {
+                        value: 1,
+                        summary: (jsxRuntime.jsxs(material.Box, { sx: {
                                 display: 'flex',
                                 alignItems: 'center',
                                 gap: '12px',
                             }, children: [jsxRuntime.jsx(DeleteButton, { notification: {
-                                        title: 'Удалить traffic sign',
-                                        description: 'Вы действительно хотите удалить данный traffic sign?',
+                                        title: 'Удалить табличку',
+                                        description: 'Вы действительно хотите удалить данную табличку?',
                                     }, onDelete: () => {
                                         onDelete(trafficSign);
-                                    } }), jsxRuntime.jsx(TrafficSignPreviewTitle$1, { number: dop_sign_number })] }) }), jsxRuntime.jsx(material.AccordionDetails, { children: jsxRuntime.jsx(TrafficSignTable$1, { pageSize: 5, filtered: {
-                                type: false,
-                            }, trafficSigns: trafficSignsDop, onSelect: ({ title, number }) => {
-                                setValue(`${fieldName$1}.${index}.dop_sign_number`, number);
-                                setValue(`${fieldName$1}.${index}.dop_sign_title`, title);
-                                setExpanded(false);
-                            } }) })] }), jsxRuntime.jsx(FormSelect, { ...register(`${fieldName$1}.${index}.status`), label: trafficSignFieldsTitles.status, items: trafficSignStatusOptions, getKey: ({ value }) => value, getLabel: ({ label }) => label, getValue: ({ value }) => value }), jsxRuntime.jsx(CustomInput, { ...register(`${fieldName$1}.${index}.comment`), label: trafficSignFieldsTitles.comment }), jsxRuntime.jsx(CustomInput, { ...register(`${fieldName$1}.${index}.dop_sign_text`), label: trafficSignFieldsTitles.dop_sign_text }), jsxRuntime.jsxs(material.Box, { sx: {
+                                    } }), jsxRuntime.jsx(TrafficSignPreviewTitle$1, { number: dop_sign_number })] })),
+                        getDetails: ({ onClose }) => {
+                            return (jsxRuntime.jsx(TrafficSignTable$1, { pageSize: 5, filtered: {
+                                    type: false,
+                                }, trafficSigns: trafficSignsDop, onSelect: ({ title, number }) => {
+                                    setValue(`${fieldName$1}.${index}.dop_sign_number`, number);
+                                    setValue(`${fieldName$1}.${index}.dop_sign_title`, title);
+                                    onClose();
+                                } }));
+                        },
+                    },
+                ] }), jsxRuntime.jsx(FormSelect, { ...register(`${fieldName$1}.${index}.status`), label: trafficSignFieldsTitles.status, items: trafficSignStatusOptions, getKey: ({ value }) => value, getLabel: ({ label }) => label, getValue: ({ value }) => value }), jsxRuntime.jsx(CustomInput, { ...register(`${fieldName$1}.${index}.comment`), label: trafficSignFieldsTitles.comment }), jsxRuntime.jsx(CustomInput, { ...register(`${fieldName$1}.${index}.dop_sign_text`), label: trafficSignFieldsTitles.dop_sign_text }), jsxRuntime.jsxs(material.Box, { sx: {
                     display: 'grid',
                     gridTemplateColumns: 'repeat(2, 1fr)',
                     gap: '12px',
@@ -27153,33 +27214,34 @@ var TrafficSignDopUpdateForm$1 = observer(TrafficSignDopUpdateForm);
 
 const fieldName = 'newDops';
 const TrafficSignDopCreateForm = ({ index, onDelete, }) => {
-    const { palette } = material.useTheme();
-    const [expanded, setExpanded] = React__namespace.useState(false);
     const { setValue, register, watch } = useFormContext$1();
     const trafficSign = watch(`${fieldName}.${index}`);
     const { dop_sign_number } = trafficSign;
     return (jsxRuntime.jsxs(material.Box, { sx: {
             display: 'grid',
             gap: '12px',
-        }, children: [jsxRuntime.jsxs(material.Accordion, { expanded: expanded, children: [jsxRuntime.jsx(material.AccordionSummary, { expandIcon: jsxRuntime.jsx(ArrowDownwardIcon, {}), onClick: () => {
-                            setExpanded((prevState) => !prevState);
-                        }, "aria-controls": "panel1-content", id: "panel1-header", children: jsxRuntime.jsxs(material.Box, { sx: {
+        }, children: [jsxRuntime.jsx(Accordion, { items: [
+                    {
+                        value: 1,
+                        summary: (jsxRuntime.jsxs(material.Box, { sx: {
                                 display: 'flex',
                                 alignItems: 'center',
                                 gap: '12px',
-                            }, children: [jsxRuntime.jsx(Paragraph, { variant: "h6", color: "error", sx: {
-                                        fontWeight: 700,
-                                        color: palette.primary['main'],
-                                    }, children: "NEW" }), jsxRuntime.jsx(DeleteButton, { notification: {
-                                        title: 'Удалить traffic sign',
-                                        description: 'Вы действительно хотите удалить данный traffic sign?',
-                                    }, onDelete: onDelete }), jsxRuntime.jsx(TrafficSignPreviewTitle$1, { number: dop_sign_number })] }) }), jsxRuntime.jsx(material.AccordionDetails, { children: jsxRuntime.jsx(TrafficSignTable$1, { pageSize: 5, filtered: {
-                                type: false,
-                            }, trafficSigns: trafficSignsDop, onSelect: ({ title, number }) => {
-                                setValue(`${fieldName}.${index}.dop_sign_number`, number);
-                                setValue(`${fieldName}.${index}.dop_sign_title`, title);
-                                setExpanded(false);
-                            } }) })] }), jsxRuntime.jsx(FormSelect, { ...register(`${fieldName}.${index}.status`), label: trafficSignFieldsTitles.status, items: trafficSignStatusOptions, getKey: ({ value }) => value, getLabel: ({ label }) => label, getValue: ({ value }) => value }), jsxRuntime.jsx(CustomInput, { ...register(`${fieldName}.${index}.comment`), label: trafficSignFieldsTitles.comment }), jsxRuntime.jsx(CustomInput, { ...register(`${fieldName}.${index}.dop_sign_text`), label: trafficSignFieldsTitles.dop_sign_text }), jsxRuntime.jsxs(material.Box, { sx: {
+                            }, children: [jsxRuntime.jsx(DeleteButton, { notification: {
+                                        title: 'Удалить табличку',
+                                        description: 'Вы действительно хотите удалить данную табличку?',
+                                    }, onDelete: onDelete }), jsxRuntime.jsx(TrafficSignPreviewTitle$1, { number: dop_sign_number })] })),
+                        getDetails: ({ onClose }) => {
+                            return (jsxRuntime.jsx(TrafficSignTable$1, { pageSize: 5, filtered: {
+                                    type: false,
+                                }, trafficSigns: trafficSignsDop, onSelect: ({ title, number }) => {
+                                    setValue(`${fieldName}.${index}.dop_sign_number`, number);
+                                    setValue(`${fieldName}.${index}.dop_sign_title`, title);
+                                    onClose();
+                                } }));
+                        },
+                    },
+                ] }), jsxRuntime.jsx(FormSelect, { ...register(`${fieldName}.${index}.status`), label: trafficSignFieldsTitles.status, items: trafficSignStatusOptions, getKey: ({ value }) => value, getLabel: ({ label }) => label, getValue: ({ value }) => value }), jsxRuntime.jsx(CustomInput, { ...register(`${fieldName}.${index}.comment`), label: trafficSignFieldsTitles.comment }), jsxRuntime.jsx(CustomInput, { ...register(`${fieldName}.${index}.dop_sign_text`), label: trafficSignFieldsTitles.dop_sign_text }), jsxRuntime.jsxs(material.Box, { sx: {
                     display: 'grid',
                     gridTemplateColumns: 'repeat(2, 1fr)',
                     gap: '12px',
@@ -27187,6 +27249,13 @@ const TrafficSignDopCreateForm = ({ index, onDelete, }) => {
 };
 var TrafficSignDopCreateForm$1 = observer(TrafficSignDopCreateForm);
 
+const TrafficSignAddDopButton = ({ disabled = false, onClick, }) => {
+    return (jsxRuntime.jsx(Button, { sx: {
+            margin: '0 auto',
+        }, onClick: onClick, disabled: disabled, children: "\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0430\u0431\u043B\u0438\u0447\u043A\u0443" }));
+};
+var TrafficSignAddDopButton$1 = observer(TrafficSignAddDopButton);
+
 const TrafficSignPreviewTitle = ({ number, }) => {
     const title = getTrafficSignTitleByNumber(number);
     return (jsxRuntime.jsxs(material.Box, { sx: {
@@ -29846,8 +29915,14 @@ const schema$2 = create$3()
     ...mainFieldsSchema,
     ...datesFieldsSchema,
     ...idsFieldsSchema,
-    oldDops: create$2().of(updatedTrafficSignDopSchema).required(),
-    newDops: create$2().of(createdTrafficSignDopSchema).required(),
+    oldDops: create$2()
+        .max(maxTrafficSignDopsCount)
+        .of(updatedTrafficSignDopSchema)
+        .required(),
+    newDops: create$2()
+        .max(maxTrafficSignDopsCount)
+        .of(createdTrafficSignDopSchema)
+        .required(),
 });
 
 const r=(t,r,o)=>{if(t&&"reportValidity"in t){const s=get(o,r);t.setCustomValidity(s&&s.message||""),t.reportValidity();}},o$1=(e,t)=>{for(const o in t.fields){const s=t.fields[o];s&&s.ref&&"reportValidity"in s.ref?r(s.ref,o,e):s&&s.refs&&s.refs.forEach(t=>r(t,o,e));}},s=(r,s)=>{s.shouldUseNativeValidation&&o$1(r,s);const n={};for(const o in r){const f=get(s.fields,o),c=Object.assign(r[o]||{},{ref:f&&f.ref});if(i$1(s.names||Object.keys(r),o)){const r=Object.assign({},get(n,o));set(r,"root",c),set(n,o,r);}else set(n,o,c);}return n},i$1=(e,t)=>{const r=n(t);return e.some(e=>n(e).match(`^${r}\\.\\d+`))};function n(e){return e.replace(/\]|\[/g,"")}
@@ -29855,11 +29930,6 @@ const r=(t,r,o)=>{if(t&&"reportValidity"in t){const s=get(o,r);t.setCustomValidi
 function o(o,n,s$1){return void 0===s$1&&(s$1={}),function(a,i,c){try{return Promise.resolve(function(t,r){try{var u=(null!=n&&n.context&&"development"===process.env.NODE_ENV&&console.warn("You should not used the yup options context. Please, use the 'useForm' context object instead"),Promise.resolve(o["sync"===s$1.mode?"validateSync":"validate"](a,Object.assign({abortEarly:!1},n,{context:i}))).then(function(t){return c.shouldUseNativeValidation&&o$1({},c),{values:s$1.raw?Object.assign({},a):t,errors:{}}}));}catch(e){return r(e)}return u&&u.then?u.then(void 0,r):u}(0,function(e){if(!e.inner)throw e;return {values:{},errors:s((o=e,n=!c.shouldUseNativeValidation&&"all"===c.criteriaMode,(o.inner||[]).reduce(function(e,t){if(e[t.path]||(e[t.path]={message:t.message,type:t.type}),n){var o=e[t.path].types,s=o&&o[t.type];e[t.path]=appendErrors(t.path,n,e,t.type,s?[].concat(s,t.message):t.message);}return e},{})),c)};var o,n;}))}catch(e){return Promise.reject(e)}}}
 
 const TrafficSignUpdateForm = ({ trafficSign, onSubmit, onDelete, onDeleteDop, onUpdateDop, }) => {
-    const [tabsValue, setTabsValue] = React__namespace.useState('1');
-    const handleChange = React__namespace.useCallback((_, newValue) => {
-        setTabsValue(newValue);
-    }, []);
-    const [expanded, setExpanded] = React__namespace.useState(false);
     const defaultValues = React__namespace.useMemo(() => {
         const { dops, traffic_sign_id } = trafficSign;
         const defaultValues = {
@@ -29887,6 +29957,15 @@ const TrafficSignUpdateForm = ({ trafficSign, onSubmit, onDelete, onDeleteDop, o
         control,
         name: 'newDops',
     });
+    const isAddNewDop = React__namespace.useMemo(() => {
+        const isAddNewDop = oldDopsFieldArray.fields.length + newDopsFieldArray.fields.length <
+            maxTrafficSignDopsCount;
+        return isAddNewDop;
+    }, [
+        oldDopsFieldArray.fields.length,
+        newDopsFieldArray.fields.length,
+        maxTrafficSignDopsCount,
+    ]);
     const number = watch('traffic_sign_number');
     React__namespace.useEffect(() => {
         const isErrors = Object.keys(errors).length > 0;
@@ -29901,43 +29980,56 @@ const TrafficSignUpdateForm = ({ trafficSign, onSubmit, onDelete, onDeleteDop, o
     React__namespace.useEffect(() => {
         reset(defaultValues);
     }, [trafficSign]);
-    return (jsxRuntime.jsxs(CustomForm, { form: form, onSubmit: onSubmit, children: [jsxRuntime.jsxs(lab.TabContext, { value: tabsValue, children: [jsxRuntime.jsx(material.Box, { sx: { borderBottom: 1, borderColor: 'divider' }, children: jsxRuntime.jsxs(lab.TabList, { onChange: handleChange, "aria-label": "lab API tabs example", children: [jsxRuntime.jsx(material.Tab, { label: "Traffic Sign", value: "1", sx: {
-                                        textTransform: 'none',
-                                    } }), jsxRuntime.jsx(material.Tab, { label: "Traffic Sign Dop", value: "2", sx: {
-                                        textTransform: 'none',
-                                    } })] }) }), jsxRuntime.jsx(lab.TabPanel, { value: "1", children: jsxRuntime.jsxs(material.Box, { sx: {
+    return (jsxRuntime.jsxs(CustomForm, { form: form, onSubmit: onSubmit, children: [jsxRuntime.jsx(Tabs, { items: [
+                    {
+                        label: trafficSignWords.title,
+                        value: 1,
+                        content: (jsxRuntime.jsxs(material.Box, { sx: {
                                 display: 'grid',
                                 gap: '12px',
-                            }, children: [jsxRuntime.jsxs(material.Accordion, { expanded: expanded, children: [jsxRuntime.jsx(material.AccordionSummary, { expandIcon: jsxRuntime.jsx(ArrowDownwardIcon, {}), onClick: () => {
-                                                setExpanded((prevState) => !prevState);
-                                            }, "aria-controls": "panel1-content", id: "panel1-header", children: jsxRuntime.jsxs(material.Box, { sx: {
+                            }, children: [jsxRuntime.jsx(Accordion, { items: [
+                                        {
+                                            value: 1,
+                                            summary: (jsxRuntime.jsxs(material.Box, { sx: {
                                                     display: 'flex',
                                                     alignItems: 'center',
                                                     gap: '12px',
                                                 }, children: [jsxRuntime.jsx(DeleteButton, { notification: {
-                                                            title: 'Удалить traffic sign',
-                                                            description: 'Вы действительно хотите удалить данный traffic sign?',
+                                                            title: 'Удалить дорожный знак',
+                                                            description: 'Вы действительно хотите удалить данный дорожный знак?',
                                                         }, onDelete: () => {
                                                             onDelete(trafficSign);
-                                                        } }), jsxRuntime.jsx(TrafficSignPreviewTitle$1, { number: number })] }) }), jsxRuntime.jsx(material.AccordionDetails, { children: jsxRuntime.jsx(TrafficSignTable$1, { trafficSigns: trafficSigns, pageSize: 5, onSelect: ({ title, number, type }) => {
-                                                    setValue('traffic_sign_number', number);
-                                                    setValue('traffic_sign_title', title);
-                                                    setValue('traffic_sign_type', type);
-                                                    setExpanded(false);
-                                                } }) })] }), jsxRuntime.jsx(FormSelect, { ...register('status'), label: trafficSignFieldsTitles.status, items: trafficSignStatusOptions, getKey: ({ value }) => value, getLabel: ({ label }) => label, getValue: ({ value }) => value }), jsxRuntime.jsx(CustomInput, { ...register('traffic_sign_value'), label: trafficSignFieldsTitles.traffic_sign_value }), jsxRuntime.jsx(CustomInput, { ...register('comment'), label: trafficSignFieldsTitles.comment }), jsxRuntime.jsx(CustomInput, { ...register('direction'), label: trafficSignFieldsTitles.direction, type: "number" }), jsxRuntime.jsxs(material.Box, { sx: {
+                                                        } }), jsxRuntime.jsx(TrafficSignPreviewTitle$1, { number: number })] })),
+                                            getDetails: ({ onClose }) => {
+                                                return (jsxRuntime.jsx(TrafficSignTable$1, { trafficSigns: trafficSigns, pageSize: 5, onSelect: ({ title, number, type }) => {
+                                                        setValue('traffic_sign_number', number);
+                                                        setValue('traffic_sign_title', title);
+                                                        setValue('traffic_sign_type', type);
+                                                        onClose();
+                                                    } }));
+                                            },
+                                        },
+                                    ] }), jsxRuntime.jsx(FormSelect, { ...register('status'), label: trafficSignFieldsTitles.status, items: trafficSignStatusOptions, getKey: ({ value }) => value, getLabel: ({ label }) => label, getValue: ({ value }) => value }), jsxRuntime.jsx(CustomInput, { ...register('traffic_sign_value'), label: trafficSignFieldsTitles.traffic_sign_value }), jsxRuntime.jsx(CustomInput, { ...register('comment'), label: trafficSignFieldsTitles.comment }), jsxRuntime.jsx(CustomInput, { ...register('direction'), label: trafficSignFieldsTitles.direction, type: "number" }), jsxRuntime.jsxs(material.Box, { sx: {
                                         display: 'grid',
                                         gridTemplateColumns: 'repeat(2, 1fr)',
                                         gap: '12px',
-                                    }, children: [jsxRuntime.jsx(DateField, { ...register('placement_date'), label: trafficSignFieldsTitles.placement_date, format: trafficSignDateFormat }), jsxRuntime.jsx(DateField, { ...register('verification_date'), label: trafficSignFieldsTitles.verification_date, format: trafficSignDateFormat }), jsxRuntime.jsx(DateField, { ...register('future_maintanance_date'), label: trafficSignFieldsTitles.future_maintanance_date, format: trafficSignDateFormat }), jsxRuntime.jsx(DateField, { ...register('rapair_performed_date'), label: trafficSignFieldsTitles.rapair_performed_date, format: trafficSignDateFormat }), jsxRuntime.jsx(DateField, { ...register('warranty_expr_date'), label: trafficSignFieldsTitles.warranty_expr_date, format: trafficSignDateFormat })] })] }) }), jsxRuntime.jsx(lab.TabPanel, { value: "2", children: jsxRuntime.jsxs(material.Box, { sx: {
+                                    }, children: [jsxRuntime.jsx(DateField, { ...register('placement_date'), label: trafficSignFieldsTitles.placement_date, format: trafficSignDateFormat }), jsxRuntime.jsx(DateField, { ...register('verification_date'), label: trafficSignFieldsTitles.verification_date, format: trafficSignDateFormat }), jsxRuntime.jsx(DateField, { ...register('future_maintanance_date'), label: trafficSignFieldsTitles.future_maintanance_date, format: trafficSignDateFormat }), jsxRuntime.jsx(DateField, { ...register('rapair_performed_date'), label: trafficSignFieldsTitles.rapair_performed_date, format: trafficSignDateFormat }), jsxRuntime.jsx(DateField, { ...register('warranty_expr_date'), label: trafficSignFieldsTitles.warranty_expr_date, format: trafficSignDateFormat })] })] })),
+                    },
+                    {
+                        label: trafficSignDopWords.title,
+                        value: 2,
+                        content: (jsxRuntime.jsxs(material.Box, { sx: {
                                 display: 'grid',
                                 gap: '24px',
-                            }, children: [jsxRuntime.jsx(material.Box, { children: jsxRuntime.jsx(Button, { onClick: () => {
-                                            newDopsFieldArray.append({
-                                                ...createdTrafficSignDop,
-                                            });
-                                        }, children: "\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043D\u043E\u0432\u044B\u0439 traffic sign" }) }), oldDopsFieldArray.fields.map(({ id }, index) => (jsxRuntime.jsx(CustomCard, { children: jsxRuntime.jsx(TrafficSignDopUpdateForm$1, { index: index, onDelete: onDeleteDop, onUpdate: onUpdateDop }) }, id))), newDopsFieldArray.fields.map(({ id }, index) => (jsxRuntime.jsx(CustomCard, { children: jsxRuntime.jsx(TrafficSignDopCreateForm$1, { onDelete: () => {
+                            }, children: [jsxRuntime.jsx(TrafficSignAddDopButton$1, { disabled: !isAddNewDop, onClick: () => {
+                                        newDopsFieldArray.append({
+                                            ...createdTrafficSignDop,
+                                        });
+                                    } }), oldDopsFieldArray.fields.map(({ id }, index) => (jsxRuntime.jsx(CustomCard, { children: jsxRuntime.jsx(TrafficSignDopUpdateForm$1, { index: index, onDelete: onDeleteDop, onUpdate: onUpdateDop }) }, id))), newDopsFieldArray.fields.map(({ id }, index) => (jsxRuntime.jsx(CustomCard, { children: jsxRuntime.jsx(TrafficSignDopCreateForm$1, { onDelete: () => {
                                             newDopsFieldArray.remove(index);
-                                        }, index: index }) }, id)))] }) })] }), jsxRuntime.jsx(Button, { type: "submit", children: "\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C" })] }));
+                                        }, index: index }) }, id)))] })),
+                    },
+                ] }), jsxRuntime.jsx(Button, { type: "submit", children: "\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C" })] }));
 };
 var update = observer(TrafficSignUpdateForm);
 
@@ -29945,15 +30037,13 @@ const schema$1 = create$3()
     .shape({
     ...mainFieldsSchema,
     ...datesFieldsSchema,
-    newDops: create$2().of(createdTrafficSignDopSchema).required(),
+    newDops: create$2()
+        .max(maxTrafficSignDopsCount)
+        .of(createdTrafficSignDopSchema)
+        .required(),
 });
 
 const TrafficSignCreateForm = ({ onSubmit, }) => {
-    const [tabsValue, setTabsValue] = React__namespace.useState('1');
-    const handleChange = (event, newValue) => {
-        setTabsValue(newValue);
-    };
-    const [expanded, setExpanded] = React__namespace.useState(false);
     const form = useForm({
         resolver: o(schema$1),
         defaultValues: {
@@ -29976,34 +30066,47 @@ const TrafficSignCreateForm = ({ onSubmit, }) => {
             });
         }
     }, [errors]);
-    return (jsxRuntime.jsxs(CustomForm, { form: form, onSubmit: onSubmit, children: [jsxRuntime.jsxs(lab.TabContext, { value: tabsValue, children: [jsxRuntime.jsx(material.Box, { sx: { borderBottom: 1, borderColor: 'divider' }, children: jsxRuntime.jsxs(lab.TabList, { onChange: handleChange, "aria-label": "lab API tabs example", children: [jsxRuntime.jsx(material.Tab, { label: "TrafficSign", value: "1", sx: {
-                                        textTransform: 'none',
-                                    } }), jsxRuntime.jsx(material.Tab, { label: "TrafficSignDop", value: "2", sx: {
-                                        textTransform: 'none',
-                                    } })] }) }), jsxRuntime.jsx(lab.TabPanel, { value: "1", children: jsxRuntime.jsxs(material.Box, { sx: {
+    return (jsxRuntime.jsxs(CustomForm, { form: form, onSubmit: onSubmit, children: [jsxRuntime.jsx(Tabs, { items: [
+                    {
+                        label: trafficSignWords.title,
+                        value: 1,
+                        content: (jsxRuntime.jsxs(material.Box, { sx: {
                                 display: 'grid',
                                 gap: '12px',
-                            }, children: [jsxRuntime.jsxs(material.Accordion, { expanded: expanded, children: [jsxRuntime.jsx(material.AccordionSummary, { expandIcon: jsxRuntime.jsx(ArrowDownwardIcon, {}), onClick: () => {
-                                                setExpanded((prevState) => !prevState);
-                                            }, "aria-controls": "panel1-content", id: "panel1-header", children: jsxRuntime.jsx(TrafficSignPreviewTitle$1, { number: number }) }), jsxRuntime.jsx(material.AccordionDetails, { children: jsxRuntime.jsx(TrafficSignTable$1, { trafficSigns: trafficSigns, pageSize: 5, onSelect: ({ title, number, type }) => {
-                                                    setValue('traffic_sign_number', number);
-                                                    setValue('traffic_sign_title', title);
-                                                    setValue('traffic_sign_type', type);
-                                                    setExpanded(false);
-                                                } }) })] }), jsxRuntime.jsx(FormSelect, { ...register('status'), label: trafficSignFieldsTitles.status, items: trafficSignStatusOptions, getKey: ({ value }) => value, getLabel: ({ label }) => label, getValue: ({ value }) => value }), jsxRuntime.jsx(CustomInput, { ...register('traffic_sign_value'), label: trafficSignFieldsTitles.traffic_sign_value }), jsxRuntime.jsx(CustomInput, { ...register('comment'), label: trafficSignFieldsTitles.comment }), jsxRuntime.jsx(CustomInput, { ...register('direction'), label: trafficSignFieldsTitles.direction, type: "number" }), jsxRuntime.jsxs(material.Box, { sx: {
+                            }, children: [jsxRuntime.jsx(Accordion, { items: [
+                                        {
+                                            value: 1,
+                                            summary: jsxRuntime.jsx(TrafficSignPreviewTitle$1, { number: number }),
+                                            getDetails: ({ onClose }) => {
+                                                return (jsxRuntime.jsx(TrafficSignTable$1, { trafficSigns: trafficSigns, pageSize: 5, onSelect: ({ title, number, type }) => {
+                                                        setValue('traffic_sign_number', number);
+                                                        setValue('traffic_sign_title', title);
+                                                        setValue('traffic_sign_type', type);
+                                                        onClose();
+                                                    } }));
+                                            },
+                                        },
+                                    ] }), jsxRuntime.jsx(FormSelect, { ...register('status'), label: trafficSignFieldsTitles.status, items: trafficSignStatusOptions, getKey: ({ value }) => value, getLabel: ({ label }) => label, getValue: ({ value }) => value }), jsxRuntime.jsx(CustomInput, { ...register('traffic_sign_value'), label: trafficSignFieldsTitles.traffic_sign_value }), jsxRuntime.jsx(CustomInput, { ...register('comment'), label: trafficSignFieldsTitles.comment }), jsxRuntime.jsx(CustomInput, { ...register('direction'), label: trafficSignFieldsTitles.direction, type: "number" }), jsxRuntime.jsxs(material.Box, { sx: {
                                         display: 'grid',
                                         gridTemplateColumns: 'repeat(2, 1fr)',
                                         gap: '12px',
-                                    }, children: [jsxRuntime.jsx(DateField, { ...register('placement_date'), label: trafficSignFieldsTitles.placement_date, format: trafficSignDateFormat }), jsxRuntime.jsx(DateField, { ...register('verification_date'), label: trafficSignFieldsTitles.verification_date, format: trafficSignDateFormat }), jsxRuntime.jsx(DateField, { ...register('future_maintanance_date'), label: trafficSignFieldsTitles.future_maintanance_date, format: trafficSignDateFormat }), jsxRuntime.jsx(DateField, { ...register('rapair_performed_date'), label: trafficSignFieldsTitles.rapair_performed_date, format: trafficSignDateFormat }), jsxRuntime.jsx(DateField, { ...register('warranty_expr_date'), label: trafficSignFieldsTitles.warranty_expr_date, format: trafficSignDateFormat })] })] }) }), jsxRuntime.jsx(lab.TabPanel, { value: "2", children: jsxRuntime.jsxs(material.Box, { sx: {
+                                    }, children: [jsxRuntime.jsx(DateField, { ...register('placement_date'), label: trafficSignFieldsTitles.placement_date, format: trafficSignDateFormat }), jsxRuntime.jsx(DateField, { ...register('verification_date'), label: trafficSignFieldsTitles.verification_date, format: trafficSignDateFormat }), jsxRuntime.jsx(DateField, { ...register('future_maintanance_date'), label: trafficSignFieldsTitles.future_maintanance_date, format: trafficSignDateFormat }), jsxRuntime.jsx(DateField, { ...register('rapair_performed_date'), label: trafficSignFieldsTitles.rapair_performed_date, format: trafficSignDateFormat }), jsxRuntime.jsx(DateField, { ...register('warranty_expr_date'), label: trafficSignFieldsTitles.warranty_expr_date, format: trafficSignDateFormat })] })] })),
+                    },
+                    {
+                        label: trafficSignDopWords.title,
+                        value: 2,
+                        content: (jsxRuntime.jsxs(material.Box, { sx: {
                                 display: 'grid',
                                 gap: '24px',
-                            }, children: [jsxRuntime.jsx(material.Box, { children: jsxRuntime.jsx(Button, { onClick: () => {
-                                            newDopsFieldArray.append({
-                                                ...createdTrafficSignDop,
-                                            });
-                                        }, children: "\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043D\u043E\u0432\u044B\u0439 traffic sign" }) }), newDopsFieldArray.fields.map(({ id }, index) => (jsxRuntime.jsx(CustomCard, { children: jsxRuntime.jsx(TrafficSignDopCreateForm$1, { onDelete: () => {
+                            }, children: [jsxRuntime.jsx(TrafficSignAddDopButton$1, { disabled: newDopsFieldArray.fields.length === maxTrafficSignDopsCount, onClick: () => {
+                                        newDopsFieldArray.append({
+                                            ...createdTrafficSignDop,
+                                        });
+                                    } }), newDopsFieldArray.fields.map(({ id }, index) => (jsxRuntime.jsx(CustomCard, { children: jsxRuntime.jsx(TrafficSignDopCreateForm$1, { onDelete: () => {
                                             newDopsFieldArray.remove(index);
-                                        }, index: index }) }, id)))] }) })] }), jsxRuntime.jsx(Button, { type: "submit", children: "\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C" })] }));
+                                        }, index: index }) }, id)))] })),
+                    },
+                ] }), jsxRuntime.jsx(Button, { type: "submit", children: "\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C" })] }));
 };
 var create = observer(TrafficSignCreateForm);
 
@@ -33274,6 +33377,7 @@ var tangram_min = /*#__PURE__*/Object.freeze({
     __proto__: null
 });
 
+exports.Accordion = Accordion;
 exports.ApiService = ApiService;
 exports.AuthPage = AuthPage;
 exports.AuthStore = AuthStore;
@@ -33303,6 +33407,8 @@ exports.NoData = NoData;
 exports.QueryProvider = QueryProvider;
 exports.Select = FormSelect;
 exports.StoreContext = StoreContext;
+exports.Tabs = Tabs;
+exports.TrafficSignAddDopButton = TrafficSignAddDopButton$1;
 exports.TrafficSignCreateForm = create;
 exports.TrafficSignDopCreateForm = TrafficSignDopCreateForm$1;
 exports.TrafficSignDopUpdateForm = TrafficSignDopUpdateForm$1;
@@ -33366,6 +33472,7 @@ exports.getWaterAreaLayers = getWaterAreaLayers;
 exports.getWaterLinkLayers = getWaterLinkLayers;
 exports.imagesPath = imagesPath;
 exports.loggerService = loggerService;
+exports.maxTrafficSignDopsCount = maxTrafficSignDopsCount;
 exports.modalStore = modalStore;
 exports.modalStyle = modalStyle;
 exports.parseTrafficSignCSVFile = parseTrafficSignCSVFile;
@@ -33378,6 +33485,7 @@ exports.trafficSignBackendDates = trafficSignBackendDates;
 exports.trafficSignDateFields = trafficSignDateFields;
 exports.trafficSignDateFormat = trafficSignDateFormat;
 exports.trafficSignDopMainFields = trafficSignDopMainFields;
+exports.trafficSignDopWords = trafficSignDopWords;
 exports.trafficSignExtension = trafficSignExtension;
 exports.trafficSignFieldsTitles = trafficSignFieldsTitles;
 exports.trafficSignFrontendDates = trafficSignFrontendDates;
@@ -33385,6 +33493,7 @@ exports.trafficSignLayerName = trafficSignLayerName;
 exports.trafficSignMainFields = trafficSignMainFields;
 exports.trafficSignStatusOptions = trafficSignStatusOptions;
 exports.trafficSignWidths = trafficSignWidths;
+exports.trafficSignWords = trafficSignWords;
 exports.trafficSigns = trafficSigns;
 exports.trafficSignsDop = trafficSignsDop;
 exports.updatedTrafficSign = updatedTrafficSign;