@astral/ui 4.115.1 → 4.116.0

package/hook-form/EditableText/EditingForm/EditingForm.js

@@ -1,18 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconButton } from '../../../components/IconButton';
+import { CheckOutlineMd } from '../../../icons/CheckOutlineMd';
+import { CrossOutlineMd } from '../../../icons/CrossOutlineMd';
 import { Form } from '../../Form';
 import { FormSubmitButton } from '../../FormSubmitButton';
 import { FormTextField } from '../../FormTextField';
 import { FIELD_NAME } from '../constants';
-import { CancelButton, Description, FormFooter, Wrapper } from './styles';
+import { FormIconSubmitButton } from '../FormIconSubmitButton';
+import { Actions, Description, FieldContainer, FieldRow, FormFooter, Wrapper, } from './styles';
 import { useLogic } from './useLogic';
 // biome-ignore lint/complexity/noUselessTypeConstraint: Фикс типизация в тестах
 export const EditingForm = (props) => {
-    const { formProps } = useLogic(props);
+    const { formProps, isMobile } = useLogic(props);
     const { componentField = (fieldProps) => _jsx(FormTextField, { ...fieldProps }), onClose, } = props;
-    return (_jsx(Wrapper, { children: _jsxs(Form, { ...formProps, children: [_jsx(Description, { children: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043D\u043E\u0432\u043E\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0438 \u043D\u0430\u0436\u043C\u0438\u0442\u0435 \u00AB\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C\u00BB" }), componentField?.({
-                    name: FIELD_NAME,
-                    control: formProps.form.control,
-                    fullWidth: true,
-                    autoFocus: true,
-                }), _jsxs(FormFooter, { children: [_jsx(CancelButton, { variant: "text", onClick: onClose, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), _jsx(FormSubmitButton, { children: "\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C" })] })] }) }));
+    const formFieldProps = {
+        name: FIELD_NAME,
+        control: formProps.form.control,
+        fullWidth: true,
+        autoFocus: true,
+    };
+    return (_jsx(Wrapper, { children: _jsxs(Form, { ...formProps, children: [_jsx(Description, { children: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043D\u043E\u0432\u043E\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0438 \u043D\u0430\u0436\u043C\u0438\u0442\u0435 \u00AB\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C\u00BB" }), _jsxs(FieldRow, { children: [_jsx(FieldContainer, { children: componentField(formFieldProps) }), !isMobile && (_jsxs(Actions, { children: [_jsx(FormIconSubmitButton, { variant: "outlined", size: "large", color: "success", "aria-label": "\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C", children: _jsx(CheckOutlineMd, {}) }), _jsx(IconButton, { variant: "outlined", size: "large", color: "grey", "aria-label": "\u041E\u0442\u043C\u0435\u043D\u0430", onClick: onClose, children: _jsx(CrossOutlineMd, {}) })] }))] }), isMobile && (_jsx(FormFooter, { children: _jsx(FormSubmitButton, { children: "\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C" }) }))] }) }));
 };

package/hook-form/EditableText/EditingForm/styles.d.ts

@@ -14,17 +14,19 @@ export declare const Description: import("../../../components/styled").StyledCom
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
+export declare const FieldRow: import("../../../components/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FieldContainer: import("../../../components/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Actions: import("../../../components/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const FormFooter: import("../../../components/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
-export declare const CancelButton: import("../../../components/styled").StyledComponent<Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
-    variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
-    loading?: boolean | undefined;
-    color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
-    component?: import("react").ElementType | undefined;
-    selected?: boolean | undefined;
-    size?: "large" | "medium" | undefined;
-} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;

package/hook-form/EditableText/EditingForm/styles.js

@@ -1,4 +1,4 @@
-import { Button, buttonClasses } from '../../../components/Button';
+import { buttonClasses } from '../../../components/Button';
 import { styled } from '../../../components/styled';
 import { Typography } from '../../../components/Typography';
 export const Wrapper = styled.div `
@@ -16,22 +16,30 @@ export const Description = styled(Typography) `
     display: none;
   }
 `;
+export const FieldRow = styled.div `
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(5)};
+  align-items: flex-start;
+`;
+export const FieldContainer = styled.div `
+  flex: 1;
+
+  min-width: 0;
+`;
+export const Actions = styled.div `
+  display: flex;
+  flex-shrink: 0;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
 export const FormFooter = styled.footer `
   display: flex;
   gap: ${({ theme }) => theme.spacing(3)};
   justify-content: end;
 
-  ${({ theme }) => theme.breakpoints.down('mobile')} {
-    padding-top: ${({ theme }) => theme.spacing(4)};
+  padding-top: ${({ theme }) => theme.spacing(4)};
 
-    & .${buttonClasses.root} {
-      width: 100%;
-      height: 48px;
-    }
-  }
-`;
-export const CancelButton = styled(Button) `
-  ${({ theme }) => theme.breakpoints.down('mobile')} {
-    display: none;
+  & .${buttonClasses.root} {
+    width: 100%;
+    height: 48px;
   }
 `;

package/hook-form/EditableText/EditingForm/useLogic/useLogic.d.ts

@@ -7,5 +7,6 @@ export declare const useLogic: <TValue>({ initialValue, children, validate, onCl
         form: import("react-hook-form").UseFormReturn<FormValues, any>;
         onSubmit: (e?: import("react").BaseSyntheticEvent<object, any, any> | undefined) => Promise<void | undefined>;
     };
+    isMobile: boolean;
 };
 export {};

package/hook-form/EditableText/EditingForm/useLogic/useLogic.js

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import { useViewportType } from '../../../../components/useViewportType';
 import { useForm } from '../../../useForm';
 import { FIELD_NAME } from '../../constants';
 export const useLogic = ({ initialValue, children, validate, onClose, onSubmit, }) => {
@@ -45,10 +46,12 @@ export const useLogic = ({ initialValue, children, validate, onClose, onSubmit,
             return onSubmit(fieldValue);
         }
     };
+    const { isMobile } = useViewportType();
     return {
         formProps: {
             form,
             onSubmit: form.handleSubmit(handleSubmit),
         },
+        isMobile,
     };
 };

package/hook-form/EditableText/FormIconSubmitButton/FormIconSubmitButton.d.ts

@@ -0,0 +1,3 @@
+import { type IconButtonProps } from '../../../components/IconButton';
+export type FormIconSubmitButtonProps = Omit<IconButtonProps, 'type'>;
+export declare const FormIconSubmitButton: ({ children, loading, ...props }: FormIconSubmitButtonProps) => import("react/jsx-runtime").JSX.Element;

package/hook-form/EditableText/FormIconSubmitButton/FormIconSubmitButton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconButton, } from '../../../components/IconButton';
+import { useFormContext } from '../../useFormContext';
+export const FormIconSubmitButton = ({ children, loading, ...props }) => {
+    const { formState } = useFormContext();
+    return (_jsx(IconButton, { type: "submit", loading: loading || formState?.isSubmitting, ...props, children: children }));
+};

package/hook-form/EditableText/FormIconSubmitButton/index.d.ts

@@ -0,0 +1 @@
+export * from './FormIconSubmitButton';

package/hook-form/EditableText/FormIconSubmitButton/index.js

@@ -0,0 +1 @@
+export * from './FormIconSubmitButton';

package/node/hook-form/EditableText/EditingForm/EditingForm.js

@@ -2,21 +2,26 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditingForm = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const IconButton_1 = require("../../../components/IconButton");
+const CheckOutlineMd_1 = require("../../../icons/CheckOutlineMd");
+const CrossOutlineMd_1 = require("../../../icons/CrossOutlineMd");
 const Form_1 = require("../../Form");
 const FormSubmitButton_1 = require("../../FormSubmitButton");
 const FormTextField_1 = require("../../FormTextField");
 const constants_1 = require("../constants");
+const FormIconSubmitButton_1 = require("../FormIconSubmitButton");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 // biome-ignore lint/complexity/noUselessTypeConstraint: Фикс типизация в тестах
 const EditingForm = (props) => {
-    const { formProps } = (0, useLogic_1.useLogic)(props);
+    const { formProps, isMobile } = (0, useLogic_1.useLogic)(props);
     const { componentField = (fieldProps) => (0, jsx_runtime_1.jsx)(FormTextField_1.FormTextField, { ...fieldProps }), onClose, } = props;
-    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { children: (0, jsx_runtime_1.jsxs)(Form_1.Form, { ...formProps, children: [(0, jsx_runtime_1.jsx)(styles_1.Description, { children: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043D\u043E\u0432\u043E\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0438 \u043D\u0430\u0436\u043C\u0438\u0442\u0435 \u00AB\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C\u00BB" }), componentField?.({
-                    name: constants_1.FIELD_NAME,
-                    control: formProps.form.control,
-                    fullWidth: true,
-                    autoFocus: true,
-                }), (0, jsx_runtime_1.jsxs)(styles_1.FormFooter, { children: [(0, jsx_runtime_1.jsx)(styles_1.CancelButton, { variant: "text", onClick: onClose, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), (0, jsx_runtime_1.jsx)(FormSubmitButton_1.FormSubmitButton, { children: "\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C" })] })] }) }));
+    const formFieldProps = {
+        name: constants_1.FIELD_NAME,
+        control: formProps.form.control,
+        fullWidth: true,
+        autoFocus: true,
+    };
+    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { children: (0, jsx_runtime_1.jsxs)(Form_1.Form, { ...formProps, children: [(0, jsx_runtime_1.jsx)(styles_1.Description, { children: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043D\u043E\u0432\u043E\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0438 \u043D\u0430\u0436\u043C\u0438\u0442\u0435 \u00AB\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C\u00BB" }), (0, jsx_runtime_1.jsxs)(styles_1.FieldRow, { children: [(0, jsx_runtime_1.jsx)(styles_1.FieldContainer, { children: componentField(formFieldProps) }), !isMobile && ((0, jsx_runtime_1.jsxs)(styles_1.Actions, { children: [(0, jsx_runtime_1.jsx)(FormIconSubmitButton_1.FormIconSubmitButton, { variant: "outlined", size: "large", color: "success", "aria-label": "\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C", children: (0, jsx_runtime_1.jsx)(CheckOutlineMd_1.CheckOutlineMd, {}) }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "outlined", size: "large", color: "grey", "aria-label": "\u041E\u0442\u043C\u0435\u043D\u0430", onClick: onClose, children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) })] }))] }), isMobile && ((0, jsx_runtime_1.jsx)(styles_1.FormFooter, { children: (0, jsx_runtime_1.jsx)(FormSubmitButton_1.FormSubmitButton, { children: "\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C" }) }))] }) }));
 };
 exports.EditingForm = EditingForm;

package/node/hook-form/EditableText/EditingForm/styles.d.ts

@@ -14,17 +14,19 @@ export declare const Description: import("@emotion/styled/dist/declarations/src/
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
+export declare const FieldRow: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FieldContainer: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Actions: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const FormFooter: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
-export declare const CancelButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
-    variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
-    loading?: boolean | undefined;
-    color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
-    component?: import("react").ElementType | undefined;
-    selected?: boolean | undefined;
-    size?: "large" | "medium" | undefined;
-} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;

package/node/hook-form/EditableText/EditingForm/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CancelButton = exports.FormFooter = exports.Description = exports.Wrapper = void 0;
+exports.FormFooter = exports.Actions = exports.FieldContainer = exports.FieldRow = exports.Description = exports.Wrapper = void 0;
 const Button_1 = require("../../../components/Button");
 const styled_1 = require("../../../components/styled");
 const Typography_1 = require("../../../components/Typography");
@@ -19,22 +19,30 @@ exports.Description = (0, styled_1.styled)(Typography_1.Typography) `
     display: none;
   }
 `;
+exports.FieldRow = styled_1.styled.div `
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(5)};
+  align-items: flex-start;
+`;
+exports.FieldContainer = styled_1.styled.div `
+  flex: 1;
+
+  min-width: 0;
+`;
+exports.Actions = styled_1.styled.div `
+  display: flex;
+  flex-shrink: 0;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
 exports.FormFooter = styled_1.styled.footer `
   display: flex;
   gap: ${({ theme }) => theme.spacing(3)};
   justify-content: end;
 
-  ${({ theme }) => theme.breakpoints.down('mobile')} {
-    padding-top: ${({ theme }) => theme.spacing(4)};
+  padding-top: ${({ theme }) => theme.spacing(4)};
 
-    & .${Button_1.buttonClasses.root} {
-      width: 100%;
-      height: 48px;
-    }
-  }
-`;
-exports.CancelButton = (0, styled_1.styled)(Button_1.Button) `
-  ${({ theme }) => theme.breakpoints.down('mobile')} {
-    display: none;
+  & .${Button_1.buttonClasses.root} {
+    width: 100%;
+    height: 48px;
   }
 `;

package/node/hook-form/EditableText/EditingForm/useLogic/useLogic.d.ts

@@ -7,5 +7,6 @@ export declare const useLogic: <TValue>({ initialValue, children, validate, onCl
         form: import("react-hook-form").UseFormReturn<FormValues, any>;
         onSubmit: (e?: import("react").BaseSyntheticEvent<object, any, any> | undefined) => Promise<void | undefined>;
     };
+    isMobile: boolean;
 };
 export {};

package/node/hook-form/EditableText/EditingForm/useLogic/useLogic.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
+const useViewportType_1 = require("../../../../components/useViewportType");
 const useForm_1 = require("../../../useForm");
 const constants_1 = require("../../constants");
 const useLogic = ({ initialValue, children, validate, onClose, onSubmit, }) => {
@@ -48,11 +49,13 @@ const useLogic = ({ initialValue, children, validate, onClose, onSubmit, }) => {
             return onSubmit(fieldValue);
         }
     };
+    const { isMobile } = (0, useViewportType_1.useViewportType)();
     return {
         formProps: {
             form,
             onSubmit: form.handleSubmit(handleSubmit),
         },
+        isMobile,
     };
 };
 exports.useLogic = useLogic;

package/node/hook-form/EditableText/FormIconSubmitButton/FormIconSubmitButton.d.ts

@@ -0,0 +1,3 @@
+import { type IconButtonProps } from '../../../components/IconButton';
+export type FormIconSubmitButtonProps = Omit<IconButtonProps, 'type'>;
+export declare const FormIconSubmitButton: ({ children, loading, ...props }: FormIconSubmitButtonProps) => import("react/jsx-runtime").JSX.Element;

package/node/hook-form/EditableText/FormIconSubmitButton/FormIconSubmitButton.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormIconSubmitButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const IconButton_1 = require("../../../components/IconButton");
+const useFormContext_1 = require("../../useFormContext");
+const FormIconSubmitButton = ({ children, loading, ...props }) => {
+    const { formState } = (0, useFormContext_1.useFormContext)();
+    return ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { type: "submit", loading: loading || formState?.isSubmitting, ...props, children: children }));
+};
+exports.FormIconSubmitButton = FormIconSubmitButton;

package/node/hook-form/EditableText/FormIconSubmitButton/index.d.ts

@@ -0,0 +1 @@
+export * from './FormIconSubmitButton';

package/node/hook-form/EditableText/FormIconSubmitButton/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./FormIconSubmitButton"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.115.1",
+  "version": "4.116.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {