@astral/ui 4.39.0 → 4.41.0

package/components/PageLayoutSection/PageLayoutSection.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+export type PageLayoutSectionProps = {
+    children: ReactNode;
+    /**
+     * Название класса, применяется к корневому компоненту
+     */
+    className?: string;
+};
+/**
+ * Секция страницы. На десктопе между секциями отображается разделитель или отступ. На мобильных разрешениях секции оформляются как карточки.
+ *
+ * @example
+ * <PageLayout content={
+ *   <PageLayoutSectionContainer>
+ *     <PageLayoutSection>
+ *           Секция 1
+ *     </PageLayoutSection>
+ *   </PageLayoutSectionContainer>
+ * } />
+ */
+export declare const PageLayoutSection: import("react").ForwardRefExoticComponent<PageLayoutSectionProps & import("react").RefAttributes<HTMLDivElement>>;

package/components/PageLayoutSection/PageLayoutSection.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Section, SectionInner } from './styles';
+/**
+ * Секция страницы. На десктопе между секциями отображается разделитель или отступ. На мобильных разрешениях секции оформляются как карточки.
+ *
+ * @example
+ * <PageLayout content={
+ *   <PageLayoutSectionContainer>
+ *     <PageLayoutSection>
+ *           Секция 1
+ *     </PageLayoutSection>
+ *   </PageLayoutSectionContainer>
+ * } />
+ */
+export const PageLayoutSection = forwardRef((props, ref) => {
+    const { children, className } = props;
+    return (_jsx(Section, { className: className, ref: ref, children: _jsx(SectionInner, { children: children }) }));
+});

package/components/PageLayoutSection/PageLayoutSectionContainer/PageLayoutSectionContainer.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+export type PageLayoutSectionContainerProps = {
+    children: ReactNode;
+    /**
+     * Название класса, применяется к корневому компоненту
+     */
+    className?: string;
+    /**
+     * На десктопе между секциями отображается разделитель; на мобиле по-прежнему карточки с отступами между ними.
+     */
+    isShowDivider?: boolean;
+};
+/**
+ * Контейнер для секций страницы.
+ *
+ * @example
+ * <PageLayout content={
+ *   <PageLayoutSectionContainer>
+ *     <PageLayoutSection>
+ *           Секция 1
+ *     </PageLayoutSection>
+ *   </PageLayoutSectionContainer>
+ * } />
+ */
+export declare const PageLayoutSectionContainer: ({ children, className, isShowDivider, }: PageLayoutSectionContainerProps) => import("react/jsx-runtime").JSX.Element;

package/components/PageLayoutSection/PageLayoutSectionContainer/PageLayoutSectionContainer.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from 'react';
+import { PageContext } from '../../PageContext';
+import { classNames } from '../../utils/classNames';
+import { pageLayoutSectionContainerClassnames } from './constants';
+import { SectionContainer } from './styles';
+/**
+ * Контейнер для секций страницы.
+ *
+ * @example
+ * <PageLayout content={
+ *   <PageLayoutSectionContainer>
+ *     <PageLayoutSection>
+ *           Секция 1
+ *     </PageLayoutSection>
+ *   </PageLayoutSectionContainer>
+ * } />
+ */
+export const PageLayoutSectionContainer = ({ children, className, isShowDivider = false, }) => {
+    const { hasAside } = useContext(PageContext);
+    const classes = useMemo(() => {
+        return classNames(className, {
+            [pageLayoutSectionContainerClassnames.withAside]: hasAside,
+            [pageLayoutSectionContainerClassnames.withDivider]: isShowDivider,
+        });
+    }, [className, hasAside, isShowDivider]);
+    return _jsx(SectionContainer, { className: classes, children: children });
+};

package/components/PageLayoutSection/PageLayoutSectionContainer/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const pageLayoutSectionContainerClassnames: {
+    withAside: string;
+    withDivider: string;
+};

package/components/PageLayoutSection/PageLayoutSectionContainer/constants.js

@@ -0,0 +1,4 @@
+export const pageLayoutSectionContainerClassnames = {
+    withAside: 'page-layout-section__container_with-aside',
+    withDivider: 'page-layout-section__container_with-divider',
+};

package/components/PageLayoutSection/PageLayoutSectionContainer/index.d.ts

@@ -0,0 +1 @@
+export { PageLayoutSectionContainer, type PageLayoutSectionContainerProps, } from './PageLayoutSectionContainer';

package/components/PageLayoutSection/PageLayoutSectionContainer/index.js

@@ -0,0 +1 @@
+export { PageLayoutSectionContainer, } from './PageLayoutSectionContainer';

package/components/PageLayoutSection/PageLayoutSectionContainer/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const SectionContainer: import("../../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>, {}>;

package/components/PageLayoutSection/PageLayoutSectionContainer/styles.js

@@ -0,0 +1,51 @@
+import { styled } from '../../styled';
+import { pageLayoutSectionContainerClassnames } from './constants';
+export const SectionContainer = styled.div `
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(6)};
+
+  padding-top: 0;
+  padding-bottom: ${({ theme }) => theme.spacing(4)};
+
+  border-top: none;
+
+  &.${pageLayoutSectionContainerClassnames.withAside} {
+    padding-top: ${({ theme }) => theme.spacing(4)};
+
+    border-top: ${({ theme }) => `1px solid ${theme.palette.grey[300]}`};
+  }
+
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    gap: ${({ theme }) => theme.spacing(5)};
+  }
+
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    &.${pageLayoutSectionContainerClassnames.withDivider} {
+      & > :not(:last-child)::after {
+        content: '';
+
+        display: block;
+
+        width: 100%;
+        height: 1px;
+        margin-top: ${({ theme }) => theme.spacing(6)};
+
+        background-color: ${({ theme }) => theme.palette.grey[300]};
+      }
+    }
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    overflow: unset;
+    gap: ${({ theme }) => theme.spacing(4)};
+    order: 4;
+
+    &.${pageLayoutSectionContainerClassnames.withAside} {
+      padding-top: 0;
+
+      border-top: none;
+    }
+  }
+`;

package/components/PageLayoutSection/index.d.ts

@@ -0,0 +1,2 @@
+export { PageLayoutSection, type PageLayoutSectionProps, } from './PageLayoutSection';
+export { PageLayoutSectionContainer, type PageLayoutSectionContainerProps, } from './PageLayoutSectionContainer';

package/components/PageLayoutSection/index.js

@@ -0,0 +1,2 @@
+export { PageLayoutSection, } from './PageLayoutSection';
+export { PageLayoutSectionContainer, } from './PageLayoutSectionContainer';

package/components/PageLayoutSection/public.d.ts

@@ -0,0 +1,2 @@
+export { PageLayoutSection, type PageLayoutSectionProps, } from './PageLayoutSection';
+export { PageLayoutSectionContainer, type PageLayoutSectionContainerProps, } from './PageLayoutSectionContainer';

package/components/PageLayoutSection/public.js

@@ -0,0 +1,2 @@
+export { PageLayoutSection, } from './PageLayoutSection';
+export { PageLayoutSectionContainer, } from './PageLayoutSectionContainer';

package/components/PageLayoutSection/styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const Section: import("../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 SectionInner: import("../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>, {}>;

package/components/PageLayoutSection/styles.js

@@ -0,0 +1,21 @@
+import { styled } from '../styled';
+export const Section = styled.section `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin: ${({ theme }) => theme.spacing(0, 4)};
+
+    background-color: ${({ theme }) => theme.palette.background.default};
+    border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    border-radius: ${({ theme }) => theme.shape.medium};
+  }
+`;
+export const SectionInner = styled.div `
+  padding: ${({ theme }) => theme.spacing(0, 6)};
+
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    padding: ${({ theme }) => theme.spacing(0, 4)};
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(4)};
+  }
+`;

package/components/index.d.ts

@@ -146,6 +146,7 @@ export * from './OverflowTypography';
 export { PageAlert, type PageAlertProps, } from './PageAlert';
 export { PageAside, type PageAsideProps, } from './PageAside';
 export { PageLayout, type PageLayoutProps, } from './PageLayout';
+export { PageLayoutSection, type PageLayoutSectionProps, PageLayoutSectionContainer, type PageLayoutSectionContainerProps, } from './PageLayoutSection';
 export { PageAsideBlock, type PageAsideBlockProps, } from './PageAsideBlock';
 export { PageContent, PageContentHeader, PageContentHeaderActions, type PageContentHeaderActionsProps, type PageContentHeaderProps, type PageContentProps, pageContentClassnames, } from './PageContent';
 export { PageContext, type PageContextProps, PageContextProvider, } from './PageContext';

package/components/index.js

@@ -145,6 +145,7 @@ export * from './OverflowTypography';
 export { PageAlert, } from './PageAlert';
 export { PageAside, } from './PageAside';
 export { PageLayout, } from './PageLayout';
+export { PageLayoutSection, PageLayoutSectionContainer, } from './PageLayoutSection';
 export { PageAsideBlock, } from './PageAsideBlock';
 export { PageContent, PageContentHeader, PageContentHeaderActions, pageContentClassnames, } from './PageContent';
 export { PageContext, PageContextProvider, } from './PageContext';

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

@@ -2,6 +2,7 @@ import { type ReactElement, type ReactNode } from 'react';
 import { type UseFormReturn } from '../useForm';
 import { type FIELD_NAME } from './constants';
 import type { FormValues, ValidationFn } from './types';
+export type ShowEditIconMode = 'always' | 'none' | 'onHover';
 export type EditableTextProps<TValue = string> = {
     /**
      * Название класса, применяется к корневому компоненту
@@ -13,10 +14,18 @@ export type EditableTextProps<TValue = string> = {
      */
     initialValue?: TValue;
     /**
-     * Если false, иконка редактирования не будет отображаться
+     * Если false, иконка редактирования не будет отображаться.
+     * Для новых сценариев предпочтительнее `showEditIcon`.
+     * Если переданы оба параметра, для отображения иконки используется `showEditIcon`.
      * @default true
      */
     isShowIcon?: boolean;
+    /**
+     * Режим отображения иконки редактирования (аналогично `CopyTypography.showCopyIcon`).
+     * Имеет приоритет над `isShowIcon`.
+     * @default если не задан — наследуется из `isShowIcon` (true → always, false → none)
+     */
+    showEditIcon?: ShowEditIconMode;
     /**
      * Если true, будет отображаться лоадер
      */

package/hook-form/EditableText/EditableText.js

@@ -1,17 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Tooltip } from '../../components/Tooltip';
+import { classNames } from '../../components/utils/classNames';
+import { editableTextClassnames } from './constants';
 import { EditingForm } from './EditingForm';
 import { DisplayValue, StyledEditIcon, StyledLoader, StyledPopover, } from './styles';
 import { useLogic } from './useLogic';
+const getShowEditIconMode = ({ showEditIcon, isShowIcon = true, }) => {
+    if (showEditIcon !== undefined) {
+        return showEditIcon;
+    }
+    return isShowIcon === false ? 'none' : 'always';
+};
 // biome-ignore lint/complexity/noUselessTypeConstraint: Фикс типизации в тестах
 export const EditableText = (props) => {
     const { isIconOnLeft, onClose, displayValueProps, tooltipProps, popoverProps, } = useLogic(props);
-    const { className, children, isShowIcon = true, isLoading, iconPosition = 'right', ...restProps } = props;
+    const { className, children, isShowIcon = true, isLoading, showEditIcon, iconPosition = 'right', ...restProps } = props;
+    const showEditIconMode = getShowEditIconMode({ showEditIcon, isShowIcon });
     const renderIcon = () => {
         if (isLoading) {
             return _jsx(StyledLoader, { "$iconPosition": iconPosition });
         }
-        return isShowIcon ? _jsx(StyledEditIcon, { "$iconPosition": iconPosition }) : null;
+        if (showEditIconMode === 'none') {
+            return null;
+        }
+        return (_jsx(StyledEditIcon, { "$iconPosition": iconPosition, className: classNames({
+                [editableTextClassnames.showIconOnHover]: showEditIconMode === 'onHover',
+            }) }));
     };
     return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { ...tooltipProps, placement: "bottom", children: _jsxs(DisplayValue, { "$isLoading": isLoading, className: className, variant: "inherit", ...displayValueProps, children: [isIconOnLeft && renderIcon(), children, !isIconOnLeft && renderIcon()] }) }), _jsx(StyledPopover, { anchorOrigin: {
                     vertical: 'bottom',

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

@@ -1 +1,4 @@
 export declare const FIELD_NAME = "editableField";
+export declare const editableTextClassnames: {
+    showIconOnHover: string;
+};

package/hook-form/EditableText/constants.js

@@ -1 +1,5 @@
+import { createUIKitClassname } from '../../components/utils/createUIKitClassname';
 export const FIELD_NAME = 'editableField';
+export const editableTextClassnames = {
+    showIconOnHover: createUIKitClassname('editable-text__edit-icon_show-on-hover'),
+};

package/hook-form/EditableText/styles.js

@@ -3,6 +3,7 @@ import { Popover } from '../../components/Popover';
 import { styled } from '../../components/styled';
 import { Typography } from '../../components/Typography';
 import { EditOutlineMd } from '../../icons/EditOutlineMd';
+import { editableTextClassnames } from './constants';
 const getBackgroundColor = (theme, $isEdited, $isLoading) => {
     if ($isEdited) {
         return theme.palette.primary[100];
@@ -33,6 +34,10 @@ export const DisplayValue = styled(Typography, {
     cursor: ${({ $isLoading }) => ($isLoading ? 'default' : 'pointer')};
 
     text-decoration: ${({ $isLoading }) => $isLoading ? 'inherit' : 'underline'};
+
+    .${editableTextClassnames.showIconOnHover} {
+      display: unset;
+    }
   }
 `;
 export const StyledEditIcon = styled(EditOutlineMd, {
@@ -49,6 +54,10 @@ export const StyledEditIcon = styled(EditOutlineMd, {
   margin-left: ${({ $iconPosition, theme }) => $iconPosition === 'right' ? theme.spacing(1) : ''};
 
   font-size: inherit;
+
+  &.${editableTextClassnames.showIconOnHover} {
+    display: none;
+  }
 `;
 export const StyledLoader = styled(Loader, {
     shouldForwardProp: (prop) => !['$iconPosition'].includes(prop),

package/node/components/PageLayoutSection/PageLayoutSection.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+export type PageLayoutSectionProps = {
+    children: ReactNode;
+    /**
+     * Название класса, применяется к корневому компоненту
+     */
+    className?: string;
+};
+/**
+ * Секция страницы. На десктопе между секциями отображается разделитель или отступ. На мобильных разрешениях секции оформляются как карточки.
+ *
+ * @example
+ * <PageLayout content={
+ *   <PageLayoutSectionContainer>
+ *     <PageLayoutSection>
+ *           Секция 1
+ *     </PageLayoutSection>
+ *   </PageLayoutSectionContainer>
+ * } />
+ */
+export declare const PageLayoutSection: import("react").ForwardRefExoticComponent<PageLayoutSectionProps & import("react").RefAttributes<HTMLDivElement>>;

package/node/components/PageLayoutSection/PageLayoutSection.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageLayoutSection = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styles_1 = require("./styles");
+/**
+ * Секция страницы. На десктопе между секциями отображается разделитель или отступ. На мобильных разрешениях секции оформляются как карточки.
+ *
+ * @example
+ * <PageLayout content={
+ *   <PageLayoutSectionContainer>
+ *     <PageLayoutSection>
+ *           Секция 1
+ *     </PageLayoutSection>
+ *   </PageLayoutSectionContainer>
+ * } />
+ */
+exports.PageLayoutSection = (0, react_1.forwardRef)((props, ref) => {
+    const { children, className } = props;
+    return ((0, jsx_runtime_1.jsx)(styles_1.Section, { className: className, ref: ref, children: (0, jsx_runtime_1.jsx)(styles_1.SectionInner, { children: children }) }));
+});

package/node/components/PageLayoutSection/PageLayoutSectionContainer/PageLayoutSectionContainer.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+export type PageLayoutSectionContainerProps = {
+    children: ReactNode;
+    /**
+     * Название класса, применяется к корневому компоненту
+     */
+    className?: string;
+    /**
+     * На десктопе между секциями отображается разделитель; на мобиле по-прежнему карточки с отступами между ними.
+     */
+    isShowDivider?: boolean;
+};
+/**
+ * Контейнер для секций страницы.
+ *
+ * @example
+ * <PageLayout content={
+ *   <PageLayoutSectionContainer>
+ *     <PageLayoutSection>
+ *           Секция 1
+ *     </PageLayoutSection>
+ *   </PageLayoutSectionContainer>
+ * } />
+ */
+export declare const PageLayoutSectionContainer: ({ children, className, isShowDivider, }: PageLayoutSectionContainerProps) => import("react/jsx-runtime").JSX.Element;

package/node/components/PageLayoutSection/PageLayoutSectionContainer/PageLayoutSectionContainer.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageLayoutSectionContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const PageContext_1 = require("../../PageContext");
+const classNames_1 = require("../../utils/classNames");
+const constants_1 = require("./constants");
+const styles_1 = require("./styles");
+/**
+ * Контейнер для секций страницы.
+ *
+ * @example
+ * <PageLayout content={
+ *   <PageLayoutSectionContainer>
+ *     <PageLayoutSection>
+ *           Секция 1
+ *     </PageLayoutSection>
+ *   </PageLayoutSectionContainer>
+ * } />
+ */
+const PageLayoutSectionContainer = ({ children, className, isShowDivider = false, }) => {
+    const { hasAside } = (0, react_1.useContext)(PageContext_1.PageContext);
+    const classes = (0, react_1.useMemo)(() => {
+        return (0, classNames_1.classNames)(className, {
+            [constants_1.pageLayoutSectionContainerClassnames.withAside]: hasAside,
+            [constants_1.pageLayoutSectionContainerClassnames.withDivider]: isShowDivider,
+        });
+    }, [className, hasAside, isShowDivider]);
+    return (0, jsx_runtime_1.jsx)(styles_1.SectionContainer, { className: classes, children: children });
+};
+exports.PageLayoutSectionContainer = PageLayoutSectionContainer;

package/node/components/PageLayoutSection/PageLayoutSectionContainer/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const pageLayoutSectionContainerClassnames: {
+    withAside: string;
+    withDivider: string;
+};

package/node/components/PageLayoutSection/PageLayoutSectionContainer/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageLayoutSectionContainerClassnames = void 0;
+exports.pageLayoutSectionContainerClassnames = {
+    withAside: 'page-layout-section__container_with-aside',
+    withDivider: 'page-layout-section__container_with-divider',
+};

package/node/components/PageLayoutSection/PageLayoutSectionContainer/index.d.ts

@@ -0,0 +1 @@
+export { PageLayoutSectionContainer, type PageLayoutSectionContainerProps, } from './PageLayoutSectionContainer';

package/node/components/PageLayoutSection/PageLayoutSectionContainer/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageLayoutSectionContainer = void 0;
+var PageLayoutSectionContainer_1 = require("./PageLayoutSectionContainer");
+Object.defineProperty(exports, "PageLayoutSectionContainer", { enumerable: true, get: function () { return PageLayoutSectionContainer_1.PageLayoutSectionContainer; } });

package/node/components/PageLayoutSection/PageLayoutSectionContainer/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const SectionContainer: 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/components/PageLayoutSection/PageLayoutSectionContainer/styles.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionContainer = void 0;
+const styled_1 = require("../../styled");
+const constants_1 = require("./constants");
+exports.SectionContainer = styled_1.styled.div `
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(6)};
+
+  padding-top: 0;
+  padding-bottom: ${({ theme }) => theme.spacing(4)};
+
+  border-top: none;
+
+  &.${constants_1.pageLayoutSectionContainerClassnames.withAside} {
+    padding-top: ${({ theme }) => theme.spacing(4)};
+
+    border-top: ${({ theme }) => `1px solid ${theme.palette.grey[300]}`};
+  }
+
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    gap: ${({ theme }) => theme.spacing(5)};
+  }
+
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    &.${constants_1.pageLayoutSectionContainerClassnames.withDivider} {
+      & > :not(:last-child)::after {
+        content: '';
+
+        display: block;
+
+        width: 100%;
+        height: 1px;
+        margin-top: ${({ theme }) => theme.spacing(6)};
+
+        background-color: ${({ theme }) => theme.palette.grey[300]};
+      }
+    }
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    overflow: unset;
+    gap: ${({ theme }) => theme.spacing(4)};
+    order: 4;
+
+    &.${constants_1.pageLayoutSectionContainerClassnames.withAside} {
+      padding-top: 0;
+
+      border-top: none;
+    }
+  }
+`;

package/node/components/PageLayoutSection/index.d.ts

@@ -0,0 +1,2 @@
+export { PageLayoutSection, type PageLayoutSectionProps, } from './PageLayoutSection';
+export { PageLayoutSectionContainer, type PageLayoutSectionContainerProps, } from './PageLayoutSectionContainer';

package/node/components/PageLayoutSection/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageLayoutSectionContainer = exports.PageLayoutSection = void 0;
+var PageLayoutSection_1 = require("./PageLayoutSection");
+Object.defineProperty(exports, "PageLayoutSection", { enumerable: true, get: function () { return PageLayoutSection_1.PageLayoutSection; } });
+var PageLayoutSectionContainer_1 = require("./PageLayoutSectionContainer");
+Object.defineProperty(exports, "PageLayoutSectionContainer", { enumerable: true, get: function () { return PageLayoutSectionContainer_1.PageLayoutSectionContainer; } });

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

@@ -0,0 +1,2 @@
+export { PageLayoutSection, type PageLayoutSectionProps, } from './PageLayoutSection';
+export { PageLayoutSectionContainer, type PageLayoutSectionContainerProps, } from './PageLayoutSectionContainer';

package/node/components/PageLayoutSection/public.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageLayoutSectionContainer = exports.PageLayoutSection = void 0;
+var PageLayoutSection_1 = require("./PageLayoutSection");
+Object.defineProperty(exports, "PageLayoutSection", { enumerable: true, get: function () { return PageLayoutSection_1.PageLayoutSection; } });
+var PageLayoutSectionContainer_1 = require("./PageLayoutSectionContainer");
+Object.defineProperty(exports, "PageLayoutSectionContainer", { enumerable: true, get: function () { return PageLayoutSectionContainer_1.PageLayoutSectionContainer; } });

package/node/components/PageLayoutSection/styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const Section: 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 SectionInner: 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/components/PageLayoutSection/styles.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionInner = exports.Section = void 0;
+const styled_1 = require("../styled");
+exports.Section = styled_1.styled.section `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin: ${({ theme }) => theme.spacing(0, 4)};
+
+    background-color: ${({ theme }) => theme.palette.background.default};
+    border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    border-radius: ${({ theme }) => theme.shape.medium};
+  }
+`;
+exports.SectionInner = styled_1.styled.div `
+  padding: ${({ theme }) => theme.spacing(0, 6)};
+
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    padding: ${({ theme }) => theme.spacing(0, 4)};
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(4)};
+  }
+`;

package/node/components/index.d.ts

@@ -146,6 +146,7 @@ export * from './OverflowTypography';
 export { PageAlert, type PageAlertProps, } from './PageAlert';
 export { PageAside, type PageAsideProps, } from './PageAside';
 export { PageLayout, type PageLayoutProps, } from './PageLayout';
+export { PageLayoutSection, type PageLayoutSectionProps, PageLayoutSectionContainer, type PageLayoutSectionContainerProps, } from './PageLayoutSection';
 export { PageAsideBlock, type PageAsideBlockProps, } from './PageAsideBlock';
 export { PageContent, PageContentHeader, PageContentHeaderActions, type PageContentHeaderActionsProps, type PageContentHeaderProps, type PageContentProps, pageContentClassnames, } from './PageContent';
 export { PageContext, type PageContextProps, PageContextProvider, } from './PageContext';

package/node/components/index.js

@@ -16,8 +16,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileUploaderFile = exports.FileUploaderDropzone = exports.FileUploader = exports.Filename = exports.Fieldset = exports.Zoom = exports.Slide = exports.Grow = exports.Fade = exports.expansionPanelClassnames = exports.ExpansionPanel = exports.EmailOrPhoneField = exports.EmailField = exports.DescriptionList = exports.DescriptionCell = exports.datePickerClassnames = exports.DatePicker = exports.DataGridMinimalisticPagination = exports.DataGridSecondaryActionsSkeleton = exports.DataGridSecondaryActions = exports.DataGridMainActions = exports.DataGridActionCell = exports.SidebarContext = exports.SidebarSkeleton = exports.SidebarPopover = exports.MenuSidebarButton = exports.SidebarCounter = exports.SidebarButton = exports.DashboardContext = exports.DashboardLayout = exports.DashboardAlert = exports.Counter = exports.CopyTypography = exports.confirmActionClassnames = exports.ConfirmAction = exports.ComplianceStatus = exports.CodeField = exports.BulletListItem = exports.BulletListInlineItem = exports.BulletList = exports.Breadcrumbs = exports.AvatarGroup = exports.Avatar = exports.AutoSaveIndicator = exports.AsyncAutocomplete = exports.Alert = exports.alertClassnames = exports.AddressAutocomplete = exports.useMainActions = exports.ActionGroup = void 0;
 exports.NumberedListItem = exports.NumberedList = exports.notFoundPageClassnames = exports.NotFoundPage = exports.MenuOrganizationSkeleton = exports.MenuOrganization = exports.DateRangePicker = exports.DataGridColumnHintIcon = exports.DataGridInfinite = exports.DataGrid = exports.MinimalisticPagination = exports.loaderClassnames = exports.Loader = exports.Link = exports.InfiniteDataList = exports.InputGroup = exports.Iframe = exports.useViewportType = exports.useUpdateEffect = exports.useToggle = exports.useStickyButton = exports.useSet = exports.useSecondsCountdown = exports.useScrollManagement = exports.useRadioGroup = exports.usePopoverAnimation = exports.usePopover = exports.useMenu = exports.useLocalStorage = exports.useLocaleDateTimeFormat = exports.useLoadingState = exports.useInterval = exports.useInputPopover = exports.useForwardedRef = exports.useFocusAwayEffect = exports.useFirstMountState = exports.useFeatureFlags = exports.useEscapeClickEffect = exports.useClickAwayEffect = exports.useCheckControlled = exports.useAsyncOptions = exports.HintIcon = exports.GuidTypography = exports.previewFileUploaderClassnames = exports.fileUploaderClassnames = exports.PreviewFileUploaderFile = exports.PreviewFileUploaderDropZone = exports.PreviewFileUploader = exports.usePreviewFileUploader = exports.useFileUploader = void 0;
-exports.getInertProps = exports.redirectToLink = exports.createUIKitClassname = exports.classNames = exports.TreeLikeList = exports.TreeLikeAutocomplete = exports.TreeAutocomplete = exports.TreeList = exports.MultipleTreeList = exports.UNSTABLE_SecondsCountdownService = exports.svgIconClassnames = exports.SvgIcon = exports.StepSlider = exports.StepperWizard = exports.staticDaysCalendarClassnames = exports.StaticDaysCalendar = exports.Skeleton = exports.SearchField = exports.ScrollToTopButton = exports.RadioGroupContext = exports.RadioGroup = exports.RadioField = exports.radioCardClassnames = exports.RadioCard = exports.Radio = exports.radioClassnames = exports.LoadingPlaceholder = exports.Placeholder = exports.useHidePersonalData = exports.PersonalData = exports.Pagination = exports.PageLayoutLoader = exports.PagePinnableAside = exports.PageLayoutFooter = exports.PageLayoutContainer = exports.PageActions = exports.PageActionSkeleton = exports.PageHeader = exports.pageHeaderClassnames = exports.PageContextProvider = exports.PageContext = exports.pageContentClassnames = exports.PageContentHeaderActions = exports.PageContentHeader = exports.PageContent = exports.PageAsideBlock = exports.PageLayout = exports.PageAside = exports.PageAlert = exports.NumberField = void 0;
-exports.WelcomeScreen = void 0;
+exports.createUIKitClassname = exports.classNames = exports.TreeLikeList = exports.TreeLikeAutocomplete = exports.TreeAutocomplete = exports.TreeList = exports.MultipleTreeList = exports.UNSTABLE_SecondsCountdownService = exports.svgIconClassnames = exports.SvgIcon = exports.StepSlider = exports.StepperWizard = exports.staticDaysCalendarClassnames = exports.StaticDaysCalendar = exports.Skeleton = exports.SearchField = exports.ScrollToTopButton = exports.RadioGroupContext = exports.RadioGroup = exports.RadioField = exports.radioCardClassnames = exports.RadioCard = exports.Radio = exports.radioClassnames = exports.LoadingPlaceholder = exports.Placeholder = exports.useHidePersonalData = exports.PersonalData = exports.Pagination = exports.PageLayoutLoader = exports.PagePinnableAside = exports.PageLayoutFooter = exports.PageLayoutContainer = exports.PageActions = exports.PageActionSkeleton = exports.PageHeader = exports.pageHeaderClassnames = exports.PageContextProvider = exports.PageContext = exports.pageContentClassnames = exports.PageContentHeaderActions = exports.PageContentHeader = exports.PageContent = exports.PageAsideBlock = exports.PageLayoutSectionContainer = exports.PageLayoutSection = exports.PageLayout = exports.PageAside = exports.PageAlert = exports.NumberField = void 0;
+exports.WelcomeScreen = exports.getInertProps = exports.redirectToLink = void 0;
 __exportStar(require("./Accordion"), exports);
 var ActionGroup_1 = require("./ActionGroup");
 Object.defineProperty(exports, "ActionGroup", { enumerable: true, get: function () { return ActionGroup_1.ActionGroup; } });
@@ -269,6 +269,9 @@ var PageAside_1 = require("./PageAside");
 Object.defineProperty(exports, "PageAside", { enumerable: true, get: function () { return PageAside_1.PageAside; } });
 var PageLayout_1 = require("./PageLayout");
 Object.defineProperty(exports, "PageLayout", { enumerable: true, get: function () { return PageLayout_1.PageLayout; } });
+var PageLayoutSection_1 = require("./PageLayoutSection");
+Object.defineProperty(exports, "PageLayoutSection", { enumerable: true, get: function () { return PageLayoutSection_1.PageLayoutSection; } });
+Object.defineProperty(exports, "PageLayoutSectionContainer", { enumerable: true, get: function () { return PageLayoutSection_1.PageLayoutSectionContainer; } });
 var PageAsideBlock_1 = require("./PageAsideBlock");
 Object.defineProperty(exports, "PageAsideBlock", { enumerable: true, get: function () { return PageAsideBlock_1.PageAsideBlock; } });
 var PageContent_1 = require("./PageContent");

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

@@ -2,6 +2,7 @@ import { type ReactElement, type ReactNode } from 'react';
 import { type UseFormReturn } from '../useForm';
 import { type FIELD_NAME } from './constants';
 import type { FormValues, ValidationFn } from './types';
+export type ShowEditIconMode = 'always' | 'none' | 'onHover';
 export type EditableTextProps<TValue = string> = {
     /**
      * Название класса, применяется к корневому компоненту
@@ -13,10 +14,18 @@ export type EditableTextProps<TValue = string> = {
      */
     initialValue?: TValue;
     /**
-     * Если false, иконка редактирования не будет отображаться
+     * Если false, иконка редактирования не будет отображаться.
+     * Для новых сценариев предпочтительнее `showEditIcon`.
+     * Если переданы оба параметра, для отображения иконки используется `showEditIcon`.
      * @default true
      */
     isShowIcon?: boolean;
+    /**
+     * Режим отображения иконки редактирования (аналогично `CopyTypography.showCopyIcon`).
+     * Имеет приоритет над `isShowIcon`.
+     * @default если не задан — наследуется из `isShowIcon` (true → always, false → none)
+     */
+    showEditIcon?: ShowEditIconMode;
     /**
      * Если true, будет отображаться лоадер
      */

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

@@ -3,18 +3,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditableText = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Tooltip_1 = require("../../components/Tooltip");
+const classNames_1 = require("../../components/utils/classNames");
+const constants_1 = require("./constants");
 const EditingForm_1 = require("./EditingForm");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
+const getShowEditIconMode = ({ showEditIcon, isShowIcon = true, }) => {
+    if (showEditIcon !== undefined) {
+        return showEditIcon;
+    }
+    return isShowIcon === false ? 'none' : 'always';
+};
 // biome-ignore lint/complexity/noUselessTypeConstraint: Фикс типизации в тестах
 const EditableText = (props) => {
     const { isIconOnLeft, onClose, displayValueProps, tooltipProps, popoverProps, } = (0, useLogic_1.useLogic)(props);
-    const { className, children, isShowIcon = true, isLoading, iconPosition = 'right', ...restProps } = props;
+    const { className, children, isShowIcon = true, isLoading, showEditIcon, iconPosition = 'right', ...restProps } = props;
+    const showEditIconMode = getShowEditIconMode({ showEditIcon, isShowIcon });
     const renderIcon = () => {
         if (isLoading) {
             return (0, jsx_runtime_1.jsx)(styles_1.StyledLoader, { "$iconPosition": iconPosition });
         }
-        return isShowIcon ? (0, jsx_runtime_1.jsx)(styles_1.StyledEditIcon, { "$iconPosition": iconPosition }) : null;
+        if (showEditIconMode === 'none') {
+            return null;
+        }
+        return ((0, jsx_runtime_1.jsx)(styles_1.StyledEditIcon, { "$iconPosition": iconPosition, className: (0, classNames_1.classNames)({
+                [constants_1.editableTextClassnames.showIconOnHover]: showEditIconMode === 'onHover',
+            }) }));
     };
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { ...tooltipProps, placement: "bottom", children: (0, jsx_runtime_1.jsxs)(styles_1.DisplayValue, { "$isLoading": isLoading, className: className, variant: "inherit", ...displayValueProps, children: [isIconOnLeft && renderIcon(), children, !isIconOnLeft && renderIcon()] }) }), (0, jsx_runtime_1.jsx)(styles_1.StyledPopover, { anchorOrigin: {
                     vertical: 'bottom',

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

@@ -1 +1,4 @@
 export declare const FIELD_NAME = "editableField";
+export declare const editableTextClassnames: {
+    showIconOnHover: string;
+};

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

@@ -1,4 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FIELD_NAME = void 0;
+exports.editableTextClassnames = exports.FIELD_NAME = void 0;
+const createUIKitClassname_1 = require("../../components/utils/createUIKitClassname");
 exports.FIELD_NAME = 'editableField';
+exports.editableTextClassnames = {
+    showIconOnHover: (0, createUIKitClassname_1.createUIKitClassname)('editable-text__edit-icon_show-on-hover'),
+};

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

@@ -6,6 +6,7 @@ const Popover_1 = require("../../components/Popover");
 const styled_1 = require("../../components/styled");
 const Typography_1 = require("../../components/Typography");
 const EditOutlineMd_1 = require("../../icons/EditOutlineMd");
+const constants_1 = require("./constants");
 const getBackgroundColor = (theme, $isEdited, $isLoading) => {
     if ($isEdited) {
         return theme.palette.primary[100];
@@ -36,6 +37,10 @@ exports.DisplayValue = (0, styled_1.styled)(Typography_1.Typography, {
     cursor: ${({ $isLoading }) => ($isLoading ? 'default' : 'pointer')};
 
     text-decoration: ${({ $isLoading }) => $isLoading ? 'inherit' : 'underline'};
+
+    .${constants_1.editableTextClassnames.showIconOnHover} {
+      display: unset;
+    }
   }
 `;
 exports.StyledEditIcon = (0, styled_1.styled)(EditOutlineMd_1.EditOutlineMd, {
@@ -52,6 +57,10 @@ exports.StyledEditIcon = (0, styled_1.styled)(EditOutlineMd_1.EditOutlineMd, {
   margin-left: ${({ $iconPosition, theme }) => $iconPosition === 'right' ? theme.spacing(1) : ''};
 
   font-size: inherit;
+
+  &.${constants_1.editableTextClassnames.showIconOnHover} {
+    display: none;
+  }
 `;
 exports.StyledLoader = (0, styled_1.styled)(Loader_1.Loader, {
     shouldForwardProp: (prop) => !['$iconPosition'].includes(prop),

package/package.json

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