@dartcom/ui-kit 2.7.2 → 2.8.0

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/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;