@dartcom/ui-kit 3.3.0 → 3.4.0

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var index_esm = require('../../node_modules/react-hook-form/dist/index.esm.js');
 var Box = require('../../node_modules/@mui/material/esm/Box/Box.js');
 
 /**
@@ -16,22 +17,13 @@ var Box = require('../../node_modules/@mui/material/esm/Box/Box.js');
  *
  * @returns {JSX.Element} The rendered form component with form context.
  */
-function CustomForm({ form, sx = {}, fields, buttons, observers, onSubmit, }) {
+function CustomForm({ form, sx = {}, onSubmit, children, }) {
     const { handleSubmit } = form;
-    return (jsxRuntime.jsxs(Box.default, { component: "form", sx: {
-            display: 'grid',
-            gap: '15px',
-            ...sx,
-        }, onSubmit: handleSubmit(onSubmit), 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] }));
+    return (jsxRuntime.jsx(index_esm.FormProvider, { ...form, children: jsxRuntime.jsx(Box.default, { component: "form", sx: {
+                display: 'grid',
+                gap: '15px',
+                ...sx,
+            }, onSubmit: handleSubmit(onSubmit), children: children }) }));
 }
 
 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 { FieldValues, SubmitHandler, UseFormReturn } 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  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 { handleSubmit } = form;\r\n\r\n  return (\r\n    <Box\r\n      component=\"form\"\r\n      sx={{\r\n        display: 'grid',\r\n\r\n        gap: '15px',\r\n\r\n        ...sx,\r\n      }}\r\n      onSubmit={handleSubmit(onSubmit)}>\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      {observers?.content}\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default CustomForm;\r\n"],"names":["_jsxs","Box","_jsx"],"mappings":";;;;;;;AA0BA;;;;;;;;;;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,YAAY,EAAE,GAAG,IAAI;IAE7B,QACEA,gBAACC,WAAG,EAAA,EACF,SAAS,EAAC,MAAM,EAChB,EAAE,EAAE;AACF,YAAA,OAAO,EAAE,MAAM;AAEf,YAAA,GAAG,EAAE,MAAM;AAEX,YAAA,GAAG,EAAE;SACN,EACD,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC,EAAA,QAAA,EAAA,CAChCC,cAAA,CAACD,WAAG,EAAA,EACF,EAAE,EAAE;AACF,oBAAA,OAAO,EAAE,MAAM;AAEf,oBAAA,GAAG,EAAE,MAAM;oBAEX,GAAG,MAAM,CAAC,EAAE;AACb,iBAAA,EAAA,QAAA,EACA,MAAM,CAAC,OAAO,EAAA,CACX,EAEL,OAAO,EAAE,OAAO,IACfC,cAAA,CAACD,WAAG,EAAA,EACF,EAAE,EAAE;AACF,oBAAA,OAAO,EAAE,MAAM;AAEf,oBAAA,UAAU,EAAE,QAAQ;AAEpB,oBAAA,GAAG,EAAE,MAAM;oBAEX,GAAG,OAAO,CAAC,EAAE;AACd,iBAAA,EAAA,QAAA,EACA,OAAO,CAAC,OAAO,EAAA,CACZ,IACJ,IAAI,EACP,SAAS,EAAE,OAAO,CAAA,EAAA,CACf;AAEV;;;;"}
+{"version":3,"file":"form.js","sources":["../../../../src/components/form/form.tsx"],"sourcesContent":["import { 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  form,\r\n  sx = {},\r\n  onSubmit,\r\n  children,\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          gap: '15px',\r\n\r\n          ...sx,\r\n        }}\r\n        onSubmit={handleSubmit(onSubmit)}>\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":";;;;;;;;AAgBA;;;;;;;;;;AAUG;AACH,SAAS,UAAU,CAAwB,EACzC,IAAI,EACJ,EAAE,GAAG,EAAE,EACP,QAAQ,EACR,QAAQ,GACmC,EAAA;AAC3C,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI;AAE7B,IAAA,QACEA,cAAA,CAACC,sBAAY,EAAA,EAAA,GAAK,IAAI,EAAA,QAAA,EACpBD,cAAA,CAACE,WAAG,EAAA,EACF,SAAS,EAAC,MAAM,EAChB,EAAE,EAAE;AACF,gBAAA,OAAO,EAAE,MAAM;AAEf,gBAAA,GAAG,EAAE,MAAM;AAEX,gBAAA,GAAG,EAAE;aACN,EACD,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC,EAAA,QAAA,EAC/B,QAAQ,EAAA,CACL,EAAA,CACO;AAEnB;;;;"}

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

@@ -5,7 +5,7 @@ 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');
+var textField = require('../text-field/text-field.js');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -27,12 +27,27 @@ function _interopNamespaceDefault(e) {
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 function CustomInput(props) {
-    const { name } = props;
+    const { name, type } = 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, { id: textFieldId, ...props, ...field, size: "small" }));
-        } }));
+    return (jsxRuntime.jsx(index_esm.Controller, { name: name, control: control, render: ({ field }) => (jsxRuntime.jsx(textField.default, { id: textFieldId, ...props, ...field, onChange: (event) => {
+                const { target } = event;
+                const { value } = target;
+                switch (type) {
+                    case 'number': {
+                        if (value === '') {
+                            field.onChange();
+                        }
+                        else {
+                            field.onChange(Number(value));
+                        }
+                        break;
+                    }
+                    default: {
+                        field.onChange(event);
+                    }
+                }
+            } })) }));
 }
 
 exports.default = CustomInput;

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

@@ -1 +1 @@
-{"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;AAEtB,IAAA,MAAM,WAAW,GAAGA,gBAAK,CAAC,KAAK,EAAE;AAEjC,IAAA,MAAM,EAAE,OAAO,EAAE,GAAGC,wBAAc,EAAE;AAEpC,IAAA,QACEC,cAAA,CAACC,oBAAU,IACT,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,KAAI;AACpB,YAAA,QACED,cAAA,CAACE,iBAAS,EAAA,EAAC,EAAE,EAAE,WAAW,EAAA,GAAM,KAAK,EAAA,GAAM,KAAK,EAAE,IAAI,EAAC,OAAO,EAAA,CAAG;QAErE,CAAC,EAAA,CACD;AAEN;;;;"}
+{"version":3,"file":"input.js","sources":["../../../../src/components/input/input.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { Controller, useFormContext } from 'react-hook-form';\r\n\r\nimport { TextField } from '../text-field';\r\n\r\nimport { CustomInputProps } from './types';\r\n\r\nfunction CustomInput<T>(props: CustomInputProps<T>) {\r\n  const { name, type } = 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        <TextField\r\n          id={textFieldId}\r\n          {...props}\r\n          {...field}\r\n          onChange={(event) => {\r\n            const { target } = event;\r\n\r\n            const { value } = target;\r\n\r\n            switch (type) {\r\n              case 'number': {\r\n                if (value === '') {\r\n                  field.onChange();\r\n                } else {\r\n                  field.onChange(Number(value));\r\n                }\r\n\r\n                break;\r\n              }\r\n\r\n              default: {\r\n                field.onChange(event);\r\n              }\r\n            }\r\n          }}\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,SAAS,WAAW,CAAI,KAA0B,EAAA;AAChD,IAAA,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,KAAK;AAE5B,IAAA,MAAM,WAAW,GAAGA,gBAAK,CAAC,KAAK,EAAE;AAEjC,IAAA,MAAM,EAAE,OAAO,EAAE,GAAGC,wBAAc,EAAE;AAEpC,IAAA,QACEC,cAAA,CAACC,oBAAU,EAAA,EACT,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,MAChBD,cAAA,CAACE,iBAAS,EAAA,EACR,EAAE,EAAE,WAAW,EAAA,GACX,KAAK,EAAA,GACL,KAAK,EACT,QAAQ,EAAE,CAAC,KAAK,KAAI;AAClB,gBAAA,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK;AAExB,gBAAA,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM;gBAExB,QAAQ,IAAI;oBACV,KAAK,QAAQ,EAAE;AACb,wBAAA,IAAI,KAAK,KAAK,EAAE,EAAE;4BAChB,KAAK,CAAC,QAAQ,EAAE;wBAClB;6BAAO;4BACL,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;wBAC/B;wBAEA;oBACF;oBAEA,SAAS;AACP,wBAAA,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;oBACvB;;AAEJ,YAAA,CAAC,EAAA,CACD,CACH,EAAA,CACD;AAEN;;;;"}

package/dist/cjs/components/text-field/text-field.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var TextField = require('../../node_modules/@mui/material/esm/TextField/TextField.js');
+
+const CustomTextField = (props) => {
+    return jsxRuntime.jsx(TextField.default, { size: "small", ...props });
+};
+
+exports.default = CustomTextField;
+//# sourceMappingURL=text-field.js.map

package/dist/cjs/components/text-field/text-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.js","sources":["../../../../src/components/text-field/text-field.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TextField } from '@mui/material';\n\nimport { CustomTextFieldProps } from './types';\n\nconst CustomTextField: React.FC<CustomTextFieldProps> = (props) => {\n  return <TextField size=\"small\" {...props} />;\n};\n\nexport default CustomTextField;\n"],"names":["_jsx","TextField"],"mappings":";;;;;;;AAKA,MAAM,eAAe,GAAmC,CAAC,KAAK,KAAI;IAChE,OAAOA,cAAA,CAACC,iBAAS,EAAA,EAAC,IAAI,EAAC,OAAO,EAAA,GAAK,KAAK,EAAA,CAAI;AAC9C;;;;"}

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

@@ -148,6 +148,40 @@ HookFormContext.displayName = 'HookFormContext';
  * ```
  */
 const useFormContext = () => React.useContext(HookFormContext);
+/**
+ * A provider component that propagates the `useForm` methods to all children components via [React Context](https://reactjs.org/docs/context.html) API. To be used with {@link useFormContext}.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)
+ *
+ * @param props - all useForm methods
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const methods = useForm();
+ *   const onSubmit = data => console.log(data);
+ *
+ *   return (
+ *     <FormProvider {...methods} >
+ *       <form onSubmit={methods.handleSubmit(onSubmit)}>
+ *         <NestedInput />
+ *         <input type="submit" />
+ *       </form>
+ *     </FormProvider>
+ *   );
+ * }
+ *
+ *  function NestedInput() {
+ *   const { register } = useFormContext(); // retrieve all hook methods
+ *   return <input {...register("test")} />;
+ * }
+ * ```
+ */
+const FormProvider = (props) => {
+    const { children, ...data } = props;
+    return (React.createElement(HookFormContext.Provider, { value: data }, children));
+};
 
 var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
     const result = {
@@ -532,6 +566,7 @@ function useController(props) {
 const Controller = (props) => props.render(useController(props));
 
 exports.Controller = Controller;
+exports.FormProvider = FormProvider;
 exports.get = get;
 exports.set = set;
 exports.useController = useController;