@astral/ui 4.18.0-rc.1 → 4.18.0

package/node/hook-form/Form/Form.d.ts

@@ -49,4 +49,4 @@ export type FormProps<TFormValues extends object> = FormHTMLAttributes<HTMLFormE
  * }
  * ```
  */
-export declare const Form: <TFormValues extends object>({ form, children, isDisabled, ...props }: FormProps<TFormValues>) => JSX.Element;
+export declare const Form: <TFormValues extends object>({ form, children, isDisabled, ...props }: FormProps<TFormValues>) => import("react/jsx-runtime").JSX.Element;

package/node/hook-form/Form/Form.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Form = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../components/utils");
 const FormProvider_1 = require("../FormProvider");
 const styles_1 = require("./styles");
 /**
@@ -25,6 +26,6 @@ const styles_1 = require("./styles");
  */
 const Form = ({ form, children, isDisabled = false, ...props }) => {
     const { isSubmitting } = form?.formState || {};
-    return ((0, jsx_runtime_1.jsx)(FormProvider_1.FormProvider, { ...form, children: (0, jsx_runtime_1.jsxs)(styles_1.StyledForm, { inert: isDisabled || isSubmitting ? '' : undefined, noValidate: true, ...props, children: [(isDisabled || isSubmitting) && (0, jsx_runtime_1.jsx)(styles_1.Backdrop, {}), children] }) }));
+    return ((0, jsx_runtime_1.jsx)(FormProvider_1.FormProvider, { ...form, children: (0, jsx_runtime_1.jsxs)(styles_1.StyledForm, { ...(0, utils_1.getInertProps)(isDisabled || isSubmitting), noValidate: true, ...props, children: [(isDisabled || isSubmitting) && (0, jsx_runtime_1.jsx)(styles_1.Backdrop, {}), children] }) }));
 };
 exports.Form = Form;

package/node/hook-form/Form/styles.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-export declare const Backdrop: import("@emotion/styled").StyledComponent<{
+export declare const Backdrop: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledForm: import("@emotion/styled").StyledComponent<{
+export declare const StyledForm: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, {}>;

package/node/hook-form/Form/styles.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledForm = exports.Backdrop = void 0;
-const styles_1 = require("../../components/styles");
-exports.Backdrop = styles_1.styled.div `
+const styled_1 = require("../../components/styled");
+exports.Backdrop = styled_1.styled.div `
   position: absolute;
   z-index: ${({ theme }) => theme.zIndex.mobileStepper};
   inset: 0;
@@ -10,6 +10,6 @@ exports.Backdrop = styles_1.styled.div `
   opacity: 0.5;
   background-color: ${({ theme }) => theme.palette.background.element};
 `;
-exports.StyledForm = styles_1.styled.form `
+exports.StyledForm = styled_1.styled.form `
   position: relative;
 `;

package/node/hook-form/FormAddressAutocomplete/FormAddressAutocomplete.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type AddressAutocompleteProps, type AddressAutocompleteValue } from '../../components/AddressAutocomplete';
 import type { WithFormFieldProps } from '../types';
 type Address = {
@@ -6,5 +5,5 @@ type Address = {
 };
 export type FormAddressAutocompleteProps<TFieldValues extends object, TOption extends Address = never> = WithFormFieldProps<Omit<AddressAutocompleteProps<TOption>, 'value' | 'onChange'>, TFieldValues>;
 export type FormAddressAutocompleteValue<TOption extends AddressAutocompleteValue = AddressAutocompleteValue> = TOption;
-export declare const FormAddressAutocomplete: <TFieldValues extends object, TOption extends Address = import("../../components/AddressAutocomplete/AddressAutocomplete").Address>(props: FormAddressAutocompleteProps<TFieldValues, TOption>) => JSX.Element;
+export declare const FormAddressAutocomplete: <TFieldValues extends object, TOption extends Address = import("../../components/AddressAutocomplete/AddressAutocomplete").Address>(props: FormAddressAutocompleteProps<TFieldValues, TOption>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/node/hook-form/FormAsyncAutocomplete/FormAsyncAutocomplete.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 import { type AsyncAutocompleteProps } from '../../components/AsyncAutocomplete';
 import { type WithFormFieldProps } from '../types';
 export type FormAsyncAutocompleteProps<TFieldValues extends object, TOption, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean> = WithFormFieldProps<Omit<AsyncAutocompleteProps<TOption, TMultiple, TDisableClearable, TFreeSolo>, 'value' | 'onChange'>, TFieldValues>;
-export declare const FormAsyncAutocomplete: <TFieldValues extends object, TOption, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean>(props: FormAsyncAutocompleteProps<TFieldValues, TOption, TMultiple, TDisableClearable, TFreeSolo>) => JSX.Element;
+export declare const FormAsyncAutocomplete: <TFieldValues extends object, TOption, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean>(props: FormAsyncAutocompleteProps<TFieldValues, TOption, TMultiple, TDisableClearable, TFreeSolo>) => import("react/jsx-runtime").JSX.Element;

package/node/hook-form/FormAutocomplete/FormAutocomplete.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { type AutocompleteProps } from '../../components/Autocomplete';
 import { type WithFormFieldProps } from '../types';
 export type FormAutocompleteProps<TFieldValues extends object, TOption, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean> = WithFormFieldProps<Omit<AutocompleteProps<TOption, TMultiple, TDisableClearable, TFreeSolo>, 'value' | 'onChange'>, TFieldValues>;
 /**
  * Адаптер для Select
  */
-export declare const FormAutocomplete: <TFieldValues extends object, TOption, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean>(props: FormAutocompleteProps<TFieldValues, TOption, TMultiple, TDisableClearable, TFreeSolo>) => JSX.Element;
+export declare const FormAutocomplete: <TFieldValues extends object, TOption, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean>(props: FormAutocompleteProps<TFieldValues, TOption, TMultiple, TDisableClearable, TFreeSolo>) => import("react/jsx-runtime").JSX.Element;

package/node/hook-form/FormCheckboxField/FormCheckboxField.d.ts

@@ -18,4 +18,4 @@ export declare const FormCheckboxField: <TFieldValues extends object>(props: Omi
     hideHelperText?: boolean | undefined;
     title?: ReactNode;
     required?: boolean | undefined;
-} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;

package/node/hook-form/FormCheckboxField/FormCheckboxField.js

@@ -11,7 +11,8 @@ const hooks_1 = require("../hooks");
 const FormCheckboxFieldInner = ({ success, hideHelperText = false, ...restProps }, ref) => {
     const { title = '', value, error, ...restFieldProps } = (0, hooks_1.useFormFieldProps)({
         ...restProps,
-        defaultValue: restProps.defaultValue || null,
+        defaultValue: restProps.defaultValue ||
+            null,
     });
     return ((0, jsx_runtime_1.jsx)(CheckboxField_1.CheckboxField, { label: title, checked: Boolean(value), hideHelperText: hideHelperText, isSuccess: success, isError: error, ...restFieldProps, ref: ref }));
 };

package/node/hook-form/FormCodeField/FormCodeField.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { type CodeFieldProps } from '../../components/CodeField';
 import { type WithFormFieldProps } from '../types';
 export type FormCodeFieldProps<TFieldValues extends object> = WithFormFieldProps<CodeFieldProps, TFieldValues>;
 /**
  * Адаптер для CodeField
  */
-export declare const FormCodeField: <TFieldValues extends object>(props: FormCodeFieldProps<TFieldValues>) => JSX.Element;
+export declare const FormCodeField: <TFieldValues extends object>(props: FormCodeFieldProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;

package/node/hook-form/FormController/index.d.ts

@@ -0,0 +1 @@
+export { Controller as FormController, type ControllerProps as FormControllerProps, type UseControllerProps as UseFormControllerProps, } from 'react-hook-form';

package/node/hook-form/FormController/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormController = void 0;
+var react_hook_form_1 = require("react-hook-form");
+Object.defineProperty(exports, "FormController", { enumerable: true, get: function () { return react_hook_form_1.Controller; } });

package/node/hook-form/FormController/public.d.ts

@@ -0,0 +1 @@
+export { Controller as FormController, type ControllerProps as FormControllerProps, type UseControllerProps as UseFormControllerProps, } from 'react-hook-form';

package/node/hook-form/FormController/public.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormController = void 0;
+var react_hook_form_1 = require("react-hook-form");
+Object.defineProperty(exports, "FormController", { enumerable: true, get: function () { return react_hook_form_1.Controller; } });

package/node/hook-form/FormDatePicker/FormDatePicker.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type DatePickerProps } from '../../components/DatePicker';
 import { type WithFormFieldProps } from '../types';
 /**
@@ -9,4 +8,4 @@ export type FormDatePickerProps<TFieldValues extends object> = WithFormFieldProp
 /**
  * DatePicker для формы. Инкапсулирует дефолтную валидацию на валидность даты
  */
-export declare const FormDatePicker: <TFieldValues extends object>({ ...props }: FormDatePickerProps<TFieldValues>) => JSX.Element;
+export declare const FormDatePicker: <TFieldValues extends object>({ ...props }: FormDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;

package/node/hook-form/FormDateRangePicker/FormDateRangePicker.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type DateItemProps, type DateRangePickerProps, type DateRangePickerValue } from '../../components/DateRangePicker';
 import { type WithFormFieldProps } from '../types';
 /**
@@ -12,4 +11,4 @@ export type FormDateRangePickerProps<TFieldValues extends object> = WithFormFiel
 /**
  * DateRangePicker для формы. Инкапсулирует дефолтную валидацию на валидность даты
  */
-export declare const FormDateRangePicker: <TFieldValues extends object>({ startDateProps, endDateProps, ...props }: FormDateRangePickerProps<TFieldValues>) => JSX.Element;
+export declare const FormDateRangePicker: <TFieldValues extends object>({ startDateProps, endDateProps, ...props }: FormDateRangePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;

package/node/hook-form/FormEmailField/FormEmailField.d.ts

@@ -2,4 +2,4 @@
 import { type EmailFieldProps } from '../../components/EmailField';
 import { type WithFormFieldProps } from '../types';
 export type FormEmailFieldProps<TFieldValues extends object> = WithFormFieldProps<EmailFieldProps, TFieldValues>;
-export declare const FormEmailField: <T extends object>(props: Omit<EmailFieldProps, "error" | "name"> & Omit<import("react-hook-form").UseControllerProps<T>, "rules"> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export declare const FormEmailField: <T extends object>(props: Omit<EmailFieldProps, "error" | "name"> & Omit<import("react-hook-form").UseControllerProps<T>, "rules"> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;

package/node/hook-form/FormEmailOrPhoneField/FormEmailOrPhoneField.d.ts

@@ -2,4 +2,4 @@
 import { type EmailOrPhoneFieldProps } from '../../components/EmailOrPhoneField';
 import { type WithFormFieldProps } from '../types';
 export type FormEmailOrPhoneFieldProps<TFieldValues extends object> = WithFormFieldProps<Omit<EmailOrPhoneFieldProps, 'value' | 'onChange'>, TFieldValues>;
-export declare const FormEmailOrPhoneField: <T extends object>(props: Omit<Omit<EmailOrPhoneFieldProps, "onChange" | "value">, "error" | "name"> & Omit<import("react-hook-form").UseControllerProps<T>, "rules"> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export declare const FormEmailOrPhoneField: <T extends object>(props: Omit<Omit<EmailOrPhoneFieldProps, "onChange" | "value">, "error" | "name"> & Omit<import("react-hook-form").UseControllerProps<T>, "rules"> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;

package/node/hook-form/FormFileUploader/FormFileUploader.d.ts

@@ -29,5 +29,5 @@ type FormSingleFileUploaderProps<TFieldValues extends object> = WithFormFieldPro
 type FormMultipleFileUploaderProps<TFieldValues extends object> = WithFormFieldProps<MultipleFileUploaderProps, TFieldValues>;
 export type FormFileUploaderProps<TFieldValues extends object> = FormSingleFileUploaderProps<TFieldValues> | FormMultipleFileUploaderProps<TFieldValues>;
 export type FormFileUploaderValue = UploadFile;
-export declare const FormFileUploader: <TFieldValues extends object>(props: FormFileUploaderProps<TFieldValues> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export declare const FormFileUploader: <TFieldValues extends object>(props: FormFileUploaderProps<TFieldValues> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
 export {};

package/node/hook-form/FormMaskField/FormMaskField.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { type MaskFieldProps } from '../../components/MaskField';
 import { type WithFormFieldProps } from '../types';
 export type FormMaskFieldProps<TFieldValues extends object> = WithFormFieldProps<MaskFieldProps, TFieldValues>;
 /**
  * Адаптер для MaskField
  */
-export declare const FormMaskField: <TFieldValues extends object>(props: FormMaskFieldProps<TFieldValues>) => JSX.Element;
+export declare const FormMaskField: <TFieldValues extends object>(props: FormMaskFieldProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;

package/node/hook-form/FormMobilePhoneField/FormMobilePhoneField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type MaskFieldProps } from '../../components/MaskField';
 import { type WithFormFieldProps } from '../types';
 export type FormMobilePhoneFieldProps<TFieldValues extends object> = WithFormFieldProps<Omit<MaskFieldProps, 'mask'>, TFieldValues> & {
@@ -10,4 +9,4 @@ export type FormMobilePhoneFieldProps<TFieldValues extends object> = WithFormFie
 /**
  * Поле для ввода личного мобильного номера телефона, начинающего на 79
  */
-export declare const FormMobilePhoneField: <TFieldValues extends object>({ isHidePersonalData, inputProps, ...props }: FormMobilePhoneFieldProps<TFieldValues>) => JSX.Element;
+export declare const FormMobilePhoneField: <TFieldValues extends object>({ isHidePersonalData, inputProps, ...props }: FormMobilePhoneFieldProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;

package/node/hook-form/FormNumberField/FormNumberField.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { type NumberFieldProps } from '../../components/NumberField';
 import { type WithFormFieldProps } from '../types';
 export type FormNumberFieldProps<TFieldValues extends object> = WithFormFieldProps<NumberFieldProps, TFieldValues>;
 /**
  * Адаптер для MaskField
  */
-export declare const FormNumberField: <TFieldValues extends object>(props: FormNumberFieldProps<TFieldValues>) => JSX.Element;
+export declare const FormNumberField: <TFieldValues extends object>(props: FormNumberFieldProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;

package/node/hook-form/FormPageFooterContainer/FormPageFooterContainer.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+export type FormPageFooterContainerProps = {
+    /**
+     * Дополнительное содержимое футера
+     */
+    children?: ReactNode;
+};
+/**
+ * Компонент не предназначен для экспорта из пакета. Используется внутри FormPageLayout и FormWizardPageLayout
+ */
+export declare const FormPageFooterContainer: (props: FormPageFooterContainerProps) => import("react/jsx-runtime").JSX.Element;

package/node/hook-form/FormPageFooterContainer/styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const StyledPageLayoutFooter: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../components/PageLayoutFooter").PageLayoutFooterProps & import("react").RefAttributes<HTMLElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/node/hook-form/FormPageFooterContainer/styles.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledPageLayoutFooter = void 0;
+const PageLayoutFooter_1 = require("../../components/PageLayoutFooter");
+const styled_1 = require("../../components/styled");
+const FormPageLayoutBase_1 = require("../FormPageLayoutBase");
+const constants_1 = require("./constants");
+exports.StyledPageLayoutFooter = (0, styled_1.styled)(PageLayoutFooter_1.PageLayoutFooter) `
+  position: sticky;
+  z-index: ${({ theme }) => theme.zIndex.speedDial};
+
+  border-top: unset;
+
+  &.${FormPageLayoutBase_1.formPageLayoutClassnames.footerShadow} {
+    bottom: 0;
+
+    box-shadow: ${({ theme }) => theme.elevation.up[100]};
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    align-items: unset;
+
+    width: 100%;
+    height: unset;
+    max-height: calc(100% - ${constants_1.HEADER_HEIGHT});
+    padding: 0;
+
+    border-top-left-radius: ${({ theme }) => theme.shape.large};
+    border-top-right-radius: ${({ theme }) => theme.shape.large};
+    box-shadow: ${({ theme }) => theme.elevation.up[100]};
+  }
+`;

package/node/hook-form/FormPageFooterContainer/useLogic/useLogic.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const useLogic: () => {
+    footerRef: import("react").RefObject<HTMLElement | null>;
+};

package/node/hook-form/FormPageFooterContainer/useLogic/useLogic.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const PageContent_1 = require("../../../components/PageContent");
+const FormPageLayoutBase_1 = require("../../FormPageLayoutBase");
+const useLogic = () => {
+    const footerRef = (0, react_1.useRef)(null);
+    const updateStickyState = (0, react_1.useCallback)((container) => {
+        if (!footerRef?.current) {
+            return;
+        }
+        if (!container || !container.parentElement) {
+            return;
+        }
+        if (container.scrollHeight > container.parentElement.clientHeight) {
+            return footerRef.current.classList.add(FormPageLayoutBase_1.formPageLayoutClassnames.footerShadow);
+        }
+        footerRef.current.classList.remove(FormPageLayoutBase_1.formPageLayoutClassnames.footerShadow);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const container = document.querySelector(`.${PageContent_1.pageContentClassnames.content}`);
+        const rootContainer = document.querySelector(`.${PageContent_1.pageContentClassnames.pageContent}`);
+        updateStickyState(container);
+        if (!container) {
+            return;
+        }
+        // ResizeObserver следит за изменением размеров контейнера
+        const resizeObserver = new ResizeObserver(() => updateStickyState(container));
+        resizeObserver.observe(container);
+        if (rootContainer) {
+            resizeObserver.observe(rootContainer);
+        }
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [updateStickyState]);
+    return { footerRef };
+};
+exports.useLogic = useLogic;

package/node/hook-form/FormPageLayout/FormPageFooter/FormPageFooter.d.ts

@@ -0,0 +1,17 @@
+import type { SecondaryAction } from '../../FormPageLayoutBase';
+export type FormFooterProps = {
+    /**
+     * Если true, кнопки будут недоступны для взаимодействия
+     */
+    isDisabled?: boolean;
+    /**
+     * Дополнительные кнопки формы
+     */
+    secondaryActions?: SecondaryAction[];
+    /**
+     * Текст для кнопки отправки формы
+     * @default 'Отправить'
+     */
+    submitButtonText?: string;
+};
+export declare const FormPageFooter: (props: FormFooterProps) => import("react/jsx-runtime").JSX.Element;

package/node/hook-form/FormPageLayout/FormPageFooter/SecondaryActions/SecondaryActions.d.ts

@@ -0,0 +1,20 @@
+import type { SecondaryAction } from '../../../FormPageLayoutBase';
+export type SecondaryActionsProps = {
+    /**
+     * Если true, кнопки будут недоступны для взаимодействия
+     */
+    isDisabled?: boolean;
+    /**
+     * Массив вторичных действий для отображения
+     */
+    actions: SecondaryAction[];
+    /**
+     * Состояние для Collapse
+     */
+    isActive: boolean;
+    /**
+     * Отключает отступ у действий скрытых
+     */
+    isDisablePadding?: boolean;
+};
+export declare const SecondaryActions: (props: SecondaryActionsProps) => import("react/jsx-runtime").JSX.Element;

package/node/hook-form/FormPageLayout/FormPageFooter/SecondaryActions/SecondaryActions.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SecondaryActions = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Collapse_1 = require("../../../../components/Collapse");
+const Tooltip_1 = require("../../../../components/Tooltip");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+const SecondaryActions = (props) => {
+    const { isDisabled, actions, isActive, isDisablePadding = false } = props;
+    const { isShowCollapseActions } = (0, useLogic_1.useLogic)(props);
+    const renderMobileButton = ({ text, disabled, isBlockingOperation, ...restButtonProps }) => ((0, jsx_runtime_1.jsx)(styles_1.StyledMobileButton, { disabled: isDisabled || disabled, variant: "outlined", color: "grey", ...restButtonProps, children: text }, text));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles_1.MobileActionWrapper, { children: isShowCollapseActions ? ((0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: isActive, children: (0, jsx_runtime_1.jsx)(styles_1.ActionWrapper, { "$isDisablePadding": isDisablePadding, children: actions.map(renderMobileButton) }) })) : ((0, jsx_runtime_1.jsx)(styles_1.ActionWrapper, { "$isDisablePadding": isDisablePadding, children: renderMobileButton(actions[0]) })) }), (0, jsx_runtime_1.jsx)(styles_1.DesktopActionWrapper, { children: actions?.map((action) => {
+                    const { text, disabled, disabledReason, loading, isBlockingOperation, ...restActionProps } = action;
+                    return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: disabled && disabledReason, withoutContainer: !(isDisabled || disabled), children: (0, jsx_runtime_1.jsx)(styles_1.StyledButton, { disabled: isDisabled || disabled, loading: loading, size: "large", color: "grey", variant: "outlined", ...restActionProps, children: text }) }, text));
+                }) })] }));
+};
+exports.SecondaryActions = SecondaryActions;

package/node/hook-form/FormPageLayout/FormPageFooter/SecondaryActions/styles.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+export declare const StyledButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "variant" | "component" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+    variant?: "light" | "link" | "outlined" | "text" | "contained" | undefined;
+    loading?: boolean | undefined;
+    color?: "grey" | "error" | "success" | "warning" | "primary" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const StyledMobileButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "variant" | "component" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+    variant?: "light" | "link" | "outlined" | "text" | "contained" | undefined;
+    loading?: boolean | undefined;
+    color?: "grey" | "error" | "success" | "warning" | "primary" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const ActionWrapper: 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;
+} & {
+    $isDisablePadding?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DesktopActionWrapper: 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 MobileActionWrapper: 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>, {}>;

package/node/hook-form/FormPageLayout/FormPageFooter/SecondaryActions/styles.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileActionWrapper = exports.DesktopActionWrapper = exports.ActionWrapper = exports.StyledMobileButton = exports.StyledButton = void 0;
+const Button_1 = require("../../../../components/Button");
+const styled_1 = require("../../../../components/styled");
+exports.StyledButton = (0, styled_1.styled)(Button_1.Button) `
+  flex-grow: 1;
+`;
+exports.StyledMobileButton = (0, styled_1.styled)(Button_1.Button) `
+  display: none;
+
+  width: 100%;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: flex;
+
+    height: 50px;
+  }
+`;
+exports.ActionWrapper = (0, styled_1.styled)('div', {
+    shouldForwardProp: (prop) => !['$isDisablePadding'].includes(prop),
+}) `
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.spacing(2)};
+
+  padding-top: ${({ theme, $isDisablePadding }) => $isDisablePadding ? 0 : theme.spacing(2)};
+`;
+exports.DesktopActionWrapper = styled_1.styled.div `
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(4)}; 
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;
+exports.MobileActionWrapper = styled_1.styled.div `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: block;
+    order: 2;
+  }
+`;

package/node/hook-form/FormPageLayout/FormPageFooter/SecondaryActions/useLogic/index.d.ts

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

package/node/hook-form/FormPageLayout/FormPageFooter/styles.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+export declare const ActionsWrapper: 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;
+} & {
+    $isShowMoreButton?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ShowMoreButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "variant" | "component" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+    variant?: "light" | "link" | "outlined" | "text" | "contained" | undefined;
+    loading?: boolean | undefined;
+    color?: "grey" | "error" | "success" | "warning" | "primary" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    $isActive: boolean;
+}, {}, {}>;
+export declare const StyledFormSubmitButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../FormSubmitButton").FormSubmitButtonProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    $isShowSecondaryActions?: boolean | undefined;
+}, {}, {}>;

package/node/hook-form/FormPageLayout/FormPageFooter/styles.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledFormSubmitButton = exports.ShowMoreButton = exports.ActionsWrapper = void 0;
+const Button_1 = require("../../../components/Button");
+const styled_1 = require("../../../components/styled");
+const FormSubmitButton_1 = require("../../FormSubmitButton");
+exports.ActionsWrapper = (0, styled_1.styled)('div', {
+    shouldForwardProp: (prop) => !['$isShowMoreButton'].includes(prop),
+}) `
+  display: flex;
+  flex-direction: row-reverse;
+  gap: ${({ theme }) => theme.spacing(4)};  
+
+  width: 100%;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    overflow: auto;
+    flex-direction: column;
+    gap: 0;
+
+    padding: ${({ theme, $isShowMoreButton }) => $isShowMoreButton ? theme.spacing(4, 4, 0) : theme.spacing(4)};
+  }
+`;
+exports.ShowMoreButton = (0, styled_1.styled)(Button_1.Button, {
+    shouldForwardProp: (prop) => !['$isActive'].includes(prop),
+}) `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: flex;
+
+    width: 100%;
+    height: 36px;
+    min-height: 36px;
+    margin-top: ${({ theme }) => theme.spacing(2)};
+    margin-bottom: ${({ theme }) => theme.spacing(4)};
+    padding: 0;
+
+    &:hover {
+      background-color: unset;
+    }
+  }
+`;
+exports.StyledFormSubmitButton = (0, styled_1.styled)(FormSubmitButton_1.FormSubmitButton, {
+    shouldForwardProp: (prop) => !['$isShowSecondaryActions'].includes(prop),
+}) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    height: 50px;
+    margin-bottom: ${({ theme, $isShowSecondaryActions }) => $isShowSecondaryActions ? theme.spacing(2) : 0};
+  }
+`;

package/node/hook-form/FormPageLayout/FormPageLayout.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from 'react';
+import { type PageLayoutProps } from '../../components/PageLayout';
+import { type FormProps } from '../Form';
+import type { SecondaryAction } from '../FormPageLayoutBase';
+type FormPageProps<TFormValues extends Record<string, unknown>> = Omit<FormProps<TFormValues>, 'children'> & {
+    /**
+     * Текст для кнопки отправки формы
+     */
+    submitButtonText?: string;
+    /**
+     * Дополнительные кнопки формы
+     */
+    secondaryActions?: SecondaryAction[];
+};
+export type FormPageLayoutProps<TFormValues extends Record<string, unknown>> = Omit<PageLayoutProps, 'content'> & {
+    /**
+     * Содержимое формы
+     */
+    children: ReactNode;
+    /**
+     * Параметры страницы формы
+     */
+    form: FormPageProps<TFormValues>;
+};
+/**
+ * FormPageLayout предназначен для построения страниц с формами.
+ */
+export declare const FormPageLayout: <TFormValues extends Record<string, unknown>>(props: FormPageLayoutProps<TFormValues>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/node/hook-form/FormPageLayout/FormPageLayout.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormPageLayout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../components/utils");
+const Form_1 = require("../Form");
+const FormPageLayoutBase_1 = require("../FormPageLayoutBase");
+const FormPageFooter_1 = require("./FormPageFooter");
+const styles_1 = require("./styles");
+/**
+ * FormPageLayout предназначен для построения страниц с формами.
+ */
+const FormPageLayout = (props) => {
+    const { form, children, ...restProps } = props;
+    const { secondaryActions, submitButtonText, ...restFormProps } = form;
+    return ((0, jsx_runtime_1.jsx)(FormPageLayoutBase_1.FormPageLayoutBase, { ...restProps, formProps: { ...form, secondaryActions }, contentClassname: (0, utils_1.classNames)({
+            [FormPageLayoutBase_1.formPageContentClassnames.formPageContentSecondaryActions]: Boolean(secondaryActions),
+        }), children: ({ isDisabled }) => ((0, jsx_runtime_1.jsxs)(Form_1.Form, { ...restFormProps, isDisabled: isDisabled, children: [(0, jsx_runtime_1.jsx)(styles_1.FormContent, { children: children }), (0, jsx_runtime_1.jsx)(FormPageFooter_1.FormPageFooter, { isDisabled: isDisabled, submitButtonText: submitButtonText, secondaryActions: secondaryActions })] })) }));
+};
+exports.FormPageLayout = FormPageLayout;

package/node/hook-form/FormPageLayout/public.d.ts

@@ -0,0 +1,2 @@
+export { formPageContentClassnames, formPageLayoutClassnames, } from '../FormPageLayoutBase';
+export * from './FormPageLayout';