@astral/ui 4.84.0 → 4.85.0

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.84.0",
+  "version": "4.85.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;