@astral/ui 4.47.1 → 4.48.1

package/components/DescriptionList/DescriptionList.d.ts

@@ -1,2 +1,2 @@
 import type { DescriptionListProps } from './types';
-export declare const DescriptionList: ({ items, variant: listVariant, title, direction, ...props }: DescriptionListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DescriptionList: ({ items, variant: listVariant, title, direction, alignNameWidth, leader, ...props }: DescriptionListProps) => import("react/jsx-runtime").JSX.Element;

package/components/DescriptionList/DescriptionList.js

@@ -4,11 +4,32 @@ import { Description } from '../Description';
 import { GuidTypography } from '../GuidTypography';
 import { Tag } from '../Tag';
 import { Typography } from '../Typography';
-import { useGroupedDescriptionItems } from './hooks';
+import { cva } from '../utils/cva';
+import { descriptionListClassnames } from './constants';
 import { DescriptionWrapper, ListWrapper, StyledDescriptionName, StyledDescriptionValue, Title, Wrapper, } from './styles';
+import { useLogic } from './useLogic';
 import { getTooltipProps } from './utils';
-export const DescriptionList = ({ items, variant: listVariant = 'default', title, direction, ...props }) => {
-    const descriptionItems = useGroupedDescriptionItems({ items });
+const descriptionList = cva(descriptionListClassnames.root, {
+    variants: {
+        variant: {
+            contained: descriptionListClassnames.contained,
+            default: descriptionListClassnames.default,
+        },
+    },
+});
+const descriptionItem = cva(descriptionListClassnames.item, {
+    variants: {
+        alignNameWidth: {
+            true: descriptionListClassnames.itemAlignNameWidth,
+        },
+    },
+});
+export const DescriptionList = ({ items, variant: listVariant = 'default', title, direction, alignNameWidth, leader, ...props }) => {
+    const { descriptionItems, descriptionListStyles } = useLogic({
+        items,
+        alignNameWidth,
+        leader,
+    });
     const render = useCallback((value, optionProps) => {
         const { renderValue, color, canCopy, copyPosition, variant, copyText } = optionProps;
         if (renderValue) {
@@ -25,19 +46,21 @@ export const DescriptionList = ({ items, variant: listVariant = 'default', title
     }, []);
     const renderTitle = () => {
         if (typeof title === 'string') {
-            return _jsx(Title, { variant: "h6", children: title });
+            return (_jsx(Title, { variant: "h6", className: descriptionListClassnames.title, children: title }));
         }
-        return _jsx(Title, { component: "div", children: title });
+        return (_jsx(Title, { component: "div", className: descriptionListClassnames.title, children: title }));
     };
     const renderNote = (note) => {
         if (typeof note === 'string') {
-            return (_jsx(Typography, { variant: "caption", color: "textSecondary", children: note }));
+            return (_jsx(Typography, { variant: "caption", color: "textSecondary", className: descriptionListClassnames.note, children: note }));
         }
         return note;
     };
     const renderItem = (value, name, options) => {
         const { nameMaxWidth, note, ...restOptions } = options || {};
-        return (_jsxs(DescriptionWrapper, { children: [_jsxs(Description, { direction: direction, ...props, component: "div", children: [_jsx(StyledDescriptionName, { "$nameMaxWidth": nameMaxWidth, "$direction": direction, children: name }), render(value, restOptions)] }), note && renderNote(note)] }, `${name}:${value}`));
+        return (_jsxs(DescriptionWrapper, { className: descriptionItem({
+                alignNameWidth: Boolean(alignNameWidth),
+            }), children: [_jsxs(Description, { direction: direction, leader: leader, ...props, component: "div", children: [_jsx(StyledDescriptionName, { "$nameMaxWidth": nameMaxWidth, "$direction": direction, children: name }), render(value, restOptions)] }), note && renderNote(note)] }, `${name}:${value}`));
     };
-    return (_jsxs(Wrapper, { "$variant": listVariant, children: [title && renderTitle(), descriptionItems.map((group, groupIndex) => (_jsx(ListWrapper, { "$direction": direction, "$hasDivider": groupIndex !== 0, "$variant": listVariant, children: group.map(({ name, value, options }) => renderItem(value, name, options)) }, groupIndex)))] }));
+    return (_jsxs(Wrapper, { className: descriptionList({ variant: listVariant }), style: descriptionListStyles, children: [title && renderTitle(), descriptionItems.map((group, groupIndex) => (_jsx(ListWrapper, { "$direction": direction, "$hasDivider": groupIndex !== 0, "$variant": listVariant, children: group.map(({ name, value, options }) => renderItem(value, name, options)) }, groupIndex)))] }));
 };

package/components/DescriptionList/constants.d.ts

@@ -0,0 +1,13 @@
+export declare const descriptionListVariantClassnames: {
+    contained: string;
+    default: string;
+};
+export declare const descriptionListClassnames: {
+    contained: string;
+    default: string;
+    root: string;
+    title: string;
+    item: string;
+    itemAlignNameWidth: string;
+    note: string;
+};

package/components/DescriptionList/constants.js

@@ -0,0 +1,13 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
+export const descriptionListVariantClassnames = {
+    contained: createUIKitClassname('description-list_variant-contained'),
+    default: createUIKitClassname('description-list_variant-default'),
+};
+export const descriptionListClassnames = {
+    root: createUIKitClassname('description-list'),
+    title: createUIKitClassname('description-list__title'),
+    item: createUIKitClassname('description-list__item'),
+    itemAlignNameWidth: createUIKitClassname('description-list__item_align-name-width'),
+    note: createUIKitClassname('description-list__note'),
+    ...descriptionListVariantClassnames,
+};

package/components/DescriptionList/styles.d.ts

@@ -11,8 +11,6 @@ export declare const StyledDescriptionName: import("../styled").StyledComponent<
 export declare const Wrapper: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & {
-    $variant: DescriptionListVariant;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
 export declare const ListWrapper: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;

package/components/DescriptionList/styles.js

@@ -1,6 +1,7 @@
-import { Description } from '../Description';
+import { Description, descriptionClassnames } from '../Description';
 import { styled } from '../styled';
 import { Typography } from '../Typography';
+import { descriptionListClassnames } from './constants';
 export const StyledDescriptionName = styled(Description.Name, {
     shouldForwardProp: (prop) => !['$nameMaxWidth', '$direction'].includes(prop),
 }) `
@@ -11,20 +12,17 @@ export const StyledDescriptionName = styled(Description.Name, {
     margin-bottom: ${({ theme, $direction }) => Object.is($direction, 'row') ? 0 : theme.spacing(1)};
   }
 `;
-export const Wrapper = styled('article', {
-    shouldForwardProp: (prop) => !['$variant'].includes(prop),
-}) `
+export const Wrapper = styled.article `
   display: grid;
 
-  padding: ${({ $variant, theme }) => $variant === 'contained' ? theme.spacing(4) : 0};
-
-  background-color: ${({ $variant, theme }) => $variant === 'contained'
-    ? theme.palette.background.default
-    : 'transparent'};
-  border: ${({ $variant, theme }) => $variant === 'contained'
-    ? `1px solid ${theme.palette.grey[300]}`
-    : 'unset'};
   border-radius: ${({ theme }) => theme.shape.small};
+
+  &.${descriptionListClassnames.contained} {
+    padding: ${({ theme }) => theme.spacing(4)};
+
+    background-color: ${({ theme }) => theme.palette.background.default};
+    border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  }
 `;
 export const ListWrapper = styled('dl', {
     shouldForwardProp: (prop) => !['$direction', '$hasDivider', '$variant'].includes(prop),
@@ -60,6 +58,31 @@ export const DescriptionWrapper = styled.div `
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(1)};
+
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    &.${descriptionListClassnames.itemAlignNameWidth} {
+      display: grid;
+      grid-template-columns: var(--name-desktop-width) 1fr;
+
+      & .${descriptionListClassnames.note} {
+        grid-column: 1 / -1;
+      }
+
+      & .${descriptionClassnames.root} {
+        display: grid;
+        grid-column: 1 / -1;
+        grid-template-columns: inherit;
+        gap: ${({ theme }) => theme.spacing(1)};
+
+        /* Причина игнора: прогрессивное улучшение */
+        /* stylelint-disable plugin/no-unsupported-browser-features */
+        @supports (grid-template-columns: subgrid) {
+          grid-template-columns: subgrid;
+        }
+        /* stylelint-enable plugin/no-unsupported-browser-features */
+      }
+    }
+  }
 `;
 export const Title = styled(Typography) `
   margin-bottom: ${({ theme }) => theme.spacing(3)};

package/components/DescriptionList/types.d.ts

@@ -37,4 +37,8 @@ export type DescriptionListProps = Pick<DescriptionProps, 'justifyContent' | 'le
      * Заголовок блока
      */
     title?: ReactNode;
+    /**
+     * Включает выравнивание колонок DescriptionList с указанной шириной для поля наименования.
+     */
+    alignNameWidth?: `${string}px`;
 };

package/components/DescriptionList/{hooks → useLogic/hooks}/useGroupedDescriptionItems/useGroupedDescriptionItems.d.ts

@@ -1,4 +1,4 @@
-import type { DescriptionListItem, DescriptionListProps } from '../../types';
+import type { DescriptionListItem, DescriptionListProps } from '../../../types';
 type UseNormalizedDescriptionItemsParams = Pick<DescriptionListProps, 'items'>;
 /**
  * Группирует элементы описания в логические секции для рендеринга.

package/components/DescriptionList/useLogic/index.d.ts

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

package/components/DescriptionList/useLogic/index.js

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

package/components/DescriptionList/useLogic/useLogic.d.ts

@@ -0,0 +1,8 @@
+import { type CSSProperties } from 'react';
+import type { DescriptionListProps } from '../types';
+type UseLogicParams = Pick<DescriptionListProps, 'items' | 'alignNameWidth' | 'leader'>;
+export declare const useLogic: ({ items, alignNameWidth, leader }: UseLogicParams) => {
+    descriptionItems: import("../types").DescriptionListItem[][];
+    descriptionListStyles: CSSProperties;
+};
+export {};

package/components/DescriptionList/useLogic/useLogic.js

@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+import { useGroupedDescriptionItems } from './hooks';
+export const useLogic = ({ items, alignNameWidth, leader }) => {
+    const descriptionItems = useGroupedDescriptionItems({ items });
+    const getDescriptionListStyles = () => {
+        if (!alignNameWidth) {
+            return {};
+        }
+        return { '--name-desktop-width': alignNameWidth };
+    };
+    useEffect(() => {
+        if (leader && alignNameWidth) {
+            // biome-ignore lint/suspicious/noConsole: Сообщение для интеграторов
+            console.error('DescriptionList: Параметры leader и alignNameWidth не могут быть использованы вместе');
+        }
+    }, [leader, alignNameWidth]);
+    return {
+        descriptionItems,
+        descriptionListStyles: getDescriptionListStyles(),
+    };
+};

package/components/PageHeader/HeaderContent/HeaderContent.js

@@ -14,5 +14,5 @@ export const HeaderContent = ({ backButton, description, subheader, breadcrumbs,
         }
         return (_jsx(BreadcrumbsWrapper, { children: Array.isArray(breadcrumbs) ? (_jsx(Breadcrumbs, { children: breadcrumbs })) : (breadcrumbs) }));
     };
-    return (_jsxs(_Fragment, { children: [renderBreadcrumbs(), _jsx(DesktopTitleWrapper, { children: _jsx(Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), _jsx(Description, { description: description, isLoading: isLoading }), actions && (_jsx(PageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", withCollapseOnLaptop: Boolean(filters), ...actions })), filters && (_jsx(FormFiltersProvider, { filtersClassName: pageHeaderClassnames.filters, quickFiltersClassName: pageHeaderClassnames.quickFilters, children: filters })), subheader && _jsx(PageSubheader, { children: subheader })] }));
+    return (_jsxs(_Fragment, { children: [renderBreadcrumbs(), _jsx(DesktopTitleWrapper, { children: _jsx(Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), _jsx(Description, { description: description, isLoading: isLoading }), actions && (_jsx(PageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", withCollapseOnLaptop: Boolean(filters), ...actions })), filters && (_jsx(FormFiltersProvider, { filtersClassName: pageHeaderClassnames.filters, quickFiltersClassName: pageHeaderClassnames.quickFilters, children: filters })), subheader && (_jsx(PageSubheader, { className: pageHeaderClassnames.subheader, children: subheader }))] }));
 };

package/components/PageHeader/HeaderContent/styles.js

@@ -17,6 +17,8 @@ export const PageSubheader = styled.div `
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     padding: ${({ theme }) => theme.spacing(0, 4, 4, 4)};
+
+    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
   }
 `;
 export const DesktopTitleWrapper = styled.div `

package/components/PageHeader/PageHeader.js

@@ -1,13 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { classNames } from '../utils/classNames';
+import { cva } from '../utils/cva';
 import { pageHeaderClassnames } from './constants';
 import { HeaderContent } from './HeaderContent';
 import { MobilePageActions } from './MobilePageActions';
 import { MobileTitleWrapper, Wrapper } from './styles';
 import { Title } from './Title';
 import { useLogic } from './useLogic';
+const mobilePageHeader = cva(pageHeaderClassnames.pageHeaderMobileTitle, {
+    variants: {
+        hasTitle: {
+            true: pageHeaderClassnames.hasTitle,
+        },
+        hasBackButton: {
+            true: pageHeaderClassnames.hasBackButton,
+        },
+    },
+});
 export const PageHeader = (props) => {
     const { title, description, subheader, breadcrumbs, actions, backButton, className, filters, } = props;
-    const { isLoading, mobileTitleActions, isShowMobileActions, mobileClassnames, } = useLogic(props);
-    return (_jsxs(_Fragment, { children: [_jsxs(MobileTitleWrapper, { className: mobileClassnames, children: [_jsx(Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), _jsx(Wrapper, { className: className, children: _jsx(HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, filters: filters, isLoading: isLoading }) }), isShowMobileActions && (_jsx(MobilePageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
+    const { isLoading, mobileTitleActions, isShowMobileActions } = useLogic(props);
+    return (_jsxs(_Fragment, { children: [_jsxs(MobileTitleWrapper, { className: mobilePageHeader({
+                    hasTitle: Boolean(title) || isLoading,
+                    hasBackButton: Boolean(backButton),
+                }), children: [_jsx(Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), _jsx(Wrapper, { className: classNames(pageHeaderClassnames.root, className), children: _jsx(HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, filters: filters, isLoading: isLoading }) }), isShowMobileActions && (_jsx(MobilePageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
 };

package/components/PageHeader/constants.d.ts

@@ -1,10 +1,13 @@
 export declare const pageHeaderClassnames: {
+    root: string;
     pageHeaderMobileTitle: string;
     pageHeaderActions: string;
     hasBackButton: string;
     hasTitle: string;
     filters: string;
+    subheader: string;
     quickFilters: string;
     hasFilters: string;
+    hasSubheader: string;
 };
 export declare const PAGE_HEADER_HEIGHT_MOBILE = "48px";

package/components/PageHeader/constants.js

@@ -1,11 +1,14 @@
 import { createUIKitClassname } from '../utils/createUIKitClassname';
 export const pageHeaderClassnames = {
+    root: createUIKitClassname('page-header'),
     pageHeaderMobileTitle: createUIKitClassname('page-header__mobile-title'),
     pageHeaderActions: createUIKitClassname('page-header__actions'),
     hasBackButton: createUIKitClassname('page-header_has-back-button'),
     hasTitle: createUIKitClassname('page-header_has-title'),
     filters: createUIKitClassname('page-header__filters'),
+    subheader: createUIKitClassname('page-header__subheader'),
     quickFilters: createUIKitClassname('page-header__quick-filters'),
     hasFilters: createUIKitClassname('page-header_has-filters'),
+    hasSubheader: createUIKitClassname('page-header_has-subheader'),
 };
 export const PAGE_HEADER_HEIGHT_MOBILE = '48px';

package/components/PageHeader/styles.js

@@ -69,10 +69,16 @@ export const MobileTitleWrapper = styled.div `
     
     background-color: ${({ theme }) => theme.palette.background.default};
 
-     &:not(.${pageHeaderClassnames.hasFilters}) {
+    /* Причина игнора: прогрессивное улучшение */
+    /* stylelint-disable plugin/no-unsupported-browser-features */
+    &:not(:has(+ .${pageHeaderClassnames.root} :is(
+      .${pageHeaderClassnames.filters},
+      .${pageHeaderClassnames.subheader}
+    ))) {
       border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
     }
-    
+    /* stylelint-enable plugin/no-unsupported-browser-features */
+
     &.${pageHeaderClassnames.hasTitle} {
       display: flex;
 

package/components/PageHeader/useLogic/useLogic.d.ts

@@ -1,10 +1,9 @@
 import { type ElementType } from 'react';
 import type { PageHeaderProps } from '../types';
 type UseLogicParams<TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType> = PageHeaderProps<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>;
-export declare const useLogic: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType>({ shouldUpdateDocumentTitle, title, actions, htmlTitle, backButton, filters, }: UseLogicParams<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>) => {
+export declare const useLogic: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType>({ shouldUpdateDocumentTitle, title, actions, htmlTitle, }: UseLogicParams<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>) => {
     isShowMobileActions: boolean | undefined;
     isLoading: boolean | undefined;
     mobileTitleActions: import("react").ReactNode;
-    mobileClassnames: string;
 };
 export {};

package/components/PageHeader/useLogic/useLogic.js

@@ -1,22 +1,14 @@
-import { useContext, useMemo } from 'react';
+import { useContext } from 'react';
 import { PageContext } from '../../PageContext';
-import { classNames } from '../../utils/classNames';
-import { pageHeaderClassnames } from '../constants';
 import { usePageTitle } from '../hooks/usePageTitle';
-export const useLogic = ({ shouldUpdateDocumentTitle, title, actions, htmlTitle, backButton, filters, }) => {
+export const useLogic = ({ shouldUpdateDocumentTitle, title, actions, htmlTitle, }) => {
     //Переопределение Html title на title из параметров
     usePageTitle({ shouldUpdateDocumentTitle, htmlTitle, title });
     const { mobileTitleActions, isLoading } = useContext(PageContext);
     const isShowMobileActions = actions && !mobileTitleActions;
-    const mobileClassnames = useMemo(() => classNames(pageHeaderClassnames.pageHeaderMobileTitle, {
-        [pageHeaderClassnames.hasTitle]: Boolean(title) || isLoading,
-        [pageHeaderClassnames.hasBackButton]: Boolean(backButton),
-        [pageHeaderClassnames.hasFilters]: Boolean(filters),
-    }), [title, backButton, isLoading]);
     return {
         isShowMobileActions,
         isLoading,
         mobileTitleActions,
-        mobileClassnames,
     };
 };

package/node/components/DescriptionList/DescriptionList.d.ts

@@ -1,2 +1,2 @@
 import type { DescriptionListProps } from './types';
-export declare const DescriptionList: ({ items, variant: listVariant, title, direction, ...props }: DescriptionListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DescriptionList: ({ items, variant: listVariant, title, direction, alignNameWidth, leader, ...props }: DescriptionListProps) => import("react/jsx-runtime").JSX.Element;

package/node/components/DescriptionList/DescriptionList.js

@@ -7,11 +7,32 @@ const Description_1 = require("../Description");
 const GuidTypography_1 = require("../GuidTypography");
 const Tag_1 = require("../Tag");
 const Typography_1 = require("../Typography");
-const hooks_1 = require("./hooks");
+const cva_1 = require("../utils/cva");
+const constants_1 = require("./constants");
 const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
 const utils_1 = require("./utils");
-const DescriptionList = ({ items, variant: listVariant = 'default', title, direction, ...props }) => {
-    const descriptionItems = (0, hooks_1.useGroupedDescriptionItems)({ items });
+const descriptionList = (0, cva_1.cva)(constants_1.descriptionListClassnames.root, {
+    variants: {
+        variant: {
+            contained: constants_1.descriptionListClassnames.contained,
+            default: constants_1.descriptionListClassnames.default,
+        },
+    },
+});
+const descriptionItem = (0, cva_1.cva)(constants_1.descriptionListClassnames.item, {
+    variants: {
+        alignNameWidth: {
+            true: constants_1.descriptionListClassnames.itemAlignNameWidth,
+        },
+    },
+});
+const DescriptionList = ({ items, variant: listVariant = 'default', title, direction, alignNameWidth, leader, ...props }) => {
+    const { descriptionItems, descriptionListStyles } = (0, useLogic_1.useLogic)({
+        items,
+        alignNameWidth,
+        leader,
+    });
     const render = (0, react_1.useCallback)((value, optionProps) => {
         const { renderValue, color, canCopy, copyPosition, variant, copyText } = optionProps;
         if (renderValue) {
@@ -28,20 +49,22 @@ const DescriptionList = ({ items, variant: listVariant = 'default', title, direc
     }, []);
     const renderTitle = () => {
         if (typeof title === 'string') {
-            return (0, jsx_runtime_1.jsx)(styles_1.Title, { variant: "h6", children: title });
+            return ((0, jsx_runtime_1.jsx)(styles_1.Title, { variant: "h6", className: constants_1.descriptionListClassnames.title, children: title }));
         }
-        return (0, jsx_runtime_1.jsx)(styles_1.Title, { component: "div", children: title });
+        return ((0, jsx_runtime_1.jsx)(styles_1.Title, { component: "div", className: constants_1.descriptionListClassnames.title, children: title }));
     };
     const renderNote = (note) => {
         if (typeof note === 'string') {
-            return ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "textSecondary", children: note }));
+            return ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "textSecondary", className: constants_1.descriptionListClassnames.note, children: note }));
         }
         return note;
     };
     const renderItem = (value, name, options) => {
         const { nameMaxWidth, note, ...restOptions } = options || {};
-        return ((0, jsx_runtime_1.jsxs)(styles_1.DescriptionWrapper, { children: [(0, jsx_runtime_1.jsxs)(Description_1.Description, { direction: direction, ...props, component: "div", children: [(0, jsx_runtime_1.jsx)(styles_1.StyledDescriptionName, { "$nameMaxWidth": nameMaxWidth, "$direction": direction, children: name }), render(value, restOptions)] }), note && renderNote(note)] }, `${name}:${value}`));
+        return ((0, jsx_runtime_1.jsxs)(styles_1.DescriptionWrapper, { className: descriptionItem({
+                alignNameWidth: Boolean(alignNameWidth),
+            }), children: [(0, jsx_runtime_1.jsxs)(Description_1.Description, { direction: direction, leader: leader, ...props, component: "div", children: [(0, jsx_runtime_1.jsx)(styles_1.StyledDescriptionName, { "$nameMaxWidth": nameMaxWidth, "$direction": direction, children: name }), render(value, restOptions)] }), note && renderNote(note)] }, `${name}:${value}`));
     };
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$variant": listVariant, children: [title && renderTitle(), descriptionItems.map((group, groupIndex) => ((0, jsx_runtime_1.jsx)(styles_1.ListWrapper, { "$direction": direction, "$hasDivider": groupIndex !== 0, "$variant": listVariant, children: group.map(({ name, value, options }) => renderItem(value, name, options)) }, groupIndex)))] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: descriptionList({ variant: listVariant }), style: descriptionListStyles, children: [title && renderTitle(), descriptionItems.map((group, groupIndex) => ((0, jsx_runtime_1.jsx)(styles_1.ListWrapper, { "$direction": direction, "$hasDivider": groupIndex !== 0, "$variant": listVariant, children: group.map(({ name, value, options }) => renderItem(value, name, options)) }, groupIndex)))] }));
 };
 exports.DescriptionList = DescriptionList;

package/node/components/DescriptionList/constants.d.ts

@@ -0,0 +1,13 @@
+export declare const descriptionListVariantClassnames: {
+    contained: string;
+    default: string;
+};
+export declare const descriptionListClassnames: {
+    contained: string;
+    default: string;
+    root: string;
+    title: string;
+    item: string;
+    itemAlignNameWidth: string;
+    note: string;
+};

package/node/components/DescriptionList/constants.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.descriptionListClassnames = exports.descriptionListVariantClassnames = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
+exports.descriptionListVariantClassnames = {
+    contained: (0, createUIKitClassname_1.createUIKitClassname)('description-list_variant-contained'),
+    default: (0, createUIKitClassname_1.createUIKitClassname)('description-list_variant-default'),
+};
+exports.descriptionListClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('description-list'),
+    title: (0, createUIKitClassname_1.createUIKitClassname)('description-list__title'),
+    item: (0, createUIKitClassname_1.createUIKitClassname)('description-list__item'),
+    itemAlignNameWidth: (0, createUIKitClassname_1.createUIKitClassname)('description-list__item_align-name-width'),
+    note: (0, createUIKitClassname_1.createUIKitClassname)('description-list__note'),
+    ...exports.descriptionListVariantClassnames,
+};

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

@@ -11,8 +11,6 @@ export declare const StyledDescriptionName: import("@emotion/styled/dist/declara
 export declare const Wrapper: 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;
-} & {
-    $variant: DescriptionListVariant;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
 export declare const ListWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;

package/node/components/DescriptionList/styles.js

@@ -4,6 +4,7 @@ exports.Title = exports.DescriptionWrapper = exports.StyledDescriptionValue = ex
 const Description_1 = require("../Description");
 const styled_1 = require("../styled");
 const Typography_1 = require("../Typography");
+const constants_1 = require("./constants");
 exports.StyledDescriptionName = (0, styled_1.styled)(Description_1.Description.Name, {
     shouldForwardProp: (prop) => !['$nameMaxWidth', '$direction'].includes(prop),
 }) `
@@ -14,20 +15,17 @@ exports.StyledDescriptionName = (0, styled_1.styled)(Description_1.Description.N
     margin-bottom: ${({ theme, $direction }) => Object.is($direction, 'row') ? 0 : theme.spacing(1)};
   }
 `;
-exports.Wrapper = (0, styled_1.styled)('article', {
-    shouldForwardProp: (prop) => !['$variant'].includes(prop),
-}) `
+exports.Wrapper = styled_1.styled.article `
   display: grid;
 
-  padding: ${({ $variant, theme }) => $variant === 'contained' ? theme.spacing(4) : 0};
-
-  background-color: ${({ $variant, theme }) => $variant === 'contained'
-    ? theme.palette.background.default
-    : 'transparent'};
-  border: ${({ $variant, theme }) => $variant === 'contained'
-    ? `1px solid ${theme.palette.grey[300]}`
-    : 'unset'};
   border-radius: ${({ theme }) => theme.shape.small};
+
+  &.${constants_1.descriptionListClassnames.contained} {
+    padding: ${({ theme }) => theme.spacing(4)};
+
+    background-color: ${({ theme }) => theme.palette.background.default};
+    border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  }
 `;
 exports.ListWrapper = (0, styled_1.styled)('dl', {
     shouldForwardProp: (prop) => !['$direction', '$hasDivider', '$variant'].includes(prop),
@@ -63,6 +61,31 @@ exports.DescriptionWrapper = styled_1.styled.div `
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(1)};
+
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    &.${constants_1.descriptionListClassnames.itemAlignNameWidth} {
+      display: grid;
+      grid-template-columns: var(--name-desktop-width) 1fr;
+
+      & .${constants_1.descriptionListClassnames.note} {
+        grid-column: 1 / -1;
+      }
+
+      & .${Description_1.descriptionClassnames.root} {
+        display: grid;
+        grid-column: 1 / -1;
+        grid-template-columns: inherit;
+        gap: ${({ theme }) => theme.spacing(1)};
+
+        /* Причина игнора: прогрессивное улучшение */
+        /* stylelint-disable plugin/no-unsupported-browser-features */
+        @supports (grid-template-columns: subgrid) {
+          grid-template-columns: subgrid;
+        }
+        /* stylelint-enable plugin/no-unsupported-browser-features */
+      }
+    }
+  }
 `;
 exports.Title = (0, styled_1.styled)(Typography_1.Typography) `
   margin-bottom: ${({ theme }) => theme.spacing(3)};

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

@@ -37,4 +37,8 @@ export type DescriptionListProps = Pick<DescriptionProps, 'justifyContent' | 'le
      * Заголовок блока
      */
     title?: ReactNode;
+    /**
+     * Включает выравнивание колонок DescriptionList с указанной шириной для поля наименования.
+     */
+    alignNameWidth?: `${string}px`;
 };

package/node/components/DescriptionList/{hooks → useLogic/hooks}/useGroupedDescriptionItems/useGroupedDescriptionItems.d.ts

@@ -1,4 +1,4 @@
-import type { DescriptionListItem, DescriptionListProps } from '../../types';
+import type { DescriptionListItem, DescriptionListProps } from '../../../types';
 type UseNormalizedDescriptionItemsParams = Pick<DescriptionListProps, 'items'>;
 /**
  * Группирует элементы описания в логические секции для рендеринга.

package/node/components/DescriptionList/useLogic/index.d.ts

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

package/node/components/DescriptionList/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/DescriptionList/useLogic/useLogic.d.ts

@@ -0,0 +1,8 @@
+import { type CSSProperties } from 'react';
+import type { DescriptionListProps } from '../types';
+type UseLogicParams = Pick<DescriptionListProps, 'items' | 'alignNameWidth' | 'leader'>;
+export declare const useLogic: ({ items, alignNameWidth, leader }: UseLogicParams) => {
+    descriptionItems: import("../types").DescriptionListItem[][];
+    descriptionListStyles: CSSProperties;
+};
+export {};

package/node/components/DescriptionList/useLogic/useLogic.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const hooks_1 = require("./hooks");
+const useLogic = ({ items, alignNameWidth, leader }) => {
+    const descriptionItems = (0, hooks_1.useGroupedDescriptionItems)({ items });
+    const getDescriptionListStyles = () => {
+        if (!alignNameWidth) {
+            return {};
+        }
+        return { '--name-desktop-width': alignNameWidth };
+    };
+    (0, react_1.useEffect)(() => {
+        if (leader && alignNameWidth) {
+            // biome-ignore lint/suspicious/noConsole: Сообщение для интеграторов
+            console.error('DescriptionList: Параметры leader и alignNameWidth не могут быть использованы вместе');
+        }
+    }, [leader, alignNameWidth]);
+    return {
+        descriptionItems,
+        descriptionListStyles: getDescriptionListStyles(),
+    };
+};
+exports.useLogic = useLogic;

package/node/components/PageHeader/HeaderContent/HeaderContent.js

@@ -17,6 +17,6 @@ const HeaderContent = ({ backButton, description, subheader, breadcrumbs, action
         }
         return ((0, jsx_runtime_1.jsx)(styles_1.BreadcrumbsWrapper, { children: Array.isArray(breadcrumbs) ? ((0, jsx_runtime_1.jsx)(Breadcrumbs_1.Breadcrumbs, { children: breadcrumbs })) : (breadcrumbs) }));
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderBreadcrumbs(), (0, jsx_runtime_1.jsx)(styles_1.DesktopTitleWrapper, { children: (0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), (0, jsx_runtime_1.jsx)(Description_1.Description, { description: description, isLoading: isLoading }), actions && ((0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { className: (0, classNames_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", withCollapseOnLaptop: Boolean(filters), ...actions })), filters && ((0, jsx_runtime_1.jsx)(FormFiltersProvider_1.FormFiltersProvider, { filtersClassName: constants_1.pageHeaderClassnames.filters, quickFiltersClassName: constants_1.pageHeaderClassnames.quickFilters, children: filters })), subheader && (0, jsx_runtime_1.jsx)(styles_1.PageSubheader, { children: subheader })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderBreadcrumbs(), (0, jsx_runtime_1.jsx)(styles_1.DesktopTitleWrapper, { children: (0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), (0, jsx_runtime_1.jsx)(Description_1.Description, { description: description, isLoading: isLoading }), actions && ((0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { className: (0, classNames_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", withCollapseOnLaptop: Boolean(filters), ...actions })), filters && ((0, jsx_runtime_1.jsx)(FormFiltersProvider_1.FormFiltersProvider, { filtersClassName: constants_1.pageHeaderClassnames.filters, quickFiltersClassName: constants_1.pageHeaderClassnames.quickFilters, children: filters })), subheader && ((0, jsx_runtime_1.jsx)(styles_1.PageSubheader, { className: constants_1.pageHeaderClassnames.subheader, children: subheader }))] }));
 };
 exports.HeaderContent = HeaderContent;

package/node/components/PageHeader/HeaderContent/styles.js

@@ -20,6 +20,8 @@ exports.PageSubheader = styled_1.styled.div `
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     padding: ${({ theme }) => theme.spacing(0, 4, 4, 4)};
+
+    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
   }
 `;
 exports.DesktopTitleWrapper = styled_1.styled.div `

package/node/components/PageHeader/PageHeader.js

@@ -3,15 +3,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classNames_1 = require("../utils/classNames");
+const cva_1 = require("../utils/cva");
 const constants_1 = require("./constants");
 const HeaderContent_1 = require("./HeaderContent");
 const MobilePageActions_1 = require("./MobilePageActions");
 const styles_1 = require("./styles");
 const Title_1 = require("./Title");
 const useLogic_1 = require("./useLogic");
+const mobilePageHeader = (0, cva_1.cva)(constants_1.pageHeaderClassnames.pageHeaderMobileTitle, {
+    variants: {
+        hasTitle: {
+            true: constants_1.pageHeaderClassnames.hasTitle,
+        },
+        hasBackButton: {
+            true: constants_1.pageHeaderClassnames.hasBackButton,
+        },
+    },
+});
 const PageHeader = (props) => {
     const { title, description, subheader, breadcrumbs, actions, backButton, className, filters, } = props;
-    const { isLoading, mobileTitleActions, isShowMobileActions, mobileClassnames, } = (0, useLogic_1.useLogic)(props);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.MobileTitleWrapper, { className: mobileClassnames, children: [(0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: className, children: (0, jsx_runtime_1.jsx)(HeaderContent_1.HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, filters: filters, isLoading: isLoading }) }), isShowMobileActions && ((0, jsx_runtime_1.jsx)(MobilePageActions_1.MobilePageActions, { className: (0, classNames_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
+    const { isLoading, mobileTitleActions, isShowMobileActions } = (0, useLogic_1.useLogic)(props);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.MobileTitleWrapper, { className: mobilePageHeader({
+                    hasTitle: Boolean(title) || isLoading,
+                    hasBackButton: Boolean(backButton),
+                }), children: [(0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(constants_1.pageHeaderClassnames.root, className), children: (0, jsx_runtime_1.jsx)(HeaderContent_1.HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, filters: filters, isLoading: isLoading }) }), isShowMobileActions && ((0, jsx_runtime_1.jsx)(MobilePageActions_1.MobilePageActions, { className: (0, classNames_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
 };
 exports.PageHeader = PageHeader;

package/node/components/PageHeader/constants.d.ts

@@ -1,10 +1,13 @@
 export declare const pageHeaderClassnames: {
+    root: string;
     pageHeaderMobileTitle: string;
     pageHeaderActions: string;
     hasBackButton: string;
     hasTitle: string;
     filters: string;
+    subheader: string;
     quickFilters: string;
     hasFilters: string;
+    hasSubheader: string;
 };
 export declare const PAGE_HEADER_HEIGHT_MOBILE = "48px";

package/node/components/PageHeader/constants.js

@@ -3,12 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PAGE_HEADER_HEIGHT_MOBILE = exports.pageHeaderClassnames = void 0;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.pageHeaderClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('page-header'),
     pageHeaderMobileTitle: (0, createUIKitClassname_1.createUIKitClassname)('page-header__mobile-title'),
     pageHeaderActions: (0, createUIKitClassname_1.createUIKitClassname)('page-header__actions'),
     hasBackButton: (0, createUIKitClassname_1.createUIKitClassname)('page-header_has-back-button'),
     hasTitle: (0, createUIKitClassname_1.createUIKitClassname)('page-header_has-title'),
     filters: (0, createUIKitClassname_1.createUIKitClassname)('page-header__filters'),
+    subheader: (0, createUIKitClassname_1.createUIKitClassname)('page-header__subheader'),
     quickFilters: (0, createUIKitClassname_1.createUIKitClassname)('page-header__quick-filters'),
     hasFilters: (0, createUIKitClassname_1.createUIKitClassname)('page-header_has-filters'),
+    hasSubheader: (0, createUIKitClassname_1.createUIKitClassname)('page-header_has-subheader'),
 };
 exports.PAGE_HEADER_HEIGHT_MOBILE = '48px';

package/node/components/PageHeader/styles.js

@@ -72,10 +72,16 @@ exports.MobileTitleWrapper = styled_1.styled.div `
     
     background-color: ${({ theme }) => theme.palette.background.default};
 
-     &:not(.${constants_1.pageHeaderClassnames.hasFilters}) {
+    /* Причина игнора: прогрессивное улучшение */
+    /* stylelint-disable plugin/no-unsupported-browser-features */
+    &:not(:has(+ .${constants_1.pageHeaderClassnames.root} :is(
+      .${constants_1.pageHeaderClassnames.filters},
+      .${constants_1.pageHeaderClassnames.subheader}
+    ))) {
       border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
     }
-    
+    /* stylelint-enable plugin/no-unsupported-browser-features */
+
     &.${constants_1.pageHeaderClassnames.hasTitle} {
       display: flex;
 

package/node/components/PageHeader/useLogic/useLogic.d.ts

@@ -1,10 +1,9 @@
 import { type ElementType } from 'react';
 import type { PageHeaderProps } from '../types';
 type UseLogicParams<TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType> = PageHeaderProps<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>;
-export declare const useLogic: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType>({ shouldUpdateDocumentTitle, title, actions, htmlTitle, backButton, filters, }: UseLogicParams<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>) => {
+export declare const useLogic: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType>({ shouldUpdateDocumentTitle, title, actions, htmlTitle, }: UseLogicParams<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>) => {
     isShowMobileActions: boolean | undefined;
     isLoading: boolean | undefined;
     mobileTitleActions: import("react").ReactNode;
-    mobileClassnames: string;
 };
 export {};

package/node/components/PageHeader/useLogic/useLogic.js

@@ -3,24 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const PageContext_1 = require("../../PageContext");
-const classNames_1 = require("../../utils/classNames");
-const constants_1 = require("../constants");
 const usePageTitle_1 = require("../hooks/usePageTitle");
-const useLogic = ({ shouldUpdateDocumentTitle, title, actions, htmlTitle, backButton, filters, }) => {
+const useLogic = ({ shouldUpdateDocumentTitle, title, actions, htmlTitle, }) => {
     //Переопределение Html title на title из параметров
     (0, usePageTitle_1.usePageTitle)({ shouldUpdateDocumentTitle, htmlTitle, title });
     const { mobileTitleActions, isLoading } = (0, react_1.useContext)(PageContext_1.PageContext);
     const isShowMobileActions = actions && !mobileTitleActions;
-    const mobileClassnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderMobileTitle, {
-        [constants_1.pageHeaderClassnames.hasTitle]: Boolean(title) || isLoading,
-        [constants_1.pageHeaderClassnames.hasBackButton]: Boolean(backButton),
-        [constants_1.pageHeaderClassnames.hasFilters]: Boolean(filters),
-    }), [title, backButton, isLoading]);
     return {
         isShowMobileActions,
         isLoading,
         mobileTitleActions,
-        mobileClassnames,
     };
 };
 exports.useLogic = useLogic;

package/package.json

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