@astral/ui 4.15.1 → 4.16.1

package/components/DataGrid/Head/styles.js

@@ -9,7 +9,7 @@ export const Wrapper = styled('header', {
   width: fit-content;
   min-width: 100%;
 
-  border-bottom: 2px solid ${({ theme }) => theme.palette.grey[300]};
+  border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
 `;
 export const CheckboxCell = styled.div `
   display: flex;

package/components/PageLayout/PageContent/PageContent.d.ts

@@ -1,34 +1,3 @@
-import { type ReactNode, type RefObject } from 'react';
-import { type PageLayoutFooterProps } from '../PageLayoutFooter';
-export type PageContentProps = {
-    children: ReactNode;
-    /**
-     * Флаг, растягивающий контейнер на 100% высоты
-     * @deprecated Не поддерживается, контейнер всегда растянут на 100% независимо от флага
-     */
-    isFullHeight?: boolean;
-    /**
-     * Название класса, применяется к корневому компоненту
-     */
-    className?: string;
-    /**
-     * Конфигурация PageLayoutFooter
-     * @example <PageLayout footer={{
-     *  children: 'Нижняя панель страницы',
-     * }} />
-     */
-    footer?: PageLayoutFooterProps | ReactNode;
-    /**
-     * Если true, убирает отступы для Content
-     */
-    isFormPaddingDisable?: boolean;
-    /**
-     * Ref на скролл контейнер
-     */
-    scrollRef?: RefObject<HTMLDivElement>;
-    /**
-     * Header контентной части
-     */
-    header?: ReactNode;
-};
+/// <reference types="react" />
+import type { PageContentProps } from './types';
 export declare const PageContent: import("react").ForwardRefExoticComponent<PageContentProps & import("react").RefAttributes<HTMLElement>>;

package/components/PageLayout/PageContent/PageContent.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, isValidElement, useContext, } from 'react';
+import { forwardRef, isValidElement } from 'react';
 import { classNames } from '../../utils';
-import { PageContext } from '../PageContext';
 import { PageLayoutFooter, } from '../PageLayoutFooter';
 import { pageContentClassnames } from './constants';
 import { Content, Wrapper } from './styles';
+import { useLogic } from './useLogic';
 export const PageContent = forwardRef((props, forwardedRef) => {
-    const { hasAside } = useContext(PageContext);
+    const { hasAside, contentClassnames } = useLogic(props);
     const { className, children, isFullHeight = true, footer, scrollRef, header, } = props;
-    return (_jsxs(Wrapper, { className: classNames(className, pageContentClassnames.pageContent), ref: forwardedRef, "$isFullHeight": isFullHeight, "$isSeparatorShown": hasAside || Boolean(header), children: [header && header, _jsx(Content, { ref: scrollRef, className: pageContentClassnames.content, "$hasAside": hasAside || Boolean(header), children: children }), footer && !isValidElement(footer) && (_jsx(PageLayoutFooter, { ...footer })), isValidElement(footer) && footer] }));
+    return (_jsxs(Wrapper, { className: classNames(className, pageContentClassnames.pageContent), ref: forwardedRef, "$isFullHeight": isFullHeight, "$isSeparatorShown": hasAside || Boolean(header), children: [header && header, _jsx(Content, { ref: scrollRef, className: contentClassnames, "$hasAside": hasAside || Boolean(header), children: children }), footer && !isValidElement(footer) && (_jsx(PageLayoutFooter, { ...footer })), isValidElement(footer) && footer] }));
 });

package/components/PageLayout/PageContent/PageContentHeader/PageContentHeaderActions/PageContentHeaderActions.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PageActions } from '../../../PageHeader';
 export const PageContentHeaderActions = (props) => {
-    return _jsx(PageActions, { size: "medium", ...props });
+    return _jsx(PageActions, { size: "medium", spacing: 1, ...props });
 };

package/components/PageLayout/PageContent/PageContentHeader/styles.js

@@ -8,6 +8,14 @@ export const Wrapper = styled.header `
   padding: ${({ theme }) => theme.spacing(4, 6)};
 
   border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+      margin: ${({ theme }) => theme.spacing(0, 4)};
+
+      background-color: ${({ theme }) => theme.palette.background.default};
+      border-top-left-radius: ${({ theme }) => theme.shape.medium};
+      border-top-right-radius: ${({ theme }) => theme.shape.medium};
+  }
 `;
 export const TitleBlock = styled.div `
   overflow: hidden;

package/components/PageLayout/PageContent/constants.d.ts

@@ -1,6 +1,7 @@
 export declare const pageContentClassnames: {
     pageContent: string;
     content: string;
+    contentHasHeader: string;
     animation: string;
 };
 export declare const PAGE_CONTENT_ANIMATION = "white-flash";

package/components/PageLayout/PageContent/constants.js

@@ -2,6 +2,7 @@ import { createUIKitClassname } from '../../utils';
 export const pageContentClassnames = {
     pageContent: createUIKitClassname('page-content'),
     content: createUIKitClassname('page-content__content'),
+    contentHasHeader: createUIKitClassname('page-content__content_has-header'),
     animation: createUIKitClassname('page-content_animation'),
 };
 export const PAGE_CONTENT_ANIMATION = 'white-flash';

package/components/PageLayout/PageContent/index.d.ts

@@ -1,3 +1,4 @@
 export * from './constants';
 export * from './PageContent';
 export * from './PageContentHeader';
+export type { PageContentProps } from './types';

package/components/PageLayout/PageContent/styles.js

@@ -26,7 +26,6 @@ export const Wrapper = styled('article', {
     height: ${({ $isFullHeight }) => ($isFullHeight ? 'auto' : '100%')};
 
     border-top: none;
-    border-radius: ${({ theme }) => theme.shape.medium};
   }
 
   @keyframes ${PAGE_CONTENT_ANIMATION} {
@@ -69,6 +68,12 @@ export const Content = styled.div `
     padding: ${({ theme }) => theme.spacing(4, 4, 3)};
 
     background-color: ${({ theme }) => theme.palette.background.default};
+    border-radius: ${({ theme }) => theme.shape.medium};
+
+    &.${pageContentClassnames.contentHasHeader} {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
   }
 
   &:has(.${pdfViewerClassnames.document}.${pdfViewerClassnames.zoom}) {

package/components/PageLayout/PageContent/types.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode, RefObject } from 'react';
+import type { PageLayoutFooterProps } from '../PageLayoutFooter';
+export type PageContentProps = {
+    children: ReactNode;
+    /**
+     * Флаг, растягивающий контейнер на 100% высоты
+     * @deprecated Не поддерживается, контейнер всегда растянут на 100% независимо от флага
+     */
+    isFullHeight?: boolean;
+    /**
+     * Название класса, применяется к корневому компоненту
+     */
+    className?: string;
+    /**
+     * Конфигурация PageLayoutFooter
+     * @example <PageLayout footer={{
+     *  children: 'Нижняя панель страницы',
+     * }} />
+     */
+    footer?: PageLayoutFooterProps | ReactNode;
+    /**
+     * Если true, убирает отступы для Content
+     */
+    isFormPaddingDisable?: boolean;
+    /**
+     * Ref на скролл контейнер
+     */
+    scrollRef?: RefObject<HTMLDivElement>;
+    /**
+     * Header контентной части
+     */
+    header?: ReactNode;
+};

package/components/PageLayout/PageContent/types.js

@@ -0,0 +1 @@
+export {};

package/components/PageLayout/PageContent/useLogic/index.d.ts

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

package/components/PageLayout/PageContent/useLogic/index.js

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

package/components/PageLayout/PageContent/useLogic/useLogic.d.ts

@@ -0,0 +1,7 @@
+import type { PageContentProps } from '../types';
+type UseLogicParams = PageContentProps;
+export declare const useLogic: ({ header }: UseLogicParams) => {
+    contentClassnames: string;
+    hasAside: boolean;
+};
+export {};

package/components/PageLayout/PageContent/useLogic/useLogic.js

@@ -0,0 +1,11 @@
+import { useContext, useMemo } from 'react';
+import { classNames } from '../../../utils';
+import { PageContext } from '../../PageContext';
+import { pageContentClassnames } from '../constants';
+export const useLogic = ({ header }) => {
+    const { hasAside } = useContext(PageContext);
+    const contentClassnames = useMemo(() => classNames(pageContentClassnames.content, {
+        [pageContentClassnames.contentHasHeader]: Boolean(header),
+    }), [header]);
+    return { contentClassnames, hasAside };
+};

package/components/PageLayout/PageHeader/MobilePageActions/styles.d.ts

@@ -53,6 +53,7 @@ export declare const StyledMainActions: import("@emotion/styled").StyledComponen
     actions?: import("../../..").MainAction<import("react").ElementType>[] | undefined;
     className?: string | undefined;
     size: "medium" | "large";
+    spacing?: number | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {

package/components/PageLayout/PageHeader/PageActions/MainActions/MainActions.d.ts

@@ -8,6 +8,10 @@ type PageMainActionsProps<TMainActionComponent extends ElementType> = Omit<MainA
      */
     className?: string;
     size: ButtonSize;
+    /**
+     * Отступ между действиями
+     */
+    spacing?: number;
 };
-export declare const MainActions: <TMainActionComponent extends ElementType = ElementType>({ actions, isDisabled, className, size, }: PageMainActionsProps<TMainActionComponent>) => JSX.Element | null;
+export declare const MainActions: <TMainActionComponent extends ElementType = ElementType>({ actions, isDisabled, className, size, spacing, }: PageMainActionsProps<TMainActionComponent>) => JSX.Element | null;
 export {};

package/components/PageLayout/PageHeader/PageActions/MainActions/MainActions.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { MainActions as ActionGroupMainActions, } from '../../../../ActionGroup';
 import { Wrapper } from './styles';
-export const MainActions = ({ actions, isDisabled, className, size, }) => {
+export const MainActions = ({ actions, isDisabled, className, size, spacing = 2, }) => {
     if (!actions || (actions && actions.length === 0)) {
         return null;
     }
-    return (_jsx(Wrapper, { className: className, "$size": size, children: _jsx(ActionGroupMainActions, { actions: actions ?? [], isDisabled: isDisabled, size: size }) }));
+    return (_jsx(Wrapper, { className: className, "$spacing": spacing, children: _jsx(ActionGroupMainActions, { actions: actions ?? [], isDisabled: isDisabled, size: size }) }));
 };

package/components/PageLayout/PageHeader/PageActions/MainActions/styles.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
-import type { ButtonSize } from '../../../../Button';
 export declare const Wrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    $size: ButtonSize;
+    $spacing: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/PageLayout/PageHeader/PageActions/MainActions/styles.js

@@ -3,7 +3,7 @@ import { styled } from '../../../../styles';
 import { tooltipClassnames } from '../../../../Tooltip';
 export const Wrapper = styled.div `
   display: flex;
-  gap: ${({ theme, $size }) => theme.spacing($size === 'large' ? 2 : 1)};
+  gap: ${({ theme, $spacing }) => theme.spacing($spacing)};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     flex-wrap: wrap;

package/components/PageLayout/PageHeader/PageActions/PageActions.d.ts

@@ -7,6 +7,10 @@ export type PageActionsProps<TMainActionComponent extends ElementType = ElementT
      */
     isLoading?: boolean;
     size?: ButtonSize;
+    /**
+     * Отступ между действиями
+     */
+    spacing?: number;
 };
 export declare const PageActions: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType>(props: ActionGroupProps<TMainActionComponent, TSecondaryActionComponent> & {
     /**
@@ -14,4 +18,8 @@ export declare const PageActions: <TMainActionComponent extends ElementType = El
      */
     isLoading?: boolean | undefined;
     size?: "medium" | "large" | undefined;
+    /**
+     * Отступ между действиями
+     */
+    spacing?: number | undefined;
 } & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

package/components/PageLayout/PageHeader/PageActions/PageActions.js

@@ -7,12 +7,12 @@ import { SecondaryActions } from './SecondaryActions';
 import { SecondaryVisibleActions } from './SecondaryVisibleActions';
 import { ActionWrapper, SecondaryWrapper, Wrapper } from './styles';
 const PageActionsInner = (props, ref) => {
-    const { secondary, secondaryVisible, main, className, isLoading, size = 'medium', } = props;
+    const { secondary, secondaryVisible, main, className, isLoading, size = 'medium', spacing = 2, } = props;
     const { disabledAction } = useActionsState({ main, secondary });
-    const renderSecondaryActions = () => (_jsxs(SecondaryWrapper, { "$size": size, children: [secondaryVisible && (_jsx(SecondaryVisibleActions, { actions: secondaryVisible, size: size })), secondary && (_jsx(SecondaryActions, { isDisabled: disabledAction, actions: secondary, size: size }))] }));
+    const renderSecondaryActions = () => (_jsxs(SecondaryWrapper, { "$spacing": spacing, children: [secondaryVisible && (_jsx(SecondaryVisibleActions, { actions: secondaryVisible, size: size })), secondary && (_jsx(SecondaryActions, { isDisabled: disabledAction, actions: secondary, size: size }))] }));
     if (isLoading) {
         return (_jsx(Wrapper, { children: _jsx(PageActionSkeleton, { size: size }) }));
     }
-    return (_jsx(Wrapper, { className: className, ref: ref, children: _jsxs(ActionWrapper, { "$size": size, children: [_jsx(MainActions, { isDisabled: disabledAction, actions: main, size: size }), renderSecondaryActions()] }) }));
+    return (_jsx(Wrapper, { className: className, ref: ref, children: _jsxs(ActionWrapper, { "$spacing": spacing, children: [_jsx(MainActions, { isDisabled: disabledAction, actions: main, size: size, spacing: spacing }), renderSecondaryActions()] }) }));
 };
 export const PageActions = forwardRefWithGeneric(PageActionsInner);

package/components/PageLayout/PageHeader/PageActions/styles.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import type { ButtonSize } from '../../../Button';
 export declare const Wrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -8,11 +7,11 @@ export declare const SecondaryWrapper: import("@emotion/styled").StyledComponent
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    $size: ButtonSize;
+    $spacing: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ActionWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    $size: ButtonSize;
+    $spacing: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/PageLayout/PageHeader/PageActions/styles.js

@@ -12,7 +12,7 @@ export const Wrapper = styled.div `
 export const SecondaryWrapper = styled('div') `
   display: flex;
   flex-wrap: nowrap;
-  gap: ${({ theme, $size }) => theme.spacing($size === 'large' ? 2 : 1)};
+  gap: ${({ theme, $spacing }) => theme.spacing($spacing)};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     gap: ${({ theme }) => theme.spacing(2)};
@@ -21,7 +21,7 @@ export const SecondaryWrapper = styled('div') `
 export const ActionWrapper = styled.div `
   display: flex;
   flex-direction: row-reverse;
-  gap: ${({ theme, $size }) => theme.spacing($size === 'large' ? 2 : 1)};
+  gap: ${({ theme, $spacing }) => theme.spacing($spacing)};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     gap: ${({ theme }) => theme.spacing(2)};

package/components/fileUploading/FileUploaderDropzone/PlaceholderContainer/styles.js

@@ -3,6 +3,7 @@ export const Wrapper = styled.div `
   display: flex;
   gap: ${({ theme }) => theme.spacing(4)};
   align-items: center;
+  justify-content: center;
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     flex-direction: column;

package/components/theme/components/MuiListItemButton.js

@@ -7,6 +7,9 @@ export const MuiListItemButton = {
                     color: theme.palette.primary[800],
                     backgroundColor: theme.palette.grey[100],
                 },
+                '&:hover': {
+                    backgroundColor: theme.palette.background.elementHover,
+                },
             };
         },
     },

package/components/theme/palette/palette.js

@@ -71,7 +71,7 @@ export const getPalette = (palette) => {
             default: '#FFFFFF',
             paper: '#FFFFFF',
             element: '#FFFFFF',
-            elementHover: '#F9F9F9',
+            elementHover: '#F0F0F0',
             modalShadow: '#24242473',
             body: '#F9F9F9',
         },

package/hook-form/FormTreeLikeAsyncAutocomplete/index.d.ts

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

package/hook-form/FormTreeLikeAsyncAutocomplete/index.js

@@ -1 +1 @@
-"use strict";
+export * from './FormTreeLikeAsyncAutocomplete';

package/node/components/DataGrid/Head/styles.js

@@ -12,7 +12,7 @@ exports.Wrapper = (0, styles_1.styled)('header', {
   width: fit-content;
   min-width: 100%;
 
-  border-bottom: 2px solid ${({ theme }) => theme.palette.grey[300]};
+  border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
 `;
 exports.CheckboxCell = styles_1.styled.div `
   display: flex;

package/node/components/PageLayout/PageContent/PageContent.d.ts

@@ -1,34 +1,3 @@
-import { type ReactNode, type RefObject } from 'react';
-import { type PageLayoutFooterProps } from '../PageLayoutFooter';
-export type PageContentProps = {
-    children: ReactNode;
-    /**
-     * Флаг, растягивающий контейнер на 100% высоты
-     * @deprecated Не поддерживается, контейнер всегда растянут на 100% независимо от флага
-     */
-    isFullHeight?: boolean;
-    /**
-     * Название класса, применяется к корневому компоненту
-     */
-    className?: string;
-    /**
-     * Конфигурация PageLayoutFooter
-     * @example <PageLayout footer={{
-     *  children: 'Нижняя панель страницы',
-     * }} />
-     */
-    footer?: PageLayoutFooterProps | ReactNode;
-    /**
-     * Если true, убирает отступы для Content
-     */
-    isFormPaddingDisable?: boolean;
-    /**
-     * Ref на скролл контейнер
-     */
-    scrollRef?: RefObject<HTMLDivElement>;
-    /**
-     * Header контентной части
-     */
-    header?: ReactNode;
-};
+/// <reference types="react" />
+import type { PageContentProps } from './types';
 export declare const PageContent: import("react").ForwardRefExoticComponent<PageContentProps & import("react").RefAttributes<HTMLElement>>;

package/node/components/PageLayout/PageContent/PageContent.js

@@ -4,12 +4,12 @@ exports.PageContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("../../utils");
-const PageContext_1 = require("../PageContext");
 const PageLayoutFooter_1 = require("../PageLayoutFooter");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
 exports.PageContent = (0, react_1.forwardRef)((props, forwardedRef) => {
-    const { hasAside } = (0, react_1.useContext)(PageContext_1.PageContext);
+    const { hasAside, contentClassnames } = (0, useLogic_1.useLogic)(props);
     const { className, children, isFullHeight = true, footer, scrollRef, header, } = props;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, utils_1.classNames)(className, constants_1.pageContentClassnames.pageContent), ref: forwardedRef, "$isFullHeight": isFullHeight, "$isSeparatorShown": hasAside || Boolean(header), children: [header && header, (0, jsx_runtime_1.jsx)(styles_1.Content, { ref: scrollRef, className: constants_1.pageContentClassnames.content, "$hasAside": hasAside || Boolean(header), children: children }), footer && !(0, react_1.isValidElement)(footer) && ((0, jsx_runtime_1.jsx)(PageLayoutFooter_1.PageLayoutFooter, { ...footer })), (0, react_1.isValidElement)(footer) && footer] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, utils_1.classNames)(className, constants_1.pageContentClassnames.pageContent), ref: forwardedRef, "$isFullHeight": isFullHeight, "$isSeparatorShown": hasAside || Boolean(header), children: [header && header, (0, jsx_runtime_1.jsx)(styles_1.Content, { ref: scrollRef, className: contentClassnames, "$hasAside": hasAside || Boolean(header), children: children }), footer && !(0, react_1.isValidElement)(footer) && ((0, jsx_runtime_1.jsx)(PageLayoutFooter_1.PageLayoutFooter, { ...footer })), (0, react_1.isValidElement)(footer) && footer] }));
 });

package/node/components/PageLayout/PageContent/PageContentHeader/PageContentHeaderActions/PageContentHeaderActions.js

@@ -4,6 +4,6 @@ exports.PageContentHeaderActions = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const PageHeader_1 = require("../../../PageHeader");
 const PageContentHeaderActions = (props) => {
-    return (0, jsx_runtime_1.jsx)(PageHeader_1.PageActions, { size: "medium", ...props });
+    return (0, jsx_runtime_1.jsx)(PageHeader_1.PageActions, { size: "medium", spacing: 1, ...props });
 };
 exports.PageContentHeaderActions = PageContentHeaderActions;

package/node/components/PageLayout/PageContent/PageContentHeader/styles.js

@@ -11,6 +11,14 @@ exports.Wrapper = styles_1.styled.header `
   padding: ${({ theme }) => theme.spacing(4, 6)};
 
   border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+      margin: ${({ theme }) => theme.spacing(0, 4)};
+
+      background-color: ${({ theme }) => theme.palette.background.default};
+      border-top-left-radius: ${({ theme }) => theme.shape.medium};
+      border-top-right-radius: ${({ theme }) => theme.shape.medium};
+  }
 `;
 exports.TitleBlock = styles_1.styled.div `
   overflow: hidden;

package/node/components/PageLayout/PageContent/constants.d.ts

@@ -1,6 +1,7 @@
 export declare const pageContentClassnames: {
     pageContent: string;
     content: string;
+    contentHasHeader: string;
     animation: string;
 };
 export declare const PAGE_CONTENT_ANIMATION = "white-flash";

package/node/components/PageLayout/PageContent/constants.js

@@ -5,6 +5,7 @@ const utils_1 = require("../../utils");
 exports.pageContentClassnames = {
     pageContent: (0, utils_1.createUIKitClassname)('page-content'),
     content: (0, utils_1.createUIKitClassname)('page-content__content'),
+    contentHasHeader: (0, utils_1.createUIKitClassname)('page-content__content_has-header'),
     animation: (0, utils_1.createUIKitClassname)('page-content_animation'),
 };
 exports.PAGE_CONTENT_ANIMATION = 'white-flash';

package/node/components/PageLayout/PageContent/index.d.ts

@@ -1,3 +1,4 @@
 export * from './constants';
 export * from './PageContent';
 export * from './PageContentHeader';
+export type { PageContentProps } from './types';

package/node/components/PageLayout/PageContent/styles.js

@@ -29,7 +29,6 @@ exports.Wrapper = (0, styles_1.styled)('article', {
     height: ${({ $isFullHeight }) => ($isFullHeight ? 'auto' : '100%')};
 
     border-top: none;
-    border-radius: ${({ theme }) => theme.shape.medium};
   }
 
   @keyframes ${constants_1.PAGE_CONTENT_ANIMATION} {
@@ -72,6 +71,12 @@ exports.Content = styles_1.styled.div `
     padding: ${({ theme }) => theme.spacing(4, 4, 3)};
 
     background-color: ${({ theme }) => theme.palette.background.default};
+    border-radius: ${({ theme }) => theme.shape.medium};
+
+    &.${constants_1.pageContentClassnames.contentHasHeader} {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
   }
 
   &:has(.${PdfViewer_1.pdfViewerClassnames.document}.${PdfViewer_1.pdfViewerClassnames.zoom}) {

package/node/components/PageLayout/PageContent/types.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode, RefObject } from 'react';
+import type { PageLayoutFooterProps } from '../PageLayoutFooter';
+export type PageContentProps = {
+    children: ReactNode;
+    /**
+     * Флаг, растягивающий контейнер на 100% высоты
+     * @deprecated Не поддерживается, контейнер всегда растянут на 100% независимо от флага
+     */
+    isFullHeight?: boolean;
+    /**
+     * Название класса, применяется к корневому компоненту
+     */
+    className?: string;
+    /**
+     * Конфигурация PageLayoutFooter
+     * @example <PageLayout footer={{
+     *  children: 'Нижняя панель страницы',
+     * }} />
+     */
+    footer?: PageLayoutFooterProps | ReactNode;
+    /**
+     * Если true, убирает отступы для Content
+     */
+    isFormPaddingDisable?: boolean;
+    /**
+     * Ref на скролл контейнер
+     */
+    scrollRef?: RefObject<HTMLDivElement>;
+    /**
+     * Header контентной части
+     */
+    header?: ReactNode;
+};

package/node/components/PageLayout/PageContent/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/node/components/PageLayout/PageContent/useLogic/index.d.ts

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

package/node/components/PageLayout/PageContent/useLogic/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("./useLogic"), exports);

package/node/components/PageLayout/PageContent/useLogic/useLogic.d.ts

@@ -0,0 +1,7 @@
+import type { PageContentProps } from '../types';
+type UseLogicParams = PageContentProps;
+export declare const useLogic: ({ header }: UseLogicParams) => {
+    contentClassnames: string;
+    hasAside: boolean;
+};
+export {};

package/node/components/PageLayout/PageContent/useLogic/useLogic.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const utils_1 = require("../../../utils");
+const PageContext_1 = require("../../PageContext");
+const constants_1 = require("../constants");
+const useLogic = ({ header }) => {
+    const { hasAside } = (0, react_1.useContext)(PageContext_1.PageContext);
+    const contentClassnames = (0, react_1.useMemo)(() => (0, utils_1.classNames)(constants_1.pageContentClassnames.content, {
+        [constants_1.pageContentClassnames.contentHasHeader]: Boolean(header),
+    }), [header]);
+    return { contentClassnames, hasAside };
+};
+exports.useLogic = useLogic;

package/node/components/PageLayout/PageHeader/MobilePageActions/styles.d.ts

@@ -53,6 +53,7 @@ export declare const StyledMainActions: import("@emotion/styled").StyledComponen
     actions?: import("../../..").MainAction<import("react").ElementType>[] | undefined;
     className?: string | undefined;
     size: "medium" | "large";
+    spacing?: number | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {

package/node/components/PageLayout/PageHeader/PageActions/MainActions/MainActions.d.ts

@@ -8,6 +8,10 @@ type PageMainActionsProps<TMainActionComponent extends ElementType> = Omit<MainA
      */
     className?: string;
     size: ButtonSize;
+    /**
+     * Отступ между действиями
+     */
+    spacing?: number;
 };
-export declare const MainActions: <TMainActionComponent extends ElementType = ElementType>({ actions, isDisabled, className, size, }: PageMainActionsProps<TMainActionComponent>) => JSX.Element | null;
+export declare const MainActions: <TMainActionComponent extends ElementType = ElementType>({ actions, isDisabled, className, size, spacing, }: PageMainActionsProps<TMainActionComponent>) => JSX.Element | null;
 export {};

package/node/components/PageLayout/PageHeader/PageActions/MainActions/MainActions.js

@@ -4,10 +4,10 @@ exports.MainActions = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ActionGroup_1 = require("../../../../ActionGroup");
 const styles_1 = require("./styles");
-const MainActions = ({ actions, isDisabled, className, size, }) => {
+const MainActions = ({ actions, isDisabled, className, size, spacing = 2, }) => {
     if (!actions || (actions && actions.length === 0)) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: className, "$size": size, children: (0, jsx_runtime_1.jsx)(ActionGroup_1.MainActions, { actions: actions ?? [], isDisabled: isDisabled, size: size }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: className, "$spacing": spacing, children: (0, jsx_runtime_1.jsx)(ActionGroup_1.MainActions, { actions: actions ?? [], isDisabled: isDisabled, size: size }) }));
 };
 exports.MainActions = MainActions;

package/node/components/PageLayout/PageHeader/PageActions/MainActions/styles.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
-import type { ButtonSize } from '../../../../Button';
 export declare const Wrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    $size: ButtonSize;
+    $spacing: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/PageLayout/PageHeader/PageActions/MainActions/styles.js

@@ -6,7 +6,7 @@ const styles_1 = require("../../../../styles");
 const Tooltip_1 = require("../../../../Tooltip");
 exports.Wrapper = styles_1.styled.div `
   display: flex;
-  gap: ${({ theme, $size }) => theme.spacing($size === 'large' ? 2 : 1)};
+  gap: ${({ theme, $spacing }) => theme.spacing($spacing)};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     flex-wrap: wrap;

package/node/components/PageLayout/PageHeader/PageActions/PageActions.d.ts

@@ -7,6 +7,10 @@ export type PageActionsProps<TMainActionComponent extends ElementType = ElementT
      */
     isLoading?: boolean;
     size?: ButtonSize;
+    /**
+     * Отступ между действиями
+     */
+    spacing?: number;
 };
 export declare const PageActions: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType>(props: ActionGroupProps<TMainActionComponent, TSecondaryActionComponent> & {
     /**
@@ -14,4 +18,8 @@ export declare const PageActions: <TMainActionComponent extends ElementType = El
      */
     isLoading?: boolean | undefined;
     size?: "medium" | "large" | undefined;
+    /**
+     * Отступ между действиями
+     */
+    spacing?: number | undefined;
 } & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

package/node/components/PageLayout/PageHeader/PageActions/PageActions.js

@@ -10,12 +10,12 @@ const SecondaryActions_1 = require("./SecondaryActions");
 const SecondaryVisibleActions_1 = require("./SecondaryVisibleActions");
 const styles_1 = require("./styles");
 const PageActionsInner = (props, ref) => {
-    const { secondary, secondaryVisible, main, className, isLoading, size = 'medium', } = props;
+    const { secondary, secondaryVisible, main, className, isLoading, size = 'medium', spacing = 2, } = props;
     const { disabledAction } = (0, ActionGroup_1.useActionsState)({ main, secondary });
-    const renderSecondaryActions = () => ((0, jsx_runtime_1.jsxs)(styles_1.SecondaryWrapper, { "$size": size, children: [secondaryVisible && ((0, jsx_runtime_1.jsx)(SecondaryVisibleActions_1.SecondaryVisibleActions, { actions: secondaryVisible, size: size })), secondary && ((0, jsx_runtime_1.jsx)(SecondaryActions_1.SecondaryActions, { isDisabled: disabledAction, actions: secondary, size: size }))] }));
+    const renderSecondaryActions = () => ((0, jsx_runtime_1.jsxs)(styles_1.SecondaryWrapper, { "$spacing": spacing, children: [secondaryVisible && ((0, jsx_runtime_1.jsx)(SecondaryVisibleActions_1.SecondaryVisibleActions, { actions: secondaryVisible, size: size })), secondary && ((0, jsx_runtime_1.jsx)(SecondaryActions_1.SecondaryActions, { isDisabled: disabledAction, actions: secondary, size: size }))] }));
     if (isLoading) {
         return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { children: (0, jsx_runtime_1.jsx)(PageActionSkeleton_1.PageActionSkeleton, { size: size }) }));
     }
-    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: className, ref: ref, children: (0, jsx_runtime_1.jsxs)(styles_1.ActionWrapper, { "$size": size, children: [(0, jsx_runtime_1.jsx)(MainActions_1.MainActions, { isDisabled: disabledAction, actions: main, size: size }), renderSecondaryActions()] }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: className, ref: ref, children: (0, jsx_runtime_1.jsxs)(styles_1.ActionWrapper, { "$spacing": spacing, children: [(0, jsx_runtime_1.jsx)(MainActions_1.MainActions, { isDisabled: disabledAction, actions: main, size: size, spacing: spacing }), renderSecondaryActions()] }) }));
 };
 exports.PageActions = (0, forwardRefWithGeneric_1.forwardRefWithGeneric)(PageActionsInner);

package/node/components/PageLayout/PageHeader/PageActions/styles.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import type { ButtonSize } from '../../../Button';
 export declare const Wrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -8,11 +7,11 @@ export declare const SecondaryWrapper: import("@emotion/styled").StyledComponent
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    $size: ButtonSize;
+    $spacing: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ActionWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    $size: ButtonSize;
+    $spacing: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/PageLayout/PageHeader/PageActions/styles.js

@@ -15,7 +15,7 @@ exports.Wrapper = styles_1.styled.div `
 exports.SecondaryWrapper = (0, styles_1.styled)('div') `
   display: flex;
   flex-wrap: nowrap;
-  gap: ${({ theme, $size }) => theme.spacing($size === 'large' ? 2 : 1)};
+  gap: ${({ theme, $spacing }) => theme.spacing($spacing)};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     gap: ${({ theme }) => theme.spacing(2)};
@@ -24,7 +24,7 @@ exports.SecondaryWrapper = (0, styles_1.styled)('div') `
 exports.ActionWrapper = styles_1.styled.div `
   display: flex;
   flex-direction: row-reverse;
-  gap: ${({ theme, $size }) => theme.spacing($size === 'large' ? 2 : 1)};
+  gap: ${({ theme, $spacing }) => theme.spacing($spacing)};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     gap: ${({ theme }) => theme.spacing(2)};

package/node/components/fileUploading/FileUploaderDropzone/PlaceholderContainer/styles.js

@@ -6,6 +6,7 @@ exports.Wrapper = styles_1.styled.div `
   display: flex;
   gap: ${({ theme }) => theme.spacing(4)};
   align-items: center;
+  justify-content: center;
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     flex-direction: column;

package/node/components/theme/components/MuiListItemButton.js

@@ -10,6 +10,9 @@ exports.MuiListItemButton = {
                     color: theme.palette.primary[800],
                     backgroundColor: theme.palette.grey[100],
                 },
+                '&:hover': {
+                    backgroundColor: theme.palette.background.elementHover,
+                },
             };
         },
     },

package/node/components/theme/palette/palette.js

@@ -74,7 +74,7 @@ const getPalette = (palette) => {
             default: '#FFFFFF',
             paper: '#FFFFFF',
             element: '#FFFFFF',
-            elementHover: '#F9F9F9',
+            elementHover: '#F0F0F0',
             modalShadow: '#24242473',
             body: '#F9F9F9',
         },

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

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

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

@@ -1 +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("./FormTreeLikeAsyncAutocomplete"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.15.1",
+  "version": "4.16.1",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {
@@ -134,6 +134,20 @@
       "types": "./components/CardGridInfinite/index.d.ts",
       "default": "./components/CardGridInfinite/index.js",
       "import": "./components/CardGridInfinite/index.js"
+    },
+    "./hook-form/FormTreeLikeAsyncAutocomplete": {
+      "module": "./hook-form/FormTreeLikeAsyncAutocomplete/index.js",
+      "require": "./node/hook-form/FormTreeLikeAsyncAutocomplete/index.js",
+      "types": "./hook-form/FormTreeLikeAsyncAutocomplete/index.d.ts",
+      "default": "./hook-form/FormTreeLikeAsyncAutocomplete/index.js",
+      "import": "./hook-form/FormTreeLikeAsyncAutocomplete/index.js"
+    },
+    "./hook-form/FormTreeAsyncAutocomplete": {
+      "module": "./hook-form/FormTreeAsyncAutocomplete/index.js",
+      "require": "./node/hook-form/FormTreeAsyncAutocomplete/index.js",
+      "types": "./hook-form/FormTreeAsyncAutocomplete/index.d.ts",
+      "default": "./hook-form/FormTreeAsyncAutocomplete/index.js",
+      "import": "./hook-form/FormTreeAsyncAutocomplete/index.js"
     }
   },
   "author": "Astral.Soft",