@astral/ui 4.84.0 → 4.86.0

package/node/components/NewPopover/useLogic/useLogic.js

@@ -8,8 +8,10 @@ const useFocusTrapEffect_1 = require("../../useFocusTrapEffect");
 const usePopoverAnimation_1 = require("../../usePopoverAnimation");
 const useViewportType_1 = require("../../useViewportType");
 const constants_1 = require("../constants");
-const utils_1 = require("../utils");
-const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, }) => {
+const getArrowPadding_1 = require("./utils/getArrowPadding");
+const getPopoverCssVars_1 = require("./utils/getPopoverCssVars");
+const resolveAnchorNode_1 = require("./utils/resolveAnchorNode");
+const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, disableMobileDrawer, }) => {
     const containerRef = (0, react_1.useRef)(null);
     const [isContainerMounted, setIsContainerMounted] = (0, react_1.useState)(false);
     const [arrowElement, setArrowElement] = (0, react_1.useState)(null);
@@ -21,8 +23,10 @@ const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, }) =>
     const isControlled = isOpen !== undefined;
     const { isMobile } = (0, useViewportType_1.useViewportType)();
     const { shouldRender, handleAnimationEnd } = (0, usePopoverAnimation_1.usePopoverAnimation)(isOpened);
-    const isEffectActive = !isMobile && isOpened && isContainerMounted;
-    const anchorNode = (0, react_1.useMemo)(() => (0, utils_1.resolveAnchorNode)(anchorEl), [anchorEl]);
+    const animatedWrapperStyle = (0, getPopoverCssVars_1.getPopoverCssVars)();
+    const shouldRenderDrawer = isMobile && !disableMobileDrawer;
+    const isPopoverActive = !shouldRenderDrawer && isOpened && isContainerMounted;
+    const anchorNode = (0, react_1.useMemo)(() => (0, resolveAnchorNode_1.resolveAnchorNode)(anchorEl), [anchorEl]);
     const excludeNodes = (0, react_1.useMemo)(() => [anchorNode], [anchorNode]);
     const handleClose = (event) => {
         onClose?.(event);
@@ -30,18 +34,18 @@ const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, }) =>
     (0, useClickAwayEffect_1.useClickAwayEffect)({
         ref: containerRef,
         onClickAway: handleClose,
-        isActive: isEffectActive && !isControlled,
+        isActive: isPopoverActive && !isControlled,
         preventBubbling: true,
         excludeNodes,
     });
     (0, useEscapeClickEffect_1.useEscapeClickEffect)({
         onEscape: handleClose,
-        isActive: isEffectActive,
+        isActive: isPopoverActive,
         preventBubbling: true,
     });
     (0, useFocusTrapEffect_1.useFocusTrapEffect)({
         ref: containerRef,
-        isActive: isEffectActive && !disableAutoFocus,
+        isActive: isPopoverActive && !disableAutoFocus,
         returnFocusOnDeactivate: true,
         escapeDeactivates: false,
         clickOutsideDeactivates: false,
@@ -54,11 +58,15 @@ const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, }) =>
         }
         return [
             ...constants_1.DEFAULT_MODIFIERS,
-            { name: 'arrow', enabled: true, options: { element: arrowElement } },
+            {
+                name: 'arrow',
+                enabled: true,
+                options: { element: arrowElement, padding: getArrowPadding_1.getArrowPadding },
+            },
         ];
     }, [hasArrow, arrowElement]);
     return {
-        isMobile,
+        shouldRenderDrawer,
         isOpened,
         shouldRender,
         handleAnimationEnd,
@@ -67,6 +75,7 @@ const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, }) =>
         arrowElement,
         setArrowElement,
         mergedModifiers,
+        animatedWrapperStyle,
     };
 };
 exports.useLogic = useLogic;

package/node/components/NewPopover/useLogic/utils/getArrowPadding/getArrowPadding.d.ts

@@ -0,0 +1,14 @@
+import { type NewPopoverPlacement } from '../../../types';
+type ArrowPaddingArgs = {
+    /** Прямоугольник поповера от Popper (нужны только габариты). */
+    popper: {
+        width: number;
+        height: number;
+    };
+    placement: NewPopoverPlacement;
+};
+/**
+ * Фиксированный padding отобразил бы стрелку на скруглённый угол
+ */
+export declare const getArrowPadding: ({ popper, placement }: ArrowPaddingArgs) => number;
+export {};

package/node/components/NewPopover/useLogic/utils/getArrowPadding/getArrowPadding.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getArrowPadding = void 0;
+const constants_1 = require("../../../constants");
+/**
+ * Фиксированный padding отобразил бы стрелку на скруглённый угол
+ */
+const getArrowPadding = ({ popper, placement }) => {
+    const isVertical = placement.startsWith('left') || placement.startsWith('right');
+    const side = isVertical ? popper.height : popper.width;
+    const free = Math.max(0, side - constants_1.ARROW_BASE);
+    const centerPadding = free / 2;
+    const desiredPadding = Math.min(constants_1.ARROW_PADDING, Math.max(constants_1.ARROW_MIN_PADDING, (free - constants_1.ARROW_MIN_TRACK) / 2));
+    return Math.min(centerPadding, desiredPadding);
+};
+exports.getArrowPadding = getArrowPadding;

package/node/components/NewPopover/useLogic/utils/getArrowPadding/index.d.ts

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

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

package/node/components/NewPopover/useLogic/utils/getPopoverCssVars/getPopoverCssVars.d.ts

@@ -0,0 +1,2 @@
+import type { CSSProperties } from 'react';
+export declare const getPopoverCssVars: () => CSSProperties;

package/node/components/NewPopover/useLogic/utils/getPopoverCssVars/getPopoverCssVars.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPopoverCssVars = void 0;
+const getPopoverCssVars = () => ({
+    // Единая тень на весь силуэт (поповер + уголок стрелки).
+    // Эквивалент elevation[200], переведённого в drop-shadow(): box-shadow
+    // не умеет обводить единый силуэт поповера со стрелкой.
+    '--drop-shadow': 'drop-shadow(0px 0px 1px #072D574F) drop-shadow(0px 3px 5px #072D5733)',
+});
+exports.getPopoverCssVars = getPopoverCssVars;

package/node/components/NewPopover/useLogic/utils/getPopoverCssVars/index.d.ts

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

package/node/components/NewPopover/useLogic/utils/getPopoverCssVars/index.js

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

package/node/components/NewPopover/useLogic/utils/resolveAnchorNode/resolveAnchorNode.d.ts

@@ -0,0 +1,6 @@
+import { type NewPopoverAnchorEl } from '../../../types';
+/**
+ * Приводит anchorEl к DOM-ноде (virtual-anchor → null), чтобы исключить якорь из
+ * клика-вне — иначе клик по нему закрывал бы поповер.
+ */
+export declare const resolveAnchorNode: (anchorEl: NewPopoverAnchorEl | undefined) => Node | null;

package/node/components/NewPopover/{utils → useLogic/utils/resolveAnchorNode}/resolveAnchorNode.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.resolveAnchorNode = void 0;
 /**
- * Резолвит anchorEl в DOM-ноду, если это возможно.
- * Для virtual-элементов вернёт null.
+ * Приводит anchorEl к DOM-ноде (virtual-anchor → null), чтобы исключить якорь из
+ * клика-вне — иначе клик по нему закрывал бы поповер.
  */
 const resolveAnchorNode = (anchorEl) => {
     const value = typeof anchorEl === 'function' ? anchorEl() : anchorEl;

package/node/components/Onboarding/ui/StepStrategy/steps/HighlightStep/HighlightStep.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HighlightStep = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const CrossOutlineMd_1 = require("../../../../../../icons/CrossOutlineMd");
 const Typography_1 = require("../../../../../Typography");
 const StepFooter_1 = require("../StepFooter");
 const styles_1 = require("./styles");
@@ -18,6 +17,6 @@ const HighlightStep = ({ activeStep, isClosing, geometry, }) => {
     if (!anchorEl) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: shouldShowPopover && ((0, jsx_runtime_1.jsx)(styles_1.StepPopover, { isOpen: isOpen, disableAutoFocus: true, hasArrow: true, anchorEl: anchorEl, placement: step.position, children: (0, jsx_runtime_1.jsxs)(styles_1.PopoverBody, { ref: setPopoverNode, tabIndex: -1, children: [(0, jsx_runtime_1.jsx)(styles_1.CloseButton, { variant: "text", onClick: handleClose, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) }), (0, jsx_runtime_1.jsxs)(styles_1.Content, { children: [step.title && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { component: "div", variant: "h5", children: step.title })), step.content && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { component: "div", variant: "body1", color: "grey", colorIntensity: "900", children: step.content }))] }), (0, jsx_runtime_1.jsx)(StepFooter_1.StepFooter, { activeStep: activeStep })] }) })) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: shouldShowPopover && ((0, jsx_runtime_1.jsx)(styles_1.StepPopover, { variant: "light", isOpen: isOpen, disableAutoFocus: true, anchorEl: anchorEl, placement: step.position, onClose: handleClose, contentRef: setPopoverNode, title: step.title, action: (0, jsx_runtime_1.jsx)(StepFooter_1.StepFooter, { activeStep: activeStep }), children: step.content && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { component: "div", variant: "body1", color: "grey", colorIntensity: "900", children: step.content })) })) }));
 };
 exports.HighlightStep = HighlightStep;

package/node/components/Onboarding/ui/StepStrategy/steps/HighlightStep/styles.d.ts

@@ -1,25 +1,9 @@
 /// <reference types="react" />
-/**
- * Popover шага, z-index над overlay, быстрое закрытие.
- */
-export declare const StepPopover: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../../../../NewPopover").NewPopoverProps & {
+export declare const StepPopover: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../../../../NewPopover").NewPopoverProps, "title" | "hasArrow" | "disableMobileDrawer"> & {
+    variant?: import("../../../../../HintPopover").HintPopoverVariant | undefined;
+    title?: import("react").ReactNode;
+    action?: import("react").ReactNode;
+    contentRef?: import("react").Ref<HTMLDivElement> | undefined;
+} & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const PopoverBody: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CloseButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
-    variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
-    loading?: boolean | undefined;
-    color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
-    component?: import("react").ElementType | undefined;
-    selected?: boolean | undefined;
-    size?: "large" | "medium" | undefined;
-} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
-export declare const Content: 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/Onboarding/ui/StepStrategy/steps/HighlightStep/styles.js

@@ -1,59 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Content = exports.CloseButton = exports.PopoverBody = exports.StepPopover = void 0;
-const IconButton_1 = require("../../../../../IconButton");
-const NewPopover_1 = require("../../../../../NewPopover");
+exports.StepPopover = void 0;
+const HintPopover_1 = require("../../../../../HintPopover");
 const constants_1 = require("../../../../../NewPopover/constants");
 const styled_1 = require("../../../../../styled");
 const constants_2 = require("../../../../constants");
-/**
- * Popover шага, z-index над overlay, быстрое закрытие.
- */
-exports.StepPopover = (0, styled_1.styled)(NewPopover_1.NewPopover) `
+exports.StepPopover = (0, styled_1.styled)(HintPopover_1.HintPopover) `
   && {
     z-index: ${({ theme }) => theme.zIndex.tooltip + constants_2.ONBOARDING_Z_INDEX_OFFSET.popover};
   }
-  
-  .${constants_1.popoverClassnames.innerContainer} {
-    border-radius: calc(${({ theme }) => theme.shape.medium} * 2);
-  }
 
   .${constants_1.popoverClassnames.animatedWrapper}:not(.${constants_1.popoverClassnames.animatedWrapperOpen}) {
     animation-duration: ${({ theme }) => theme.transitions.duration.shortest}ms;
   }
 `;
-exports.PopoverBody = styled_1.styled.div `
-  position: relative;
-
-  width: 400px;
-  padding: ${({ theme }) => theme.spacing(6)};
-
-  border-radius: calc(${({ theme }) => theme.shape.medium} * 2);
-
-  /* Фокус-трап ставит фокус на контейнер, браузерную рамку убираем. */
-  &:focus {
-    outline: none;
-  }
-`;
-exports.CloseButton = (0, styled_1.styled)(IconButton_1.IconButton) `
-  position: absolute;
-  top: ${({ theme }) => theme.spacing(6)};
-  right: ${({ theme }) => theme.spacing(6)};
-`;
-exports.Content = styled_1.styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: ${({ theme }) => theme.spacing(4)};
-
-  margin-bottom: ${({ theme }) => theme.spacing(6)};
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  /* Резерв справа под крестик — только у верхнего элемента (заголовок, а если
-     его нет — текст) */
-  & > *:first-of-type {
-    padding-right: ${({ theme }) => theme.spacing(10)};
-  }
-`;

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

@@ -1,5 +1,5 @@
 import { type ElementType } from 'react';
 import type { PageHeaderProps } from '../types';
-type HeaderContentProps<TMainActionComponent extends ElementType, TSecondaryActionComponent extends ElementType, TBackButtonComponent extends ElementType> = Pick<PageHeaderProps<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>, 'breadcrumbs' | 'backButton' | 'description' | 'actions' | 'subheader' | 'filters' | 'title' | 'isLoading'>;
-export declare const HeaderContent: <TMainActionComponent extends ElementType, TSecondaryActionComponent extends ElementType, TBackButtonComponent extends ElementType>({ backButton, description, subheader, breadcrumbs, actions, title, filters, isLoading, }: HeaderContentProps<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>) => import("react/jsx-runtime").JSX.Element;
+type HeaderContentProps<TMainActionComponent extends ElementType, TSecondaryActionComponent extends ElementType, TBackButtonComponent extends ElementType> = Pick<PageHeaderProps<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>, 'breadcrumbs' | 'backButton' | 'description' | 'actions' | 'subheader' | 'tabs' | 'filters' | 'title' | 'isLoading'>;
+export declare const HeaderContent: <TMainActionComponent extends ElementType, TSecondaryActionComponent extends ElementType, TBackButtonComponent extends ElementType>({ backButton, description, subheader, breadcrumbs, tabs, actions, title, filters, isLoading, }: HeaderContentProps<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -10,13 +10,13 @@ const Title_1 = require("../Title");
 const Description_1 = require("./Description");
 const FormFiltersProvider_1 = require("./FormFiltersProvider");
 const styles_1 = require("./styles");
-const HeaderContent = ({ backButton, description, subheader, breadcrumbs, actions, title, filters, isLoading, }) => {
+const HeaderContent = ({ backButton, description, subheader, breadcrumbs, tabs, actions, title, filters, isLoading, }) => {
     const renderBreadcrumbs = () => {
         if (!breadcrumbs) {
             return null;
         }
         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, { className: constants_1.pageHeaderClassnames.subheader, 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 })), tabs && (0, jsx_runtime_1.jsx)(styles_1.TabsWrapper, { children: tabs }), 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.d.ts

@@ -3,6 +3,10 @@ export declare const BreadcrumbsWrapper: import("@emotion/styled/dist/declaratio
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TabsWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const PageSubheader: 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;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DesktopTitleWrapper = exports.PageSubheader = exports.BreadcrumbsWrapper = void 0;
+exports.DesktopTitleWrapper = exports.PageSubheader = exports.TabsWrapper = exports.BreadcrumbsWrapper = void 0;
 const styled_1 = require("../../styled");
 exports.BreadcrumbsWrapper = styled_1.styled.div `
   grid-column: 2;
@@ -12,9 +12,19 @@ exports.BreadcrumbsWrapper = styled_1.styled.div `
     display: none;
   }
 `;
+exports.TabsWrapper = styled_1.styled.div `
+  grid-column: 1 / -1;
+  grid-row: 4;
+
+  padding-top:  ${({ theme }) => theme.spacing(3)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(0, 3, 3, 3)};
+  }
+`;
 exports.PageSubheader = styled_1.styled.div `
   grid-column: 1 / -1;
-  grid-row: 6;
+  grid-row: 5;
 
   padding-top: ${({ theme }) => theme.spacing(4)};
 

package/node/components/PageHeader/PageHeader.js

@@ -34,7 +34,7 @@ const rootCva = (0, cva_1.cva)(constants_1.pageHeaderClassnames.root, {
     },
 });
 const PageHeader = (props) => {
-    const { title, description, subheader, breadcrumbs, actions, backButton, className, filters, } = props;
+    const { title, description, subheader, breadcrumbs, tabs, actions, backButton, className, filters, } = props;
     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: mobilePageHeaderCva({
                     hasTitle: Boolean(title) || isLoading,
@@ -43,6 +43,6 @@ const PageHeader = (props) => {
                     hasActions: Boolean(actions),
                     hasSubheader: Boolean(subheader),
                     hasFilters: Boolean(filters),
-                }), 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 }))] }));
+                }), className), children: (0, jsx_runtime_1.jsx)(HeaderContent_1.HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, tabs: tabs, 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/styles.js

@@ -41,7 +41,7 @@ exports.Wrapper = styled_1.styled.header `
 
   .${constants_2.pageHeaderClassnames.filters} {
     grid-column: 1 / -1;
-    grid-row: 4;
+    grid-row: 6;
 
     ${({ theme }) => theme.breakpoints.down('laptop')} {
       grid-column: 3;
@@ -51,7 +51,7 @@ exports.Wrapper = styled_1.styled.header `
 
   .${constants_2.pageHeaderClassnames.quickFilters} {
     grid-column: 1 / -1;
-    grid-row: 5;
+    grid-row: 7;
 
     margin-top: ${({ theme }) => theme.spacing(4)};
 

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

@@ -34,6 +34,16 @@ export type PageHeaderProps<TMainActionComponent extends ElementType = ElementTy
      * } />
      */
     breadcrumbs?: ReactNode;
+    /**
+     * Слот для tabs
+     * @example <PageHeader tabs={
+     * <Tabs value={tabValue} onChange={handleChange}>
+     *  <Tab label="Вкладка 1" />
+     *  <Tab label="Вкладка 2" />
+     * </Tabs>
+     * } />
+     */
+    tabs?: ReactNode;
     /**
      * Набор кнопок, видимые конфигурируются через объект main, скрытые в меню -
      * через secondary

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

@@ -9,6 +9,7 @@ export declare const useLogic: <TFormValues extends Record<string, unknown>>({ a
         subheader?: import("react").ReactNode;
         filters?: import("react").ReactNode;
         breadcrumbs?: import("react").ReactNode;
+        tabs?: import("react").ReactNode;
         className?: string | undefined;
         isLoading?: boolean | undefined;
         shouldUpdateDocumentTitle?: boolean | undefined;

package/package.json

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

package/components/NewPopover/utils/resolveAnchorNode.d.ts

@@ -1,6 +0,0 @@
-import { type NewPopoverAnchorEl } from '../types';
-/**
- * Резолвит anchorEl в DOM-ноду, если это возможно.
- * Для virtual-элементов вернёт null.
- */
-export declare const resolveAnchorNode: (anchorEl: NewPopoverAnchorEl | undefined) => Node | null;

package/components/NewPopover/utils/resolveAnchorNode.js

@@ -1,8 +0,0 @@
-/**
- * Резолвит anchorEl в DOM-ноду, если это возможно.
- * Для virtual-элементов вернёт null.
- */
-export const resolveAnchorNode = (anchorEl) => {
-    const value = typeof anchorEl === 'function' ? anchorEl() : anchorEl;
-    return value instanceof Node ? value : null;
-};

package/node/components/NewPopover/utils/resolveAnchorNode.d.ts

@@ -1,6 +0,0 @@
-import { type NewPopoverAnchorEl } from '../types';
-/**
- * Резолвит anchorEl в DOM-ноду, если это возможно.
- * Для virtual-элементов вернёт null.
- */
-export declare const resolveAnchorNode: (anchorEl: NewPopoverAnchorEl | undefined) => Node | null;