@dartcom/ui-kit 2.7.1 → 2.8.0

package/dist/cjs/components/drag-list/drag-list.js

@@ -23,7 +23,7 @@ function DragList({ items, getItem, getId, onDragEnd, sx, title, draggableSx, })
         }, children: jsxRuntime.jsx(sortable_esm.SortableContext, { items: items.map(getId), strategy: sortable_esm.verticalListSortingStrategy, children: jsxRuntime.jsx(list["default"], { items: items, sx: sx, title: title, getKey: getId, getContent: (item, index) => {
                     const id = getId(item);
                     return (jsxRuntime.jsx(draggable["default"], { id: id, sx: draggableSx, children: getItem(item, index) }, id));
-                }, isEmptyExtreme: true }) }) }));
+                } }) }) }));
 }
 
 exports["default"] = DragList;

package/dist/cjs/components/drag-list/drag-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"drag-list.js","sources":["../../../../src/components/drag-list/drag-list.tsx"],"sourcesContent":["import {\r\n  closestCenter,\r\n  DndContext,\r\n  PointerSensor,\r\n  useSensor,\r\n  useSensors,\r\n} from '@dnd-kit/core';\r\nimport {\r\n  arrayMove,\r\n  SortableContext,\r\n  verticalListSortingStrategy,\r\n} from '@dnd-kit/sortable';\r\n\r\nimport { List } from '../list';\r\n\r\nimport Draggable from './draggable';\r\nimport { DragListProps } from './types';\r\n\r\nfunction DragList<T>({\r\n  items,\r\n  getItem,\r\n  getId,\r\n  onDragEnd,\r\n  sx,\r\n  title,\r\n  draggableSx,\r\n}: DragListProps<T>) {\r\n  const sensors = useSensors(\r\n    useSensor(PointerSensor, {\r\n      activationConstraint: {\r\n        distance: 8,\r\n      },\r\n    }),\r\n  );\r\n\r\n  return (\r\n    <DndContext\r\n      sensors={sensors}\r\n      collisionDetection={closestCenter}\r\n      onDragEnd={(event) => {\r\n        const { active, over } = event;\r\n\r\n        const oldIndex = items.findIndex((item) => getId(item) === active.id);\r\n        const newIndex = items.findIndex((item) => getId(item) === over?.id);\r\n\r\n        const newItems = arrayMove(items, oldIndex, newIndex);\r\n\r\n        onDragEnd(newItems);\r\n      }}>\r\n      <SortableContext\r\n        items={items.map(getId)}\r\n        strategy={verticalListSortingStrategy}>\r\n        <List\r\n          items={items}\r\n          sx={sx}\r\n          title={title}\r\n          getKey={getId}\r\n          getContent={(item, index) => {\r\n            const id = getId(item);\r\n\r\n            return (\r\n              <Draggable key={id} id={id} sx={draggableSx}>\r\n                {getItem(item, index)}\r\n              </Draggable>\r\n            );\r\n          }}\r\n          isEmptyExtreme\r\n        />\r\n      </SortableContext>\r\n    </DndContext>\r\n  );\r\n}\r\n\r\nexport default DragList;\r\n"],"names":["useSensors","useSensor","PointerSensor","_jsx","DndContext","closestCenter","arrayMove","SortableContext","verticalListSortingStrategy","List","Draggable"],"mappings":";;;;;;;;;;AAkBA,SAAS,QAAQ,CAAI,EACnB,KAAK,EACL,OAAO,EACP,KAAK,EACL,SAAS,EACT,EAAE,EACF,KAAK,EACL,WAAW,GACM,EAAA;AACjB,IAAA,MAAM,OAAO,GAAGA,mBAAU,CACxBC,kBAAS,CAACC,sBAAa,EAAE;AACvB,QAAA,oBAAoB,EAAE;AACpB,YAAA,QAAQ,EAAE,CAAC;AACZ,SAAA;AACF,KAAA,CAAC,CACH,CAAC;AAEF,IAAA,QACEC,cAAC,CAAAC,mBAAU,EACT,EAAA,OAAO,EAAE,OAAO,EAChB,kBAAkB,EAAEC,sBAAa,EACjC,SAAS,EAAE,CAAC,KAAK,KAAI;AACnB,YAAA,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;YAE/B,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,KAAK,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC;YACtE,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,KAAK,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,CAAC,CAAC;YAErE,MAAM,QAAQ,GAAGC,sBAAS,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;YAEtD,SAAS,CAAC,QAAQ,CAAC,CAAC;AACtB,SAAC,YACDH,cAAC,CAAAI,4BAAe,IACd,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,EACvB,QAAQ,EAAEC,wCAA2B,EACrC,QAAA,EAAAL,cAAA,CAACM,eAAI,EACH,EAAA,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,KAAK,EACb,UAAU,EAAE,CAAC,IAAI,EAAE,KAAK,KAAI;AAC1B,oBAAA,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;oBAEvB,QACEN,eAACO,oBAAS,EAAA,EAAU,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,WAAW,YACxC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,EADP,EAAA,EAAE,CAEN,EACZ;AACJ,iBAAC,EACD,cAAc,EAAA,IAAA,EAAA,CACd,EACc,CAAA,EAAA,CACP,EACb;AACJ;;;;"}
+{"version":3,"file":"drag-list.js","sources":["../../../../src/components/drag-list/drag-list.tsx"],"sourcesContent":["import {\r\n  closestCenter,\r\n  DndContext,\r\n  PointerSensor,\r\n  useSensor,\r\n  useSensors,\r\n} from '@dnd-kit/core';\r\nimport {\r\n  arrayMove,\r\n  SortableContext,\r\n  verticalListSortingStrategy,\r\n} from '@dnd-kit/sortable';\r\n\r\nimport { List } from '../list';\r\n\r\nimport Draggable from './draggable';\r\nimport { DragListProps } from './types';\r\n\r\nfunction DragList<T>({\r\n  items,\r\n  getItem,\r\n  getId,\r\n  onDragEnd,\r\n  sx,\r\n  title,\r\n  draggableSx,\r\n}: DragListProps<T>) {\r\n  const sensors = useSensors(\r\n    useSensor(PointerSensor, {\r\n      activationConstraint: {\r\n        distance: 8,\r\n      },\r\n    }),\r\n  );\r\n\r\n  return (\r\n    <DndContext\r\n      sensors={sensors}\r\n      collisionDetection={closestCenter}\r\n      onDragEnd={(event) => {\r\n        const { active, over } = event;\r\n\r\n        const oldIndex = items.findIndex((item) => getId(item) === active.id);\r\n        const newIndex = items.findIndex((item) => getId(item) === over?.id);\r\n\r\n        const newItems = arrayMove(items, oldIndex, newIndex);\r\n\r\n        onDragEnd(newItems);\r\n      }}>\r\n      <SortableContext\r\n        items={items.map(getId)}\r\n        strategy={verticalListSortingStrategy}>\r\n        <List\r\n          items={items}\r\n          sx={sx}\r\n          title={title}\r\n          getKey={getId}\r\n          getContent={(item, index) => {\r\n            const id = getId(item);\r\n\r\n            return (\r\n              <Draggable key={id} id={id} sx={draggableSx}>\r\n                {getItem(item, index)}\r\n              </Draggable>\r\n            );\r\n          }}\r\n        />\r\n      </SortableContext>\r\n    </DndContext>\r\n  );\r\n}\r\n\r\nexport default DragList;\r\n"],"names":["useSensors","useSensor","PointerSensor","_jsx","DndContext","closestCenter","arrayMove","SortableContext","verticalListSortingStrategy","List","Draggable"],"mappings":";;;;;;;;;;AAkBA,SAAS,QAAQ,CAAI,EACnB,KAAK,EACL,OAAO,EACP,KAAK,EACL,SAAS,EACT,EAAE,EACF,KAAK,EACL,WAAW,GACM,EAAA;AACjB,IAAA,MAAM,OAAO,GAAGA,mBAAU,CACxBC,kBAAS,CAACC,sBAAa,EAAE;AACvB,QAAA,oBAAoB,EAAE;AACpB,YAAA,QAAQ,EAAE,CAAC;AACZ,SAAA;AACF,KAAA,CAAC,CACH,CAAC;AAEF,IAAA,QACEC,cAAC,CAAAC,mBAAU,EACT,EAAA,OAAO,EAAE,OAAO,EAChB,kBAAkB,EAAEC,sBAAa,EACjC,SAAS,EAAE,CAAC,KAAK,KAAI;AACnB,YAAA,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;YAE/B,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,KAAK,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC;YACtE,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,KAAK,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,CAAC,CAAC;YAErE,MAAM,QAAQ,GAAGC,sBAAS,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;YAEtD,SAAS,CAAC,QAAQ,CAAC,CAAC;AACtB,SAAC,YACDH,cAAC,CAAAI,4BAAe,IACd,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,EACvB,QAAQ,EAAEC,wCAA2B,EACrC,QAAA,EAAAL,cAAA,CAACM,eAAI,EACH,EAAA,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,KAAK,EACb,UAAU,EAAE,CAAC,IAAI,EAAE,KAAK,KAAI;AAC1B,oBAAA,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;oBAEvB,QACEN,eAACO,oBAAS,EAAA,EAAU,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,WAAW,YACxC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,EADP,EAAA,EAAE,CAEN,EACZ;AACJ,iBAAC,EACD,CAAA,EAAA,CACc,EACP,CAAA,EACb;AACJ;;;;"}

package/dist/cjs/components/drag-list/draggable/draggable.js

@@ -25,6 +25,7 @@ const Draggable = ({ id, sx, children, }) => {
         ...(isDragging ? sx?.dragging : {}),
         transform: utilities_esm.CSS.Translate.toString(transform),
         transition,
+        cursor: 'pointer',
     };
     return (jsxRuntime.jsx(Box["default"], { ref: setNodeRef, style: style, ...listeners, ...attributes, children: children }));
 };

package/dist/cjs/components/drag-list/draggable/draggable.js.map

@@ -1 +1 @@
-{"version":3,"file":"draggable.js","sources":["../../../../../src/components/drag-list/draggable/draggable.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { useDraggable } from '@dnd-kit/core';\r\nimport { useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';\r\nimport { CSS } from '@dnd-kit/utilities';\r\nimport { Box } from '@mui/material';\r\n\r\nimport { DraggableProps } from './types';\r\n\r\nconst Draggable: React.FC<React.PropsWithChildren<DraggableProps>> = ({\r\n  id,\r\n  sx,\r\n  children,\r\n}) => {\r\n  const { isDragging } = useDraggable({\r\n    id,\r\n  });\r\n\r\n  const { attributes, listeners, setNodeRef, transform, transition } =\r\n    useSortable({\r\n      id,\r\n      strategy: verticalListSortingStrategy,\r\n      transition: {\r\n        duration: 300,\r\n        easing: 'cubic-bezier(0.25, 1, 0.5, 1)',\r\n      },\r\n    });\r\n\r\n  const style: React.CSSProperties = {\r\n    ...sx?.default,\r\n    ...(isDragging ? sx?.dragging : {}),\r\n    transform: CSS.Translate.toString(transform),\r\n    transition,\r\n  };\r\n\r\n  return (\r\n    <Box ref={setNodeRef} style={style} {...listeners} {...attributes}>\r\n      {children}\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport default Draggable;\r\n"],"names":["useDraggable","useSortable","verticalListSortingStrategy","CSS","_jsx","Box"],"mappings":";;;;;;;;;;AAQM,MAAA,SAAS,GAAsD,CAAC,EACpE,EAAE,EACF,EAAE,EACF,QAAQ,GACT,KAAI;AACH,IAAA,MAAM,EAAE,UAAU,EAAE,GAAGA,qBAAY,CAAC;QAClC,EAAE;AACH,KAAA,CAAC,CAAC;AAEH,IAAA,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,GAChEC,wBAAW,CAAC;QACV,EAAE;AACF,QAAA,QAAQ,EAAEC,wCAA2B;AACrC,QAAA,UAAU,EAAE;AACV,YAAA,QAAQ,EAAE,GAAG;AACb,YAAA,MAAM,EAAE,+BAA+B;AACxC,SAAA;AACF,KAAA,CAAC,CAAC;AAEL,IAAA,MAAM,KAAK,GAAwB;QACjC,GAAG,EAAE,EAAE,OAAO;AACd,QAAA,IAAI,UAAU,GAAG,EAAE,EAAE,QAAQ,GAAG,EAAE,CAAC;QACnC,SAAS,EAAEC,iBAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC;QAC5C,UAAU;KACX,CAAC;AAEF,IAAA,QACEC,cAAC,CAAAC,cAAG,IAAC,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAA,GAAM,SAAS,EAAM,GAAA,UAAU,YAC9D,QAAQ,EAAA,CACL,EACN;AACJ;;;;"}
+{"version":3,"file":"draggable.js","sources":["../../../../../src/components/drag-list/draggable/draggable.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { useDraggable } from '@dnd-kit/core';\r\nimport { useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';\r\nimport { CSS } from '@dnd-kit/utilities';\r\nimport { Box } from '@mui/material';\r\n\r\nimport { DraggableProps } from './types';\r\n\r\nconst Draggable: React.FC<React.PropsWithChildren<DraggableProps>> = ({\r\n  id,\r\n  sx,\r\n  children,\r\n}) => {\r\n  const { isDragging } = useDraggable({\r\n    id,\r\n  });\r\n\r\n  const { attributes, listeners, setNodeRef, transform, transition } =\r\n    useSortable({\r\n      id,\r\n      strategy: verticalListSortingStrategy,\r\n      transition: {\r\n        duration: 300,\r\n        easing: 'cubic-bezier(0.25, 1, 0.5, 1)',\r\n      },\r\n    });\r\n\r\n  const style = {\r\n    ...sx?.default,\r\n    ...(isDragging ? sx?.dragging : {}),\r\n    transform: CSS.Translate.toString(transform),\r\n    transition,\r\n    cursor: 'pointer',\r\n  } as React.CSSProperties;\r\n\r\n  return (\r\n    <Box ref={setNodeRef} style={style} {...listeners} {...attributes}>\r\n      {children}\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport default Draggable;\r\n"],"names":["useDraggable","useSortable","verticalListSortingStrategy","CSS","_jsx","Box"],"mappings":";;;;;;;;;;AAQM,MAAA,SAAS,GAAsD,CAAC,EACpE,EAAE,EACF,EAAE,EACF,QAAQ,GACT,KAAI;AACH,IAAA,MAAM,EAAE,UAAU,EAAE,GAAGA,qBAAY,CAAC;QAClC,EAAE;AACH,KAAA,CAAC,CAAC;AAEH,IAAA,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,GAChEC,wBAAW,CAAC;QACV,EAAE;AACF,QAAA,QAAQ,EAAEC,wCAA2B;AACrC,QAAA,UAAU,EAAE;AACV,YAAA,QAAQ,EAAE,GAAG;AACb,YAAA,MAAM,EAAE,+BAA+B;AACxC,SAAA;AACF,KAAA,CAAC,CAAC;AAEL,IAAA,MAAM,KAAK,GAAG;QACZ,GAAG,EAAE,EAAE,OAAO;AACd,QAAA,IAAI,UAAU,GAAG,EAAE,EAAE,QAAQ,GAAG,EAAE,CAAC;QACnC,SAAS,EAAEC,iBAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC;QAC5C,UAAU;AACV,QAAA,MAAM,EAAE,SAAS;KACK,CAAC;AAEzB,IAAA,QACEC,cAAC,CAAAC,cAAG,IAAC,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAA,GAAM,SAAS,EAAM,GAAA,UAAU,YAC9D,QAAQ,EAAA,CACL,EACN;AACJ;;;;"}

package/dist/cjs/components/form/form.js

@@ -17,16 +17,26 @@ var Box = require('../../node_modules/@mui/material/esm/Box/Box.js');
  *
  * @returns {JSX.Element} The rendered form component with form context.
  */
-function CustomForm({ children, form, sx = {}, onSubmit, }) {
-    const { handleSubmit } = form;
-    return (jsxRuntime.jsx(index_esm.FormProvider, { ...form, children: jsxRuntime.jsx(Box["default"], { component: "form", sx: {
-                display: 'grid',
-                alignContent: 'flex-start',
-                gap: '15px',
-                ...sx,
-            }, onSubmit: () => {
-                handleSubmit(onSubmit);
-            }, children: children }) }));
+function CustomForm({ form, sx = {}, fields, buttons, observers, onSubmit, }) {
+    const { control } = form;
+    return (jsxRuntime.jsx(index_esm.FormProvider, { ...form, children: jsxRuntime.jsxs(index_esm.Form, { control: control, onSubmit: onSubmit, style: {
+                width: '100%',
+                height: '100%',
+            }, children: [jsxRuntime.jsxs(Box["default"], { sx: {
+                        display: 'grid',
+                        alignContent: 'flex-start',
+                        gap: '15px',
+                        ...sx,
+                    }, children: [jsxRuntime.jsx(Box["default"], { sx: {
+                                display: 'grid',
+                                gap: '15px',
+                                ...fields.sx,
+                            }, children: fields.content }), buttons?.content ? (jsxRuntime.jsx(Box["default"], { sx: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '15px',
+                                ...buttons.sx,
+                            }, children: buttons.content })) : null] }), observers?.content] }) }));
 }
 
 exports["default"] = CustomForm;

package/dist/cjs/components/form/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","sources":["../../../../src/components/form/form.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { Box, SxProps } from '@mui/material';\r\nimport {\r\n  FieldValues,\r\n  FormProvider,\r\n  SubmitHandler,\r\n  UseFormReturn,\r\n} from 'react-hook-form';\r\n\r\ninterface CustomFormProp<T extends FieldValues> {\r\n  form: UseFormReturn<T>;\r\n\r\n  onSubmit: SubmitHandler<T>;\r\n\r\n  sx?: SxProps;\r\n}\r\n\r\n/**\r\n * Используем этот компонент как основную обертку для формы\r\n * Все поля должны хранится при инициализации формы и быть доступны через контекст формы\r\n * @template T - Интрефейс данных формы.\r\n * @param {React.ReactNode} children - Все компоненты, которым нужен контекст фор.\r\n * @param {UseFormReturn<T>} form - Форма useForm, которая содержит все поля.\r\n * @param {SxProps} [sx={}] - Опциональные стили самой формы.\r\n * @param {SubmitHandler<T>} onSubmit - Функция обработки отправки формы.\r\n *\r\n * @returns {JSX.Element} The rendered form component with form context.\r\n */\r\nfunction CustomForm<T extends FieldValues>({\r\n  children,\r\n  form,\r\n  sx = {},\r\n  onSubmit,\r\n}: React.PropsWithChildren<CustomFormProp<T>>) {\r\n  const { handleSubmit } = form;\r\n\r\n  return (\r\n    <FormProvider {...form}>\r\n      <Box\r\n        component=\"form\"\r\n        sx={{\r\n          display: 'grid',\r\n\r\n          alignContent: 'flex-start',\r\n\r\n          gap: '15px',\r\n\r\n          ...sx,\r\n        }}\r\n        onSubmit={() => {\r\n          handleSubmit(onSubmit);\r\n        }}>\r\n        {children}\r\n      </Box>\r\n    </FormProvider>\r\n  );\r\n}\r\n\r\nexport default CustomForm;\r\n"],"names":["_jsx","FormProvider","Box"],"mappings":";;;;;;;;AAiBA;;;;;;;;;;AAUG;AACH,SAAS,UAAU,CAAwB,EACzC,QAAQ,EACR,IAAI,EACJ,EAAE,GAAG,EAAE,EACP,QAAQ,GACmC,EAAA;AAC3C,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;AAE9B,IAAA,QACEA,cAAA,CAACC,sBAAY,EAAA,EAAA,GAAK,IAAI,EACpB,QAAA,EAAAD,cAAA,CAACE,cAAG,EAAA,EACF,SAAS,EAAC,MAAM,EAChB,EAAE,EAAE;AACF,gBAAA,OAAO,EAAE,MAAM;AAEf,gBAAA,YAAY,EAAE,YAAY;AAE1B,gBAAA,GAAG,EAAE,MAAM;AAEX,gBAAA,GAAG,EAAE;aACN,EACD,QAAQ,EAAE,MAAK;gBACb,YAAY,CAAC,QAAQ,CAAC,CAAC;AACzB,aAAC,EACA,QAAA,EAAA,QAAQ,EACL,CAAA,EAAA,CACO,EACf;AACJ;;;;"}
+{"version":3,"file":"form.js","sources":["../../../../src/components/form/form.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { Box, SxProps } from '@mui/material';\r\nimport {\r\n  FieldValues,\r\n  Form,\r\n  FormProvider,\r\n  FormSubmitHandler,\r\n  UseFormReturn,\r\n} from 'react-hook-form';\r\n\r\ninterface CustomFormProp<T extends FieldValues> {\r\n  form: UseFormReturn<T>;\r\n\r\n  onSubmit: FormSubmitHandler<T>;\r\n\r\n  sx?: SxProps;\r\n\r\n  fields: {\r\n    content: React.ReactNode;\r\n    sx?: SxProps;\r\n  };\r\n\r\n  buttons?: {\r\n    content?: React.ReactNode;\r\n    sx?: SxProps;\r\n  };\r\n\r\n  observers?: {\r\n    content?: React.ReactNode;\r\n  };\r\n}\r\n\r\n/**\r\n * Используем этот компонент как основную обертку для формы\r\n * Все поля должны хранится при инициализации формы и быть доступны через контекст формы\r\n * @template T - Интрефейс данных формы.\r\n * @param {React.ReactNode} children - Все компоненты, которым нужен контекст фор.\r\n * @param {UseFormReturn<T>} form - Форма useForm, которая содержит все поля.\r\n * @param {SxProps} [sx={}] - Опциональные стили самой формы.\r\n * @param {SubmitHandler<T>} onSubmit - Функция обработки отправки формы.\r\n *\r\n * @returns {JSX.Element} The rendered form component with form context.\r\n */\r\nfunction CustomForm<T extends FieldValues>({\r\n  form,\r\n  sx = {},\r\n  fields,\r\n  buttons,\r\n  observers,\r\n  onSubmit,\r\n}: CustomFormProp<T>) {\r\n  const { control } = form;\r\n\r\n  return (\r\n    <FormProvider {...form}>\r\n      <Form\r\n        control={control}\r\n        onSubmit={onSubmit}\r\n        style={{\r\n          width: '100%',\r\n          height: '100%',\r\n        }}>\r\n        <Box\r\n          sx={{\r\n            display: 'grid',\r\n\r\n            alignContent: 'flex-start',\r\n\r\n            gap: '15px',\r\n\r\n            ...sx,\r\n          }}>\r\n          <Box\r\n            sx={{\r\n              display: 'grid',\r\n\r\n              gap: '15px',\r\n\r\n              ...fields.sx,\r\n            }}>\r\n            {fields.content}\r\n          </Box>\r\n\r\n          {buttons?.content ? (\r\n            <Box\r\n              sx={{\r\n                display: 'flex',\r\n\r\n                alignItems: 'center',\r\n\r\n                gap: '15px',\r\n\r\n                ...buttons.sx,\r\n              }}>\r\n              {buttons.content}\r\n            </Box>\r\n          ) : null}\r\n        </Box>\r\n\r\n        {observers?.content}\r\n      </Form>\r\n    </FormProvider>\r\n  );\r\n}\r\n\r\nexport default CustomForm;\r\n"],"names":["_jsx","FormProvider","_jsxs","Form","Box"],"mappings":";;;;;;;;AAgCA;;;;;;;;;;AAUG;AACH,SAAS,UAAU,CAAwB,EACzC,IAAI,EACJ,EAAE,GAAG,EAAE,EACP,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,GACU,EAAA;AAClB,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;AAEzB,IAAA,QACEA,cAAC,CAAAC,sBAAY,OAAK,IAAI,EAAA,QAAA,EACpBC,gBAACC,cAAI,EAAA,EACH,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,MAAM;AACb,gBAAA,MAAM,EAAE,MAAM;AACf,aAAA,EAAA,QAAA,EAAA,CACDD,eAAC,CAAAE,cAAG,EACF,EAAA,EAAE,EAAE;AACF,wBAAA,OAAO,EAAE,MAAM;AAEf,wBAAA,YAAY,EAAE,YAAY;AAE1B,wBAAA,GAAG,EAAE,MAAM;AAEX,wBAAA,GAAG,EAAE;AACN,qBAAA,EAAA,QAAA,EAAA,CACDJ,cAAC,CAAAI,cAAG,EACF,EAAA,EAAE,EAAE;AACF,gCAAA,OAAO,EAAE,MAAM;AAEf,gCAAA,GAAG,EAAE,MAAM;gCAEX,GAAG,MAAM,CAAC,EAAE;AACb,6BAAA,EAAA,QAAA,EACA,MAAM,CAAC,OAAO,EACX,CAAA,EAEL,OAAO,EAAE,OAAO,IACfJ,cAAA,CAACI,cAAG,EAAA,EACF,EAAE,EAAE;AACF,gCAAA,OAAO,EAAE,MAAM;AAEf,gCAAA,UAAU,EAAE,QAAQ;AAEpB,gCAAA,GAAG,EAAE,MAAM;gCAEX,GAAG,OAAO,CAAC,EAAE;AACd,6BAAA,EAAA,QAAA,EACA,OAAO,CAAC,OAAO,EACZ,CAAA,IACJ,IAAI,CAAA,EAAA,CACJ,EAEL,SAAS,EAAE,OAAO,CACd,EAAA,CAAA,EAAA,CACM,EACf;AACJ;;;;"}

package/dist/cjs/components/input/input.js

@@ -3,14 +3,36 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var index_esm = require('../../node_modules/react-hook-form/dist/index.esm.js');
 var TextField = require('../../node_modules/@mui/material/esm/TextField/TextField.js');
 
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
 function CustomInput(props) {
     const { name } = props;
+    const textFieldId = React__namespace.useId();
     const { control } = index_esm.useFormContext();
     return (jsxRuntime.jsx(index_esm.Controller, { name: name, control: control, render: ({ field }) => {
-            return jsxRuntime.jsx(TextField["default"], { ...props, ...field, size: "small" });
+            return (jsxRuntime.jsx(TextField["default"], { id: textFieldId, ...props, ...field, size: "small" }));
         } }));
 }
 

package/dist/cjs/components/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../../../src/components/input/input.tsx"],"sourcesContent":["import { TextField } from '@mui/material';\r\nimport { Controller, useFormContext } from 'react-hook-form';\r\n\r\nimport { InputProps } from './types';\r\n\r\nfunction CustomInput<T>(props: InputProps<T>) {\r\n  const { name } = props;\r\n\r\n  const { control } = useFormContext();\r\n\r\n  return (\r\n    <Controller\r\n      name={name}\r\n      control={control}\r\n      render={({ field }) => {\r\n        return <TextField {...props} {...field} size=\"small\" />;\r\n      }}\r\n    />\r\n  );\r\n}\r\n\r\nexport default CustomInput;\r\n"],"names":["useFormContext","_jsx","Controller","TextField"],"mappings":";;;;;;;;AAKA,SAAS,WAAW,CAAI,KAAoB,EAAA;AAC1C,IAAA,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;AAEvB,IAAA,MAAM,EAAE,OAAO,EAAE,GAAGA,wBAAc,EAAE,CAAC;AAErC,IAAA,QACEC,cAAC,CAAAC,oBAAU,IACT,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,KAAI;YACpB,OAAOD,cAAA,CAACE,oBAAS,EAAA,EAAA,GAAK,KAAK,EAAA,GAAM,KAAK,EAAE,IAAI,EAAC,OAAO,EAAA,CAAG,CAAC;SACzD,EAAA,CACD,EACF;AACJ;;;;"}
+{"version":3,"file":"input.js","sources":["../../../../src/components/input/input.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { TextField } from '@mui/material';\r\nimport { Controller, useFormContext } from 'react-hook-form';\r\n\r\nimport { CustomInputProps } from './types';\r\n\r\nfunction CustomInput<T>(props: CustomInputProps<T>) {\r\n  const { name } = props;\r\n\r\n  const textFieldId = React.useId();\r\n\r\n  const { control } = useFormContext();\r\n\r\n  return (\r\n    <Controller\r\n      name={name}\r\n      control={control}\r\n      render={({ field }) => {\r\n        return (\r\n          <TextField id={textFieldId} {...props} {...field} size=\"small\" />\r\n        );\r\n      }}\r\n    />\r\n  );\r\n}\r\n\r\nexport default CustomInput;\r\n"],"names":["React","useFormContext","_jsx","Controller","TextField"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,SAAS,WAAW,CAAI,KAA0B,EAAA;AAChD,IAAA,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;AAEvB,IAAA,MAAM,WAAW,GAAGA,gBAAK,CAAC,KAAK,EAAE,CAAC;AAElC,IAAA,MAAM,EAAE,OAAO,EAAE,GAAGC,wBAAc,EAAE,CAAC;AAErC,IAAA,QACEC,cAAC,CAAAC,oBAAU,IACT,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,KAAI;AACpB,YAAA,QACED,cAAC,CAAAE,oBAAS,EAAC,EAAA,EAAE,EAAE,WAAW,EAAA,GAAM,KAAK,EAAA,GAAM,KAAK,EAAE,IAAI,EAAC,OAAO,EAAA,CAAG,EACjE;SACH,EAAA,CACD,EACF;AACJ;;;;"}

package/dist/cjs/components/list/list.js

@@ -9,7 +9,7 @@ var Typography = require('../../node_modules/@mui/material/esm/Typography/Typogr
 var List = require('../../node_modules/@mui/material/esm/List/List.js');
 var ListItem = require('../../node_modules/@mui/material/esm/ListItem/ListItem.js');
 
-function CustomList({ items, columnsCount = 1, getContent, title, getKey, onClick, sx, isEmptyExtreme = false, }) {
+function CustomList({ items, columnsCount = 1, getContent, title, getKey, onClick, sx, }) {
     const isNoData = items.length === 0;
     return (jsxRuntime.jsxs(Box["default"], { sx: {
             display: 'grid',
@@ -18,16 +18,16 @@ function CustomList({ items, columnsCount = 1, getContent, title, getKey, onClic
         }, children: [title ? (jsxRuntime.jsx(Typography["default"], { variant: "h6", noWrap: true, sx: {
                     textAlign: 'center',
                     fontWeight: 700,
-                }, children: title })) : null, isNoData ? (jsxRuntime.jsx(noData["default"], {})) : (jsxRuntime.jsxs(List["default"], { sx: {
+                }, children: title })) : null, isNoData ? (jsxRuntime.jsx(noData["default"], {})) : (jsxRuntime.jsx(List["default"], { sx: {
                     display: 'grid',
                     gridTemplateColumns: `repeat(${columnsCount}, 1fr)`,
                     gap: '15px',
                     ...sx?.list,
-                }, disablePadding: true, children: [isEmptyExtreme ? jsxRuntime.jsx(ListItem["default"], {}) : null, items.map((item, index) => (jsxRuntime.jsx(ListItem["default"], { onClick: () => {
-                            onClick?.(item, index);
-                        }, sx: {
-                            ...sx?.item,
-                        }, disablePadding: true, children: getContent(item, index) }, getKey(item, index)))), isEmptyExtreme ? jsxRuntime.jsx(ListItem["default"], {}) : null] }))] }));
+                }, disablePadding: true, children: items.map((item, index) => (jsxRuntime.jsx(ListItem["default"], { onClick: () => {
+                        onClick?.(item, index);
+                    }, sx: {
+                        ...sx?.item,
+                    }, disablePadding: true, children: getContent(item, index) }, getKey(item, index)))) }))] }));
 }
 
 exports["default"] = CustomList;

package/dist/cjs/components/list/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","sources":["../../../../src/components/list/list.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { Box, List, ListItem, SxProps, Typography } from '@mui/material';\r\n\r\nimport { NoData } from '../no-data';\r\n\r\ninterface CustomListProps<T> {\r\n  items: T[];\r\n  columnsCount?: number;\r\n  title?: string;\r\n\r\n  getContent: (item: T, index: number) => React.JSX.Element;\r\n  getKey: (item: T, index: number) => string | number;\r\n  onClick?: (item: T, index: number) => void;\r\n\r\n  sx?: {\r\n    list?: SxProps;\r\n    item?: SxProps;\r\n  };\r\n\r\n  isEmptyExtreme?: boolean;\r\n}\r\n\r\nfunction CustomList<T>({\r\n  items,\r\n  columnsCount = 1,\r\n  getContent,\r\n  title,\r\n  getKey,\r\n  onClick,\r\n  sx,\r\n  isEmptyExtreme = false,\r\n}: CustomListProps<T>) {\r\n  const isNoData = items.length === 0;\r\n\r\n  return (\r\n    <Box\r\n      sx={{\r\n        display: 'grid',\r\n\r\n        gridTemplateColumns: '1fr',\r\n\r\n        gap: '15px',\r\n      }}>\r\n      {title ? (\r\n        <Typography\r\n          variant=\"h6\"\r\n          noWrap\r\n          sx={{\r\n            textAlign: 'center',\r\n\r\n            fontWeight: 700,\r\n          }}>\r\n          {title}\r\n        </Typography>\r\n      ) : null}\r\n\r\n      {isNoData ? (\r\n        <NoData />\r\n      ) : (\r\n        <List\r\n          sx={{\r\n            display: 'grid',\r\n\r\n            gridTemplateColumns: `repeat(${columnsCount}, 1fr)`,\r\n\r\n            gap: '15px',\r\n\r\n            ...sx?.list,\r\n          }}\r\n          disablePadding>\r\n          {isEmptyExtreme ? <ListItem /> : null}\r\n\r\n          {items.map((item, index) => (\r\n            <ListItem\r\n              key={getKey(item, index)}\r\n              onClick={() => {\r\n                onClick?.(item, index);\r\n              }}\r\n              sx={{\r\n                ...sx?.item,\r\n              }}\r\n              disablePadding>\r\n              {getContent(item, index)}\r\n            </ListItem>\r\n          ))}\r\n\r\n          {isEmptyExtreme ? <ListItem /> : null}\r\n        </List>\r\n      )}\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default CustomList;\r\n"],"names":["_jsxs","Box","_jsx","Typography","NoData","List","ListItem"],"mappings":";;;;;;;;;;;AAsBA,SAAS,UAAU,CAAI,EACrB,KAAK,EACL,YAAY,GAAG,CAAC,EAChB,UAAU,EACV,KAAK,EACL,MAAM,EACN,OAAO,EACP,EAAE,EACF,cAAc,GAAG,KAAK,GACH,EAAA;AACnB,IAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC;AAEpC,IAAA,QACEA,eAAA,CAACC,cAAG,EAAA,EACF,EAAE,EAAE;AACF,YAAA,OAAO,EAAE,MAAM;AAEf,YAAA,mBAAmB,EAAE,KAAK;AAE1B,YAAA,GAAG,EAAE,MAAM;AACZ,SAAA,EAAA,QAAA,EAAA,CACA,KAAK,IACJC,cAAC,CAAAC,qBAAU,EACT,EAAA,OAAO,EAAC,IAAI,EACZ,MAAM,EAAA,IAAA,EACN,EAAE,EAAE;AACF,oBAAA,SAAS,EAAE,QAAQ;AAEnB,oBAAA,UAAU,EAAE,GAAG;iBAChB,EACA,QAAA,EAAA,KAAK,EACK,CAAA,IACX,IAAI,EAEP,QAAQ,IACPD,cAAC,CAAAE,iBAAM,EAAG,EAAA,CAAA,KAEVJ,eAAC,CAAAK,eAAI,EACH,EAAA,EAAE,EAAE;AACF,oBAAA,OAAO,EAAE,MAAM;oBAEf,mBAAmB,EAAE,CAAU,OAAA,EAAA,YAAY,CAAQ,MAAA,CAAA;AAEnD,oBAAA,GAAG,EAAE,MAAM;oBAEX,GAAG,EAAE,EAAE,IAAI;AACZ,iBAAA,EACD,cAAc,EAAA,IAAA,EAAA,QAAA,EAAA,CACb,cAAc,GAAGH,cAAA,CAACI,mBAAQ,EAAA,EAAA,CAAG,GAAG,IAAI,EAEpC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MACrBJ,cAAA,CAACI,mBAAQ,EAAA,EAEP,OAAO,EAAE,MAAK;AACZ,4BAAA,OAAO,GAAG,IAAI,EAAE,KAAK,CAAC,CAAC;yBACxB,EACD,EAAE,EAAE;4BACF,GAAG,EAAE,EAAE,IAAI;AACZ,yBAAA,EACD,cAAc,EAAA,IAAA,EAAA,QAAA,EACb,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,EAAA,EARnB,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CASf,CACZ,CAAC,EAED,cAAc,GAAGJ,eAACI,mBAAQ,EAAA,EAAA,CAAG,GAAG,IAAI,CAAA,EAAA,CAChC,CACR,CAAA,EAAA,CACG,EACN;AACJ;;;;"}
+{"version":3,"file":"list.js","sources":["../../../../src/components/list/list.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { Box, List, ListItem, SxProps, Typography } from '@mui/material';\r\n\r\nimport { NoData } from '../no-data';\r\n\r\ninterface CustomListProps<T> {\r\n  items: T[];\r\n  columnsCount?: number;\r\n  title?: string;\r\n\r\n  getContent: (item: T, index: number) => React.JSX.Element;\r\n  getKey: (item: T, index: number) => string | number;\r\n  onClick?: (item: T, index: number) => void;\r\n\r\n  sx?: {\r\n    list?: SxProps;\r\n    item?: SxProps;\r\n  };\r\n}\r\n\r\nfunction CustomList<T>({\r\n  items,\r\n  columnsCount = 1,\r\n  getContent,\r\n  title,\r\n  getKey,\r\n  onClick,\r\n  sx,\r\n}: CustomListProps<T>) {\r\n  const isNoData = items.length === 0;\r\n\r\n  return (\r\n    <Box\r\n      sx={{\r\n        display: 'grid',\r\n\r\n        gridTemplateColumns: '1fr',\r\n\r\n        gap: '15px',\r\n      }}>\r\n      {title ? (\r\n        <Typography\r\n          variant=\"h6\"\r\n          noWrap\r\n          sx={{\r\n            textAlign: 'center',\r\n\r\n            fontWeight: 700,\r\n          }}>\r\n          {title}\r\n        </Typography>\r\n      ) : null}\r\n\r\n      {isNoData ? (\r\n        <NoData />\r\n      ) : (\r\n        <List\r\n          sx={{\r\n            display: 'grid',\r\n\r\n            gridTemplateColumns: `repeat(${columnsCount}, 1fr)`,\r\n\r\n            gap: '15px',\r\n\r\n            ...sx?.list,\r\n          }}\r\n          disablePadding>\r\n          {items.map((item, index) => (\r\n            <ListItem\r\n              key={getKey(item, index)}\r\n              onClick={() => {\r\n                onClick?.(item, index);\r\n              }}\r\n              sx={{\r\n                ...sx?.item,\r\n              }}\r\n              disablePadding>\r\n              {getContent(item, index)}\r\n            </ListItem>\r\n          ))}\r\n        </List>\r\n      )}\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default CustomList;\r\n"],"names":["_jsxs","Box","_jsx","Typography","NoData","List","ListItem"],"mappings":";;;;;;;;;;;AAoBA,SAAS,UAAU,CAAI,EACrB,KAAK,EACL,YAAY,GAAG,CAAC,EAChB,UAAU,EACV,KAAK,EACL,MAAM,EACN,OAAO,EACP,EAAE,GACiB,EAAA;AACnB,IAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC;AAEpC,IAAA,QACEA,eAAA,CAACC,cAAG,EAAA,EACF,EAAE,EAAE;AACF,YAAA,OAAO,EAAE,MAAM;AAEf,YAAA,mBAAmB,EAAE,KAAK;AAE1B,YAAA,GAAG,EAAE,MAAM;AACZ,SAAA,EAAA,QAAA,EAAA,CACA,KAAK,IACJC,cAAC,CAAAC,qBAAU,EACT,EAAA,OAAO,EAAC,IAAI,EACZ,MAAM,EAAA,IAAA,EACN,EAAE,EAAE;AACF,oBAAA,SAAS,EAAE,QAAQ;AAEnB,oBAAA,UAAU,EAAE,GAAG;iBAChB,EACA,QAAA,EAAA,KAAK,EACK,CAAA,IACX,IAAI,EAEP,QAAQ,IACPD,cAAC,CAAAE,iBAAM,EAAG,EAAA,CAAA,KAEVF,cAAC,CAAAG,eAAI,EACH,EAAA,EAAE,EAAE;AACF,oBAAA,OAAO,EAAE,MAAM;oBAEf,mBAAmB,EAAE,CAAU,OAAA,EAAA,YAAY,CAAQ,MAAA,CAAA;AAEnD,oBAAA,GAAG,EAAE,MAAM;oBAEX,GAAG,EAAE,EAAE,IAAI;iBACZ,EACD,cAAc,kBACb,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MACrBH,cAAC,CAAAI,mBAAQ,IAEP,OAAO,EAAE,MAAK;AACZ,wBAAA,OAAO,GAAG,IAAI,EAAE,KAAK,CAAC,CAAC;qBACxB,EACD,EAAE,EAAE;wBACF,GAAG,EAAE,EAAE,IAAI;qBACZ,EACD,cAAc,kBACb,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,EAAA,EARnB,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CASf,CACZ,CAAC,EACG,CAAA,CACR,CACG,EAAA,CAAA,EACN;AACJ;;;;"}

package/dist/cjs/node_modules/react-hook-form/dist/index.esm.js

@@ -573,7 +573,125 @@ function useController(props) {
  */
 const Controller = (props) => props.render(useController(props));
 
+const flatten = (obj) => {
+    const output = {};
+    for (const key of Object.keys(obj)) {
+        if (isObjectType(obj[key]) && obj[key] !== null) {
+            const nested = flatten(obj[key]);
+            for (const nestedKey of Object.keys(nested)) {
+                output[`${key}.${nestedKey}`] = nested[nestedKey];
+            }
+        }
+        else {
+            output[key] = obj[key];
+        }
+    }
+    return output;
+};
+
+const POST_REQUEST = 'post';
+/**
+ * Form component to manage submission.
+ *
+ * @param props - to setup submission detail. {@link FormProps}
+ *
+ * @returns form component or headless render prop.
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const { control, formState: { errors } } = useForm();
+ *
+ *   return (
+ *     <Form action="/api" control={control}>
+ *       <input {...register("name")} />
+ *       <p>{errors?.root?.server && 'Server error'}</p>
+ *       <button>Submit</button>
+ *     </Form>
+ *   );
+ * }
+ * ```
+ */
+function Form(props) {
+    const methods = useFormContext();
+    const [mounted, setMounted] = React__default["default"].useState(false);
+    const { control = methods.control, onSubmit, children, action, method = POST_REQUEST, headers, encType, onError, render, onSuccess, validateStatus, ...rest } = props;
+    const submit = async (event) => {
+        let hasError = false;
+        let type = '';
+        await control.handleSubmit(async (data) => {
+            const formData = new FormData();
+            let formDataJson = '';
+            try {
+                formDataJson = JSON.stringify(data);
+            }
+            catch (_a) { }
+            const flattenFormValues = flatten(control._formValues);
+            for (const key in flattenFormValues) {
+                formData.append(key, flattenFormValues[key]);
+            }
+            if (onSubmit) {
+                await onSubmit({
+                    data,
+                    event,
+                    method,
+                    formData,
+                    formDataJson,
+                });
+            }
+            if (action) {
+                try {
+                    const shouldStringifySubmissionData = [
+                        headers && headers['Content-Type'],
+                        encType,
+                    ].some((value) => value && value.includes('json'));
+                    const response = await fetch(String(action), {
+                        method,
+                        headers: {
+                            ...headers,
+                            ...(encType && encType !== 'multipart/form-data'
+                                ? { 'Content-Type': encType }
+                                : {}),
+                        },
+                        body: shouldStringifySubmissionData ? formDataJson : formData,
+                    });
+                    if (response &&
+                        (validateStatus
+                            ? !validateStatus(response.status)
+                            : response.status < 200 || response.status >= 300)) {
+                        hasError = true;
+                        onError && onError({ response });
+                        type = String(response.status);
+                    }
+                    else {
+                        onSuccess && onSuccess({ response });
+                    }
+                }
+                catch (error) {
+                    hasError = true;
+                    onError && onError({ error });
+                }
+            }
+        })(event);
+        if (hasError && props.control) {
+            props.control._subjects.state.next({
+                isSubmitSuccessful: false,
+            });
+            props.control.setError('root.server', {
+                type,
+            });
+        }
+    };
+    React__default["default"].useEffect(() => {
+        setMounted(true);
+    }, []);
+    return render ? (React__default["default"].createElement(React__default["default"].Fragment, null, render({
+        submit,
+    }))) : (React__default["default"].createElement("form", { noValidate: mounted, action: action, method: method, encType: encType, onSubmit: submit, ...rest }, children));
+}
+
 exports.Controller = Controller;
+exports.Form = Form;
 exports.FormProvider = FormProvider;
 exports.get = get;
 exports.set = set;