@astral/ui 4.91.0 → 4.91.2

package/components/DialogHeader/DialogHeader.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CrossOutlineMd } from '../../icons/CrossOutlineMd';
-import { IconButton } from '../IconButton';
 import { Typography } from '../Typography';
-import { HeaderContent, Wrapper } from './styles';
+import { HeaderContent, StyledIconButton, Wrapper } from './styles';
 export const DialogHeader = ({ children, title, justifyContent = 'flex-start', disableSpacing, onClose, className, }) => {
     const handleTitleClick = (e) => {
         if (onClose) {
             onClose(e, 'escapeKeyDown');
         }
     };
-    return (_jsxs(Wrapper, { className: className, hasTitle: Boolean(title), hasOnClose: Boolean(onClose), children: [title && _jsx(Typography, { variant: "h4", children: title }), _jsx(HeaderContent, { justifyContent: justifyContent, columnSpacing: disableSpacing ? 0 : 2, children: children }), onClose && (_jsx(IconButton, { variant: "text", onClick: handleTitleClick, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C \u043C\u043E\u0434\u0430\u043B\u044C\u043D\u043E\u0435 \u043E\u043A\u043D\u043E", children: _jsx(CrossOutlineMd, {}) }))] }));
+    return (_jsxs(Wrapper, { className: className, hasTitle: Boolean(title), hasOnClose: Boolean(onClose), children: [title && _jsx(Typography, { variant: "h4", children: title }), _jsx(HeaderContent, { justifyContent: justifyContent, columnSpacing: disableSpacing ? 0 : 2, children: children }), onClose && (_jsx(StyledIconButton, { variant: "text", onClick: handleTitleClick, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C \u043C\u043E\u0434\u0430\u043B\u044C\u043D\u043E\u0435 \u043E\u043A\u043D\u043E", children: _jsx(CrossOutlineMd, {}) }))] }));
 };

package/components/DialogHeader/styles.d.ts

@@ -13,6 +13,16 @@ export declare const Wrapper: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & DialogHeaderRootProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledIconButton: import("../styled").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 type DialogHeaderContentProps = {
     justifyContent: CSSProperties['justifyContent'];
     columnSpacing: number;

package/components/DialogHeader/styles.js

@@ -1,3 +1,4 @@
+import { IconButton } from '../IconButton';
 import { styled } from '../styled';
 export const Wrapper = styled('div', {
     label: 'DialogHeader-root',
@@ -23,6 +24,9 @@ export const Wrapper = styled('div', {
   height: auto;
   padding: ${({ theme }) => theme.spacing(4, 6)};
 `;
+export const StyledIconButton = styled(IconButton) `
+  align-self: start;
+`;
 export const HeaderContent = styled('div', {
     shouldForwardProp: (prop) => !['justifyContent', 'columnSpacing'].includes(prop),
     label: 'DialogHeader-content',

package/components/DialogTitle/DialogTitle.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import MuiDialogTitle from '@mui/material/DialogTitle';
 import { CrossOutlineMd } from '../../icons/CrossOutlineMd';
-import { IconButton } from '../IconButton';
+import { StyledIconButton } from './styles';
 export const DialogTitle = ({ children, onClose, headerContent, ...props }) => {
     // 'escapeKeyDown'  в документашке написано что это опциональный тип, и можно стрингу любую туда закидывать, а по факту либо escapeKeyDown либо backdropClick
     const handleTitleClick = (e) => {
@@ -9,5 +9,5 @@ export const DialogTitle = ({ children, onClose, headerContent, ...props }) => {
             onClose(e, 'escapeKeyDown');
         }
     };
-    return (_jsxs(MuiDialogTitle, { ...props, children: [children, headerContent, onClose && (_jsx(IconButton, { variant: "text", onClick: handleTitleClick, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C \u043C\u043E\u0434\u0430\u043B\u044C\u043D\u043E\u0435 \u043E\u043A\u043D\u043E", children: _jsx(CrossOutlineMd, {}) }))] }));
+    return (_jsxs(MuiDialogTitle, { ...props, children: [children, headerContent, onClose && (_jsx(StyledIconButton, { variant: "text", onClick: handleTitleClick, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C \u043C\u043E\u0434\u0430\u043B\u044C\u043D\u043E\u0435 \u043E\u043A\u043D\u043E", children: _jsx(CrossOutlineMd, {}) }))] }));
 };

package/components/DialogTitle/styles.d.ts

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

package/components/DialogTitle/styles.js

@@ -0,0 +1,6 @@
+import { IconButton } from '../IconButton';
+import { styled } from '../styled';
+export const StyledIconButton = styled(IconButton) `
+    flex-shrink: 0;
+    align-self: start;
+`;

package/components/HintPopover/types.d.ts

@@ -18,7 +18,7 @@ export type HintPopoverProps = Omit<NewPopoverProps, 'hasArrow' | 'disableMobile
      */
     action?: ReactNode;
     /**
-     * Ref на узел контента — для фокус-трапа/определения кликов у потребителя.
+     * Ref на узел контента — для focus-trap/определения кликов у потребителя.
      */
     contentRef?: Ref<HTMLDivElement>;
 };

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

@@ -9,10 +9,10 @@ import { useLogic } from './useLogic';
 export const HighlightStep = ({ activeStep, isClosing, geometry, }) => {
     const { step } = activeStep;
     const { anchorEl } = geometry;
-    const { isOpen, shouldShowPopover, setPopoverNode, handleClose } = useLogic(activeStep, isClosing, geometry);
+    const { isOpen, shouldShowPopover, handleClose } = useLogic(activeStep, isClosing, geometry);
     // Без якоря popover не рисуем.
     if (!anchorEl) {
         return null;
     }
-    return (_jsx(_Fragment, { children: shouldShowPopover && (_jsx(StepPopover, { variant: "light", isOpen: isOpen, disableAutoFocus: true, anchorEl: anchorEl, placement: step.position, onClose: handleClose, contentRef: setPopoverNode, title: step.title, action: _jsx(StepFooter, { activeStep: activeStep }), children: step.content && (_jsx(Typography, { component: "div", variant: "body1", color: "grey", colorIntensity: "900", children: step.content })) })) }));
+    return (_jsx(_Fragment, { children: shouldShowPopover && (_jsx(StepPopover, { variant: "light", isOpen: isOpen, disableAutoFocus: true, anchorEl: anchorEl, placement: step.position, onClose: handleClose, title: step.title, action: _jsx(StepFooter, { activeStep: activeStep }), children: step.content && (_jsx(Typography, { component: "div", variant: "body1", color: "grey", colorIntensity: "900", children: step.content })) })) }));
 };

package/components/Onboarding/ui/StepStrategy/steps/HighlightStep/useLogic/useLogic.d.ts

@@ -3,10 +3,9 @@ import { type OverlayGeometry } from '../../../useLogic';
 export type UseLogicResult = {
     isOpen: boolean;
     shouldShowPopover: boolean;
-    setPopoverNode: (node: HTMLElement | null) => void;
     handleClose: () => void;
 };
 /**
- * Логика highlight-шага: задержка popover, фокус-трап, закрытие.
+ * Логика highlight-шага: задержка popover, закрытие.
  */
 export declare const useLogic: (activeStep: ActiveStepState, isClosing: boolean, geometry: OverlayGeometry) => UseLogicResult;

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

@@ -1,12 +1,11 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useTheme } from '../../../../../../theme/hooks/useTheme';
-import { useFocusTrap } from '../../../../hooks/useFocusTrap';
 /**
- * Логика highlight-шага: задержка popover, фокус-трап, закрытие.
+ * Логика highlight-шага: задержка popover, закрытие.
  */
 export const useLogic = (activeStep, isClosing, geometry) => {
-    const { isInteractive, isConfirming } = activeStep;
-    const { anchorEl, element, isTransitioning } = geometry;
+    const { isConfirming } = activeStep;
+    const { anchorEl, isTransitioning } = geometry;
     const theme = useTheme();
     const isOpen = !isClosing;
     // Задержка до появления popover после готовности hole.
@@ -19,10 +18,6 @@ export const useLogic = (activeStep, isClosing, geometry) => {
         const timer = setTimeout(() => setIsEntered(true), theme.transitions.duration.shortest);
         return () => clearTimeout(timer);
     }, [isEntered, isHoleReady]);
-    const [popoverNode, setPopoverNode] = useState(null);
-    const trapNodes = useMemo(() => [popoverNode, isInteractive ? element : null], [popoverNode, isInteractive, element]);
-    // Трап выключен при закрытии/подтверждении.
-    useFocusTrap(trapNodes, isOpen && !isConfirming);
     const handleClose = useCallback(() => {
         activeStep.requestClose();
     }, [activeStep]);
@@ -31,7 +26,6 @@ export const useLogic = (activeStep, isClosing, geometry) => {
     return {
         isOpen,
         shouldShowPopover,
-        setPopoverNode,
         handleClose,
     };
 };

package/node/components/DialogHeader/DialogHeader.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const CrossOutlineMd_1 = require("../../icons/CrossOutlineMd");
-const IconButton_1 = require("../IconButton");
 const Typography_1 = require("../Typography");
 const styles_1 = require("./styles");
 const DialogHeader = ({ children, title, justifyContent = 'flex-start', disableSpacing, onClose, className, }) => {
@@ -12,6 +11,6 @@ const DialogHeader = ({ children, title, justifyContent = 'flex-start', disableS
             onClose(e, 'escapeKeyDown');
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: className, hasTitle: Boolean(title), hasOnClose: Boolean(onClose), children: [title && (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "h4", children: title }), (0, jsx_runtime_1.jsx)(styles_1.HeaderContent, { justifyContent: justifyContent, columnSpacing: disableSpacing ? 0 : 2, children: children }), onClose && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", onClick: handleTitleClick, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C \u043C\u043E\u0434\u0430\u043B\u044C\u043D\u043E\u0435 \u043E\u043A\u043D\u043E", children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: className, hasTitle: Boolean(title), hasOnClose: Boolean(onClose), children: [title && (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "h4", children: title }), (0, jsx_runtime_1.jsx)(styles_1.HeaderContent, { justifyContent: justifyContent, columnSpacing: disableSpacing ? 0 : 2, children: children }), onClose && ((0, jsx_runtime_1.jsx)(styles_1.StyledIconButton, { variant: "text", onClick: handleTitleClick, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C \u043C\u043E\u0434\u0430\u043B\u044C\u043D\u043E\u0435 \u043E\u043A\u043D\u043E", children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) }))] }));
 };
 exports.DialogHeader = DialogHeader;

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

@@ -13,6 +13,16 @@ export declare const Wrapper: import("@emotion/styled/dist/declarations/src/type
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & DialogHeaderRootProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledIconButton: 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 type DialogHeaderContentProps = {
     justifyContent: CSSProperties['justifyContent'];
     columnSpacing: number;

package/node/components/DialogHeader/styles.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HeaderContent = exports.Wrapper = void 0;
+exports.HeaderContent = exports.StyledIconButton = exports.Wrapper = void 0;
+const IconButton_1 = require("../IconButton");
 const styled_1 = require("../styled");
 exports.Wrapper = (0, styled_1.styled)('div', {
     label: 'DialogHeader-root',
@@ -26,6 +27,9 @@ exports.Wrapper = (0, styled_1.styled)('div', {
   height: auto;
   padding: ${({ theme }) => theme.spacing(4, 6)};
 `;
+exports.StyledIconButton = (0, styled_1.styled)(IconButton_1.IconButton) `
+  align-self: start;
+`;
 exports.HeaderContent = (0, styled_1.styled)('div', {
     shouldForwardProp: (prop) => !['justifyContent', 'columnSpacing'].includes(prop),
     label: 'DialogHeader-content',

package/node/components/DialogTitle/DialogTitle.js

@@ -7,7 +7,7 @@ exports.DialogTitle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const DialogTitle_1 = __importDefault(require("@mui/material/DialogTitle"));
 const CrossOutlineMd_1 = require("../../icons/CrossOutlineMd");
-const IconButton_1 = require("../IconButton");
+const styles_1 = require("./styles");
 const DialogTitle = ({ children, onClose, headerContent, ...props }) => {
     // 'escapeKeyDown'  в документашке написано что это опциональный тип, и можно стрингу любую туда закидывать, а по факту либо escapeKeyDown либо backdropClick
     const handleTitleClick = (e) => {
@@ -15,6 +15,6 @@ const DialogTitle = ({ children, onClose, headerContent, ...props }) => {
             onClose(e, 'escapeKeyDown');
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(DialogTitle_1.default, { ...props, children: [children, headerContent, onClose && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", onClick: handleTitleClick, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C \u043C\u043E\u0434\u0430\u043B\u044C\u043D\u043E\u0435 \u043E\u043A\u043D\u043E", children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(DialogTitle_1.default, { ...props, children: [children, headerContent, onClose && ((0, jsx_runtime_1.jsx)(styles_1.StyledIconButton, { variant: "text", onClick: handleTitleClick, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C \u043C\u043E\u0434\u0430\u043B\u044C\u043D\u043E\u0435 \u043E\u043A\u043D\u043E", children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) }))] }));
 };
 exports.DialogTitle = DialogTitle;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const StyledIconButton: 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;
+}, {}, {}>;

package/node/components/DialogTitle/styles.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledIconButton = void 0;
+const IconButton_1 = require("../IconButton");
+const styled_1 = require("../styled");
+exports.StyledIconButton = (0, styled_1.styled)(IconButton_1.IconButton) `
+    flex-shrink: 0;
+    align-self: start;
+`;

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

@@ -18,7 +18,7 @@ export type HintPopoverProps = Omit<NewPopoverProps, 'hasArrow' | 'disableMobile
      */
     action?: ReactNode;
     /**
-     * Ref на узел контента — для фокус-трапа/определения кликов у потребителя.
+     * Ref на узел контента — для focus-trap/определения кликов у потребителя.
      */
     contentRef?: Ref<HTMLDivElement>;
 };

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

@@ -12,11 +12,11 @@ const useLogic_1 = require("./useLogic");
 const HighlightStep = ({ activeStep, isClosing, geometry, }) => {
     const { step } = activeStep;
     const { anchorEl } = geometry;
-    const { isOpen, shouldShowPopover, setPopoverNode, handleClose } = (0, useLogic_1.useLogic)(activeStep, isClosing, geometry);
+    const { isOpen, shouldShowPopover, handleClose } = (0, useLogic_1.useLogic)(activeStep, isClosing, geometry);
     // Без якоря popover не рисуем.
     if (!anchorEl) {
         return null;
     }
-    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 })) })) }));
+    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, 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/useLogic/useLogic.d.ts

@@ -3,10 +3,9 @@ import { type OverlayGeometry } from '../../../useLogic';
 export type UseLogicResult = {
     isOpen: boolean;
     shouldShowPopover: boolean;
-    setPopoverNode: (node: HTMLElement | null) => void;
     handleClose: () => void;
 };
 /**
- * Логика highlight-шага: задержка popover, фокус-трап, закрытие.
+ * Логика highlight-шага: задержка popover, закрытие.
  */
 export declare const useLogic: (activeStep: ActiveStepState, isClosing: boolean, geometry: OverlayGeometry) => UseLogicResult;

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

@@ -3,13 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const useTheme_1 = require("../../../../../../theme/hooks/useTheme");
-const useFocusTrap_1 = require("../../../../hooks/useFocusTrap");
 /**
- * Логика highlight-шага: задержка popover, фокус-трап, закрытие.
+ * Логика highlight-шага: задержка popover, закрытие.
  */
 const useLogic = (activeStep, isClosing, geometry) => {
-    const { isInteractive, isConfirming } = activeStep;
-    const { anchorEl, element, isTransitioning } = geometry;
+    const { isConfirming } = activeStep;
+    const { anchorEl, isTransitioning } = geometry;
     const theme = (0, useTheme_1.useTheme)();
     const isOpen = !isClosing;
     // Задержка до появления popover после готовности hole.
@@ -22,10 +21,6 @@ const useLogic = (activeStep, isClosing, geometry) => {
         const timer = setTimeout(() => setIsEntered(true), theme.transitions.duration.shortest);
         return () => clearTimeout(timer);
     }, [isEntered, isHoleReady]);
-    const [popoverNode, setPopoverNode] = (0, react_1.useState)(null);
-    const trapNodes = (0, react_1.useMemo)(() => [popoverNode, isInteractive ? element : null], [popoverNode, isInteractive, element]);
-    // Трап выключен при закрытии/подтверждении.
-    (0, useFocusTrap_1.useFocusTrap)(trapNodes, isOpen && !isConfirming);
     const handleClose = (0, react_1.useCallback)(() => {
         activeStep.requestClose();
     }, [activeStep]);
@@ -34,7 +29,6 @@ const useLogic = (activeStep, isClosing, geometry) => {
     return {
         isOpen,
         shouldShowPopover,
-        setPopoverNode,
         handleClose,
     };
 };

package/package.json

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

package/components/Onboarding/ui/hooks/useFocusTrap/index.d.ts

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

package/components/Onboarding/ui/hooks/useFocusTrap/index.js

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

package/components/Onboarding/ui/hooks/useFocusTrap/useFocusTrap.d.ts

@@ -1,6 +0,0 @@
-/**
- * Мульти-контейнерный фокус-трап для highlight-шага.
- * @param nodes контейнеры
- * @param isActive включение трапа
- */
-export declare const useFocusTrap: (nodes: (HTMLElement | null)[], isActive?: boolean) => void;

package/components/Onboarding/ui/hooks/useFocusTrap/useFocusTrap.js

@@ -1,33 +0,0 @@
-import { createFocusTrap } from 'focus-trap';
-import { useEffect } from 'react';
-/**
- * Мульти-контейнерный фокус-трап для highlight-шага.
- * @param nodes контейнеры
- * @param isActive включение трапа
- */
-export const useFocusTrap = (nodes, isActive = true) => {
-    useEffect(() => {
-        const containers = nodes.filter((node) => node !== null);
-        if (!isActive || containers.length === 0) {
-            return;
-        }
-        const trap = createFocusTrap(containers, {
-            escapeDeactivates: false,
-            clickOutsideDeactivates: false,
-            allowOutsideClick: true,
-            returnFocusOnDeactivate: false,
-            fallbackFocus: containers[0],
-            initialFocus: () => containers[0],
-        });
-        try {
-            trap.activate();
-        }
-        catch {
-            // Нет фокусируемых узлов.
-            return;
-        }
-        return () => {
-            trap.deactivate();
-        };
-    }, [nodes, isActive]);
-};

package/node/components/Onboarding/ui/hooks/useFocusTrap/index.d.ts

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

package/node/components/Onboarding/ui/hooks/useFocusTrap/index.js

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

package/node/components/Onboarding/ui/hooks/useFocusTrap/useFocusTrap.d.ts

@@ -1,6 +0,0 @@
-/**
- * Мульти-контейнерный фокус-трап для highlight-шага.
- * @param nodes контейнеры
- * @param isActive включение трапа
- */
-export declare const useFocusTrap: (nodes: (HTMLElement | null)[], isActive?: boolean) => void;

package/node/components/Onboarding/ui/hooks/useFocusTrap/useFocusTrap.js

@@ -1,37 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFocusTrap = void 0;
-const focus_trap_1 = require("focus-trap");
-const react_1 = require("react");
-/**
- * Мульти-контейнерный фокус-трап для highlight-шага.
- * @param nodes контейнеры
- * @param isActive включение трапа
- */
-const useFocusTrap = (nodes, isActive = true) => {
-    (0, react_1.useEffect)(() => {
-        const containers = nodes.filter((node) => node !== null);
-        if (!isActive || containers.length === 0) {
-            return;
-        }
-        const trap = (0, focus_trap_1.createFocusTrap)(containers, {
-            escapeDeactivates: false,
-            clickOutsideDeactivates: false,
-            allowOutsideClick: true,
-            returnFocusOnDeactivate: false,
-            fallbackFocus: containers[0],
-            initialFocus: () => containers[0],
-        });
-        try {
-            trap.activate();
-        }
-        catch {
-            // Нет фокусируемых узлов.
-            return;
-        }
-        return () => {
-            trap.deactivate();
-        };
-    }, [nodes, isActive]);
-};
-exports.useFocusTrap = useFocusTrap;