@astral/ui 4.115.1 → 4.116.1

package/components/AsyncAutocomplete/useLogic/useLogic.d.ts

@@ -306,6 +306,7 @@ export declare const useLogic: <TOptions, TMultiple extends boolean, TDisableCle
         } | undefined;
         disabledItemsFocusable?: boolean | undefined;
         disableListWrap?: boolean | undefined;
+        placement?: import("../../Autocomplete/types").AutocompletePlacement | undefined;
         PopperComponent?: import("react").JSXElementConstructor<import("@mui/material").PopperProps> | undefined;
         autoComplete?: boolean | undefined;
         multiple?: TMultiple | undefined;

package/components/Autocomplete/Autocomplete.d.ts

@@ -19,4 +19,5 @@ export declare const Autocomplete: <TAutocompleteValueProps, TMultiple extends b
     clearText?: string | undefined;
     hideHelperText?: boolean | undefined;
     focusedHelperText?: string | undefined;
+    placement?: import("./types").AutocompletePlacement | undefined;
 } & import("react").RefAttributes<unknown>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;

package/components/Autocomplete/Autocomplete.js

@@ -19,7 +19,7 @@ import { checkIsFocusedHelperOption } from './utils';
 const AutocompleteInner = (props, ref) => {
     const { isValueEmpty, isPopperVisible, autocompleteProps } = useLogic(props);
     const inputBaseRef = useRef(null);
-    const { required, success, error, label, getOptionLabel, helperText, inputRef, multiple, size = 'medium', placeholder = DEFAULT_PLACEHOLDER, overflowOption, closeText = 'Закрыть', openText = 'Открыть', clearText = 'Очистить', loadingText = _jsx(Loader, {}), isLoadedDataError, loadedDataError, noOptionsText, autoHighlight, renderInput: externalRenderInput, renderTags: externalRenderTags, renderOption: externalRenderOption, inputProps, hideHelperText = false, focusedHelperText, loading, value, onChange, ...restProps } = props;
+    const { required, success, error, label, getOptionLabel, helperText, inputRef, multiple, size = 'medium', placeholder = DEFAULT_PLACEHOLDER, overflowOption, closeText = 'Закрыть', openText = 'Открыть', clearText = 'Очистить', loadingText = _jsx(Loader, {}), isLoadedDataError, loadedDataError, noOptionsText, autoHighlight, renderInput: externalRenderInput, renderTags: externalRenderTags, renderOption: externalRenderOption, inputProps, hideHelperText = false, focusedHelperText, loading, value, onChange, placement = 'bottom', ...restProps } = props;
     const renderInput = useCallback((inputParams) => {
         const createStartAdornment = () => {
             if (!multiple || !Array.isArray(value)) {
@@ -120,6 +120,7 @@ const AutocompleteInner = (props, ref) => {
     return (_jsx(StyledAutocomplete, { ...restProps, ref: ref, size: size, clearText: clearText, closeText: !loading ? closeText : '', openText: !loading ? openText : '', loadingText: loadingText, multiple: multiple, disableCloseOnSelect: multiple, clearIcon: _jsx(CrossOutlineMd, {}), loading: loading, popupIcon: loading ? _jsx(Loader, { color: "primary", size: "small" }) : _jsx(DownOutlineMd, {}), forcePopupIcon: true, slotProps: {
             popper: {
                 component: renderPopper,
+                placement,
             },
         }, renderInput: renderInput, renderTags: renderTags, renderOption: renderOption, value: value, ...autocompleteProps }));
 };

package/components/Autocomplete/public.d.ts

@@ -1,2 +1,2 @@
 export * from './Autocomplete';
-export type { AutocompleteProps, AutocompleteRenderGetTagProps, AutocompleteSize, } from './types';
+export type { AutocompletePlacement, AutocompleteProps, AutocompleteRenderGetTagProps, AutocompleteSize, } from './types';

package/components/Autocomplete/types.d.ts

@@ -6,6 +6,10 @@ import type { WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
 export type { AutocompleteOwnerState, AutocompleteProps as MuiAutocompleteProps, AutocompleteRenderGetTagProps, AutocompleteRenderInputParams, AutocompleteRenderOptionState, } from '@mui/material/Autocomplete';
 export type { PopperProps } from '@mui/material/Popper';
 export type AutocompleteSize = 'small' | 'medium';
+/**
+ * Направление открытия списка относительно поля
+ */
+export type AutocompletePlacement = 'bottom' | 'top';
 export type AutocompleteProps<TAutocompleteValueProps, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean> = Omit<WithoutEmotionSpecific<MuiAutocompleteProps<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo>>, 'size' | 'renderInput' | 'noOptionsText' | 'closeText' | 'openText' | 'clearText'> & Pick<TextFieldProps, 'error' | 'success' | 'helperText' | 'label' | 'required' | 'inputRef' | 'placeholder' | 'inputProps'> & {
     renderInput?: (props: TextFieldProps & Omit<AutocompleteRenderInputParams, 'size'>) => ReactNode;
     size?: AutocompleteSize;
@@ -52,4 +56,8 @@ export type AutocompleteProps<TAutocompleteValueProps, TMultiple extends boolean
      * Текст подсказки в popover при фокусе
      */
     focusedHelperText?: string;
+    /**
+     * Направление открытия списка относительно поля.
+     */
+    placement?: AutocompletePlacement;
 };

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/components/AsyncAutocomplete/useLogic/useLogic.d.ts

@@ -306,6 +306,7 @@ export declare const useLogic: <TOptions, TMultiple extends boolean, TDisableCle
         } | undefined;
         disabledItemsFocusable?: boolean | undefined;
         disableListWrap?: boolean | undefined;
+        placement?: import("../../Autocomplete/types").AutocompletePlacement | undefined;
         PopperComponent?: import("react").JSXElementConstructor<import("@mui/material").PopperProps> | undefined;
         autoComplete?: boolean | undefined;
         multiple?: TMultiple | undefined;

package/node/components/Autocomplete/Autocomplete.d.ts

@@ -19,4 +19,5 @@ export declare const Autocomplete: <TAutocompleteValueProps, TMultiple extends b
     clearText?: string | undefined;
     hideHelperText?: boolean | undefined;
     focusedHelperText?: string | undefined;
+    placement?: import("./types").AutocompletePlacement | undefined;
 } & import("react").RefAttributes<unknown>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;

package/node/components/Autocomplete/Autocomplete.js

@@ -25,7 +25,7 @@ const utils_1 = require("./utils");
 const AutocompleteInner = (props, ref) => {
     const { isValueEmpty, isPopperVisible, autocompleteProps } = (0, useLogic_1.useLogic)(props);
     const inputBaseRef = (0, react_1.useRef)(null);
-    const { required, success, error, label, getOptionLabel, helperText, inputRef, multiple, size = 'medium', placeholder = constants_1.DEFAULT_PLACEHOLDER, overflowOption, closeText = 'Закрыть', openText = 'Открыть', clearText = 'Очистить', loadingText = (0, jsx_runtime_1.jsx)(Loader_1.Loader, {}), isLoadedDataError, loadedDataError, noOptionsText, autoHighlight, renderInput: externalRenderInput, renderTags: externalRenderTags, renderOption: externalRenderOption, inputProps, hideHelperText = false, focusedHelperText, loading, value, onChange, ...restProps } = props;
+    const { required, success, error, label, getOptionLabel, helperText, inputRef, multiple, size = 'medium', placeholder = constants_1.DEFAULT_PLACEHOLDER, overflowOption, closeText = 'Закрыть', openText = 'Открыть', clearText = 'Очистить', loadingText = (0, jsx_runtime_1.jsx)(Loader_1.Loader, {}), isLoadedDataError, loadedDataError, noOptionsText, autoHighlight, renderInput: externalRenderInput, renderTags: externalRenderTags, renderOption: externalRenderOption, inputProps, hideHelperText = false, focusedHelperText, loading, value, onChange, placement = 'bottom', ...restProps } = props;
     const renderInput = (0, react_1.useCallback)((inputParams) => {
         const createStartAdornment = () => {
             if (!multiple || !Array.isArray(value)) {
@@ -126,6 +126,7 @@ const AutocompleteInner = (props, ref) => {
     return ((0, jsx_runtime_1.jsx)(styles_1.StyledAutocomplete, { ...restProps, ref: ref, size: size, clearText: clearText, closeText: !loading ? closeText : '', openText: !loading ? openText : '', loadingText: loadingText, multiple: multiple, disableCloseOnSelect: multiple, clearIcon: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}), loading: loading, popupIcon: loading ? (0, jsx_runtime_1.jsx)(Loader_1.Loader, { color: "primary", size: "small" }) : (0, jsx_runtime_1.jsx)(DownOutlineMd_1.DownOutlineMd, {}), forcePopupIcon: true, slotProps: {
             popper: {
                 component: renderPopper,
+                placement,
             },
         }, renderInput: renderInput, renderTags: renderTags, renderOption: renderOption, value: value, ...autocompleteProps }));
 };

package/node/components/Autocomplete/public.d.ts

@@ -1,2 +1,2 @@
 export * from './Autocomplete';
-export type { AutocompleteProps, AutocompleteRenderGetTagProps, AutocompleteSize, } from './types';
+export type { AutocompletePlacement, AutocompleteProps, AutocompleteRenderGetTagProps, AutocompleteSize, } from './types';

package/node/components/Autocomplete/types.d.ts

@@ -6,6 +6,10 @@ import type { WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
 export type { AutocompleteOwnerState, AutocompleteProps as MuiAutocompleteProps, AutocompleteRenderGetTagProps, AutocompleteRenderInputParams, AutocompleteRenderOptionState, } from '@mui/material/Autocomplete';
 export type { PopperProps } from '@mui/material/Popper';
 export type AutocompleteSize = 'small' | 'medium';
+/**
+ * Направление открытия списка относительно поля
+ */
+export type AutocompletePlacement = 'bottom' | 'top';
 export type AutocompleteProps<TAutocompleteValueProps, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean> = Omit<WithoutEmotionSpecific<MuiAutocompleteProps<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo>>, 'size' | 'renderInput' | 'noOptionsText' | 'closeText' | 'openText' | 'clearText'> & Pick<TextFieldProps, 'error' | 'success' | 'helperText' | 'label' | 'required' | 'inputRef' | 'placeholder' | 'inputProps'> & {
     renderInput?: (props: TextFieldProps & Omit<AutocompleteRenderInputParams, 'size'>) => ReactNode;
     size?: AutocompleteSize;
@@ -52,4 +56,8 @@ export type AutocompleteProps<TAutocompleteValueProps, TMultiple extends boolean
      * Текст подсказки в popover при фокусе
      */
     focusedHelperText?: string;
+    /**
+     * Направление открытия списка относительно поля.
+     */
+    placement?: AutocompletePlacement;
 };

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.1",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {