@snack-uikit/notification 0.13.26-preview-115f396e.0 → 0.13.27

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## <small>0.13.27 (2026-02-18)</small>
+
+### Only dependencies have been changed
+* [@snack-uikit/icons@0.27.6]($PUBLIC_PROJECT_URL/blob/master/packages/icons/CHANGELOG.md)
+* [@snack-uikit/info-block@0.6.37]($PUBLIC_PROJECT_URL/blob/master/packages/info-block/CHANGELOG.md)
+* [@snack-uikit/link@0.17.17]($PUBLIC_PROJECT_URL/blob/master/packages/link/CHANGELOG.md)
+* [@snack-uikit/list@0.32.13]($PUBLIC_PROJECT_URL/blob/master/packages/list/CHANGELOG.md)
+* [@snack-uikit/segmented-control@0.6.17]($PUBLIC_PROJECT_URL/blob/master/packages/segmented-control/CHANGELOG.md)
+* [@snack-uikit/tag@0.15.14]($PUBLIC_PROJECT_URL/blob/master/packages/tag/CHANGELOG.md)
+* [@snack-uikit/tooltip@0.18.9]($PUBLIC_PROJECT_URL/blob/master/packages/tooltip/CHANGELOG.md)
+* [@snack-uikit/truncate-string@0.7.8]($PUBLIC_PROJECT_URL/blob/master/packages/truncate-string/CHANGELOG.md)
+
+
+
+
+
+## <small>0.13.26 (2026-01-29)</small>
+
+* feat(PDS-3356): add notification card stack ([06a2d74](https://github.com/cloud-ru-tech/snack-uikit/commit/06a2d74))
+
+
+
+
+
 ## <small>0.13.25 (2026-01-19)</small>
 
 * chore(FF-6693): migrate tests from TestCafe to Playwright ([f32aff8](https://github.com/cloud-ru-tech/snack-uikit/commit/f32aff8))

package/README.md

@@ -288,9 +288,9 @@ function NotificationPanelStackExample() {
 | name | type | default value | description |
 |------|------|---------------|-------------|
 | children* | `Iterable<ReactNode>` | - | Карточки в стопке, видна первая карточка, остальные схлопываются под нее. |
-| title* | `string` | - | Заголовок стопки карточке |
+| title* | `string` | - | Заголовок стопки карточек |
 | defaultOpen | `boolean` | false | Состояние открыт/закрыт по умолчанию |
-| onOpenChanged | `(open: boolean) => void` | - | Колбек смены состояния открыт/закрыт @param open Новое состояние открыт/закрыт |
+| onOpenChanged | `(open: boolean) => void` | - | Колбек смены состояния открыт/закрыт |
 | actions | `Action[]` | - | Список действий в выпадающем меню |
 ## NotificationPanelPopover
 Компонент-обёртка для NotificationPanel для использования как выпадающий элемент

package/dist/cjs/components/NotificationCard/NotificationCard.d.ts

@@ -2,7 +2,7 @@ import { ElementType, MouseEventHandler, ReactNode } from 'react';
 import { ButtonSimpleProps, ButtonTonalProps } from '@snack-uikit/button';
 import { PickLinkProps } from '@snack-uikit/link';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { type Action } from '../../helperComponents/Actions/Actions';
+import { type Action } from '../../helperComponents/ActionsButton';
 import { Appearance } from './types';
 export type NotificationCardProps<LinkElement extends ElementType = 'a'> = WithSupportProps<{
     /** Идентификатор уведомления */

package/dist/cjs/components/NotificationCard/NotificationCard.js

@@ -26,7 +26,7 @@ const link_1 = require("@snack-uikit/link");
 const truncate_string_1 = require("@snack-uikit/truncate-string");
 const typography_1 = require("@snack-uikit/typography");
 const utils_1 = require("@snack-uikit/utils");
-const Actions_1 = require("../../helperComponents/Actions/Actions");
+const ActionsButton_1 = require("../../helperComponents/ActionsButton");
 const constants_1 = require("./constants");
 const helpers_1 = require("./helpers");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
@@ -89,7 +89,7 @@ function NotificationCard(_a) {
     "data-clickable": Boolean(onClick) || undefined,
     "data-droplist-open": isDroplistOpen || undefined,
     className: (0, classnames_1.default)(styles_module_scss_1.default.notificationCard, className),
-    children: [(actions === null || actions === void 0 ? void 0 : actions.length) && (0, jsx_runtime_1.jsx)(Actions_1.Actions, {
+    children: [(actions === null || actions === void 0 ? void 0 : actions.length) && (0, jsx_runtime_1.jsx)(ActionsButton_1.ActionsButton, {
       className: styles_module_scss_1.default.notificationCardFunction,
       actions: actions,
       open: isDroplistOpen,
@@ -123,9 +123,11 @@ function NotificationCard(_a) {
       className: styles_module_scss_1.default.notificationCardContent,
       "data-test-id": constants_1.TEST_IDS.content,
       children: content
-    }), (primaryButton || secondaryButton) && (0, jsx_runtime_1.jsxs)("div", Object.assign({
-      className: styles_module_scss_1.default.notificationCardButtons
-    }, helpers_1.stopPropagation, {
+    }), (primaryButton || secondaryButton) &&
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    (0, jsx_runtime_1.jsxs)("div", {
+      className: styles_module_scss_1.default.notificationCardButtons,
+      onClick: helpers_1.stopPropagationClick,
       children: [secondaryButton && (0, jsx_runtime_1.jsx)(button_1.ButtonSimple, Object.assign({}, secondaryButton, {
         appearance: 'neutral',
         size: 's',
@@ -135,7 +137,7 @@ function NotificationCard(_a) {
         size: 's',
         "data-test-id": constants_1.TEST_IDS.secondaryButton
       }))]
-    })), showFooter && (0, jsx_runtime_1.jsxs)("div", {
+    }), showFooter && (0, jsx_runtime_1.jsxs)("div", {
       className: styles_module_scss_1.default.notificationCardFooter,
       children: [link && (0, jsx_runtime_1.jsx)(link_1.Link, Object.assign({}, link, {
         onClick: handleLinkClick,

package/dist/cjs/components/NotificationCard/helpers.d.ts

@@ -1,6 +1,4 @@
 import { MouseEvent } from 'react';
 import { Appearance } from './types';
 export declare function getIcon(appearance: Appearance): import("react/jsx-runtime").JSX.Element | null;
-export declare const stopPropagation: {
-    onClick: (e: MouseEvent<HTMLElement>) => void;
-};
+export declare function stopPropagationClick(e: MouseEvent<HTMLElement>): void;

package/dist/cjs/components/NotificationCard/helpers.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.stopPropagation = void 0;
 exports.getIcon = getIcon;
+exports.stopPropagationClick = stopPropagationClick;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_1 = require("@snack-uikit/icons");
 const constants_1 = require("./constants");
@@ -31,6 +31,6 @@ function getIcon(appearance) {
       return null;
   }
 }
-exports.stopPropagation = {
-  onClick: e => e.stopPropagation()
-};
+function stopPropagationClick(e) {
+  e.stopPropagation();
+}

package/dist/cjs/components/NotificationPanel/components/NotificationCardStack/NotificationCardStack.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
-import { Action } from '../../../../helperComponents/Actions/Actions';
+import { Action } from '../../../../helperComponents/ActionsButton';
 export type NotificationCardStackProps = {
     /**
-     * Заголовок стопки карточке
+     * Заголовок стопки карточек
      */
     title: string;
     /**
@@ -13,7 +13,6 @@ export type NotificationCardStackProps = {
     /**
      * Колбек смены состояния открыт/закрыт
      * @type (open: boolean) => void
-     * @param open Новое состояние открыт/закрыт
      */
     onOpenChanged?: (open: boolean) => void;
     /**

package/dist/cjs/components/NotificationPanel/components/NotificationCardStack/NotificationCardStack.js

@@ -13,7 +13,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const button_1 = require("@snack-uikit/button");
 const icons_1 = require("@snack-uikit/icons");
-const Actions_1 = require("../../../../helperComponents/Actions/Actions");
+const ActionsButton_1 = require("../../../../helperComponents/ActionsButton");
 const constants_1 = require("../../constants");
 const StackTail_1 = require("../../helperComponents/StackTail");
 const hooks_1 = require("./hooks");
@@ -66,7 +66,7 @@ function NotificationCardStack(_ref) {
         children: title
       }), (0, jsx_runtime_1.jsxs)("div", {
         className: styles_module_scss_1.default.right,
-        children: [actions && actions.length > 0 && (0, jsx_runtime_1.jsx)(Actions_1.Actions, {
+        children: [actions && actions.length > 0 && (0, jsx_runtime_1.jsx)(ActionsButton_1.ActionsButton, {
           actions: actions,
           open: actionsOpen,
           setDroplistOpen: setActionsOpen,

package/dist/cjs/components/NotificationPanel/components/NotificationCardStack/hooks.d.ts

@@ -6,7 +6,7 @@ type UseAnimatedOpeningProps = {
 type UseAnimatedOpeningResult = {
     open: boolean;
     isVisible: boolean;
-    toggleOpen: () => void;
+    toggleOpen(): void;
 };
 export declare function useAnimatedOpening({ defaultOpen, onOpenChanged, duration, }: UseAnimatedOpeningProps): UseAnimatedOpeningResult;
 export {};

package/dist/cjs/helperComponents/{Actions/Actions.d.ts → ActionsButton/ActionsButton.d.ts}

@@ -13,4 +13,4 @@ export type NotificationCardFunctionProps = Required<Pick<NotificationCardProps,
     icon: ReactElement;
     className?: string;
 };
-export declare function Actions({ actions, open, setDroplistOpen, size, icon, className }: NotificationCardFunctionProps): import("react/jsx-runtime").JSX.Element;
+export declare function ActionsButton({ actions, open, setDroplistOpen, size, icon, className, }: NotificationCardFunctionProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/ActionsButton/ActionsButton.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActionsButton = ActionsButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const button_1 = require("@snack-uikit/button");
+const list_1 = require("@snack-uikit/list");
+const tag_1 = require("@snack-uikit/tag");
+const constants_1 = require("../../components/NotificationCard/constants");
+const helpers_1 = require("../../components/NotificationCard/helpers");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function ActionsButton(_ref) {
+  let {
+    actions,
+    open,
+    setDroplistOpen,
+    size,
+    icon,
+    className
+  } = _ref;
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    (0, jsx_runtime_1.jsx)("div", {
+      className: (0, classnames_1.default)(styles_module_scss_1.default.container, className),
+      "data-test-id": constants_1.TEST_IDS.actions.wrapper,
+      onClick: helpers_1.stopPropagationClick,
+      children: (0, jsx_runtime_1.jsx)(list_1.Droplist, {
+        trigger: 'clickAndFocusVisible',
+        open: open,
+        onOpenChange: setDroplistOpen,
+        placement: 'bottom-end',
+        scroll: true,
+        "data-test-id": constants_1.TEST_IDS.actions.droplist,
+        items: actions.map(_ref2 => {
+          let {
+            onClick,
+            disabled,
+            content,
+            tagLabel,
+            icon
+          } = _ref2;
+          return {
+            onClick: e => {
+              setDroplistOpen(false);
+              onClick === null || onClick === void 0 ? void 0 : onClick(e);
+            },
+            disabled,
+            content,
+            beforeContent: icon,
+            afterContent: tagLabel ? (0, jsx_runtime_1.jsx)(tag_1.Tag, {
+              label: tagLabel
+            }) : undefined,
+            'data-test-id': constants_1.TEST_IDS.actions.droplistAction
+          };
+        }),
+        children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
+          size: size,
+          icon: icon,
+          "data-test-id": constants_1.TEST_IDS.actions.droplistTrigger
+        })
+      })
+    })
+  );
+}

package/dist/cjs/helperComponents/ActionsButton/index.d.ts

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

package/dist/cjs/helperComponents/{Actions → ActionsButton}/index.js

@@ -22,4 +22,4 @@ var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-__exportStar(require("./Actions"), exports);
+__exportStar(require("./ActionsButton"), exports);

package/dist/esm/components/NotificationCard/NotificationCard.d.ts

@@ -2,7 +2,7 @@ import { ElementType, MouseEventHandler, ReactNode } from 'react';
 import { ButtonSimpleProps, ButtonTonalProps } from '@snack-uikit/button';
 import { PickLinkProps } from '@snack-uikit/link';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { type Action } from '../../helperComponents/Actions/Actions';
+import { type Action } from '../../helperComponents/ActionsButton';
 import { Appearance } from './types';
 export type NotificationCardProps<LinkElement extends ElementType = 'a'> = WithSupportProps<{
     /** Идентификатор уведомления */

package/dist/esm/components/NotificationCard/NotificationCard.js

@@ -18,9 +18,9 @@ import { Link } from '@snack-uikit/link';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { Actions } from '../../helperComponents/Actions/Actions';
+import { ActionsButton } from '../../helperComponents/ActionsButton';
 import { APPEARANCE, TEST_IDS } from './constants';
-import { getIcon, stopPropagation } from './helpers';
+import { getIcon, stopPropagationClick } from './helpers';
 import styles from './styles.module.css';
 /** Компонент карточки уведомления */
 export function NotificationCard(_a) {
@@ -54,5 +54,7 @@ export function NotificationCard(_a) {
         e.stopPropagation();
         (_a = link === null || link === void 0 ? void 0 : link.onClick) === null || _a === void 0 ? void 0 : _a.call(link, e);
     };
-    return (_jsxs("div", Object.assign({ ref: cardRef, role: 'button', onClick: onClick, tabIndex: 0 }, extractSupportProps(rest), { "data-appearance": appearance, "data-unread": unread || undefined, "data-clickable": Boolean(onClick) || undefined, "data-droplist-open": isDroplistOpen || undefined, className: cn(styles.notificationCard, className), children: [(actions === null || actions === void 0 ? void 0 : actions.length) && (_jsx(Actions, { className: styles.notificationCardFunction, actions: actions, open: isDroplistOpen, setDroplistOpen: setDroplistOpen, size: 's', icon: _jsx(KebabSVG, {}) })), label && (_jsx(Typography.LightLabelS, { tag: 'div', className: styles.notificationCardLabel, children: _jsx(TruncateString, { maxLines: 1, text: label, "data-test-id": TEST_IDS.label }) })), _jsxs("div", { className: styles.notificationCardTitle, children: [_jsx("div", { className: styles.notificationCardTitleIcon, children: icon }), _jsx(Typography.SansTitleS, { tag: 'div', className: styles.notificationCardTitleText, children: _jsx(TruncateString, { maxLines: 2, text: title, "data-test-id": TEST_IDS.title }) })] }), content && (_jsx(Typography.SansBodyS, { tag: 'div', className: styles.notificationCardContent, "data-test-id": TEST_IDS.content, children: content })), (primaryButton || secondaryButton) && (_jsxs("div", Object.assign({ className: styles.notificationCardButtons }, stopPropagation, { children: [secondaryButton && (_jsx(ButtonSimple, Object.assign({}, secondaryButton, { appearance: 'neutral', size: 's', "data-test-id": TEST_IDS.primaryButton }))), primaryButton && (_jsx(ButtonTonal, Object.assign({}, primaryButton, { appearance: 'neutral', size: 's', "data-test-id": TEST_IDS.secondaryButton })))] }))), showFooter && (_jsxs("div", { className: styles.notificationCardFooter, children: [link && (_jsx(Link, Object.assign({}, link, { onClick: handleLinkClick, appearance: 'primary', textMode: 'accent', size: 's', "data-test-id": TEST_IDS.link }))), date && (_jsx(Typography.LightLabelS, { className: styles.notificationCardDate, "data-test-id": TEST_IDS.date, children: date }))] }))] })));
+    return (_jsxs("div", Object.assign({ ref: cardRef, role: 'button', onClick: onClick, tabIndex: 0 }, extractSupportProps(rest), { "data-appearance": appearance, "data-unread": unread || undefined, "data-clickable": Boolean(onClick) || undefined, "data-droplist-open": isDroplistOpen || undefined, className: cn(styles.notificationCard, className), children: [(actions === null || actions === void 0 ? void 0 : actions.length) && (_jsx(ActionsButton, { className: styles.notificationCardFunction, actions: actions, open: isDroplistOpen, setDroplistOpen: setDroplistOpen, size: 's', icon: _jsx(KebabSVG, {}) })), label && (_jsx(Typography.LightLabelS, { tag: 'div', className: styles.notificationCardLabel, children: _jsx(TruncateString, { maxLines: 1, text: label, "data-test-id": TEST_IDS.label }) })), _jsxs("div", { className: styles.notificationCardTitle, children: [_jsx("div", { className: styles.notificationCardTitleIcon, children: icon }), _jsx(Typography.SansTitleS, { tag: 'div', className: styles.notificationCardTitleText, children: _jsx(TruncateString, { maxLines: 2, text: title, "data-test-id": TEST_IDS.title }) })] }), content && (_jsx(Typography.SansBodyS, { tag: 'div', className: styles.notificationCardContent, "data-test-id": TEST_IDS.content, children: content })), (primaryButton || secondaryButton) && (
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+            _jsxs("div", { className: styles.notificationCardButtons, onClick: stopPropagationClick, children: [secondaryButton && (_jsx(ButtonSimple, Object.assign({}, secondaryButton, { appearance: 'neutral', size: 's', "data-test-id": TEST_IDS.primaryButton }))), primaryButton && (_jsx(ButtonTonal, Object.assign({}, primaryButton, { appearance: 'neutral', size: 's', "data-test-id": TEST_IDS.secondaryButton })))] })), showFooter && (_jsxs("div", { className: styles.notificationCardFooter, children: [link && (_jsx(Link, Object.assign({}, link, { onClick: handleLinkClick, appearance: 'primary', textMode: 'accent', size: 's', "data-test-id": TEST_IDS.link }))), date && (_jsx(Typography.LightLabelS, { className: styles.notificationCardDate, "data-test-id": TEST_IDS.date, children: date }))] }))] })));
 }

package/dist/esm/components/NotificationCard/helpers.d.ts

@@ -1,6 +1,4 @@
 import { MouseEvent } from 'react';
 import { Appearance } from './types';
 export declare function getIcon(appearance: Appearance): import("react/jsx-runtime").JSX.Element | null;
-export declare const stopPropagation: {
-    onClick: (e: MouseEvent<HTMLElement>) => void;
-};
+export declare function stopPropagationClick(e: MouseEvent<HTMLElement>): void;

package/dist/esm/components/NotificationCard/helpers.js

@@ -16,6 +16,6 @@ export function getIcon(appearance) {
             return null;
     }
 }
-export const stopPropagation = {
-    onClick: (e) => e.stopPropagation(),
-};
+export function stopPropagationClick(e) {
+    e.stopPropagation();
+}

package/dist/esm/components/NotificationPanel/components/NotificationCardStack/NotificationCardStack.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
-import { Action } from '../../../../helperComponents/Actions/Actions';
+import { Action } from '../../../../helperComponents/ActionsButton';
 export type NotificationCardStackProps = {
     /**
-     * Заголовок стопки карточке
+     * Заголовок стопки карточек
      */
     title: string;
     /**
@@ -13,7 +13,6 @@ export type NotificationCardStackProps = {
     /**
      * Колбек смены состояния открыт/закрыт
      * @type (open: boolean) => void
-     * @param open Новое состояние открыт/закрыт
      */
     onOpenChanged?: (open: boolean) => void;
     /**

package/dist/esm/components/NotificationPanel/components/NotificationCardStack/NotificationCardStack.js

@@ -2,7 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { Children, useMemo, useState } from 'react';
 import { ButtonFunction } from '@snack-uikit/button';
 import { ChevronDownSVG, ChevronUpSVG, KebabSVG } from '@snack-uikit/icons';
-import { Actions } from '../../../../helperComponents/Actions/Actions';
+import { ActionsButton } from '../../../../helperComponents/ActionsButton';
 import { TEST_IDS } from '../../constants';
 import { StackTail } from '../../helperComponents/StackTail';
 import { useAnimatedOpening } from './hooks';
@@ -24,5 +24,5 @@ export function NotificationCardStack({ children, defaultOpen, onOpenChanged, ti
         return _jsx(_Fragment, { children: first });
     }
     const firstCardElement = open ? first : cloneCard(first, { onClick: toggleOpen });
-    return (_jsxs("div", { className: styles.container, style: { '--snack-notification-stack-animation-duration': `${ANIMATION_DURATION}s` }, "data-test-id": TEST_IDS.cardStack.wrapper, children: [_jsxs("div", { className: styles.header, "data-test-id": TEST_IDS.cardStack.headline, children: [_jsx("label", { className: styles.title, onClick: toggleOpen, "data-test-id": TEST_IDS.cardStack.title, children: title }), _jsxs("div", { className: styles.right, children: [actions && actions.length > 0 && (_jsx(Actions, { actions: actions, open: actionsOpen, setDroplistOpen: setActionsOpen, size: 'xs', icon: _jsx(KebabSVG, {}) })), _jsx(ButtonFunction, { size: 'xs', onClick: toggleOpen, "data-test-id": TEST_IDS.cardStack.openButton, icon: open ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}) })] })] }), _jsxs("div", { className: styles.cards, children: [_jsxs("div", { className: styles.first, children: [_jsx(StackTail, { open: open, count: stack.length }), firstCardElement] }), _jsx("div", { className: styles.stack, "data-open": open || undefined, "data-tail-size": stack.length, children: _jsx("div", { className: styles.animationContainer, children: isVisible ? stack : [] }) })] })] }));
+    return (_jsxs("div", { className: styles.container, style: { '--snack-notification-stack-animation-duration': `${ANIMATION_DURATION}s` }, "data-test-id": TEST_IDS.cardStack.wrapper, children: [_jsxs("div", { className: styles.header, "data-test-id": TEST_IDS.cardStack.headline, children: [_jsx("label", { className: styles.title, onClick: toggleOpen, "data-test-id": TEST_IDS.cardStack.title, children: title }), _jsxs("div", { className: styles.right, children: [actions && actions.length > 0 && (_jsx(ActionsButton, { actions: actions, open: actionsOpen, setDroplistOpen: setActionsOpen, size: 'xs', icon: _jsx(KebabSVG, {}) })), _jsx(ButtonFunction, { size: 'xs', onClick: toggleOpen, "data-test-id": TEST_IDS.cardStack.openButton, icon: open ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}) })] })] }), _jsxs("div", { className: styles.cards, children: [_jsxs("div", { className: styles.first, children: [_jsx(StackTail, { open: open, count: stack.length }), firstCardElement] }), _jsx("div", { className: styles.stack, "data-open": open || undefined, "data-tail-size": stack.length, children: _jsx("div", { className: styles.animationContainer, children: isVisible ? stack : [] }) })] })] }));
 }

package/dist/esm/components/NotificationPanel/components/NotificationCardStack/hooks.d.ts

@@ -6,7 +6,7 @@ type UseAnimatedOpeningProps = {
 type UseAnimatedOpeningResult = {
     open: boolean;
     isVisible: boolean;
-    toggleOpen: () => void;
+    toggleOpen(): void;
 };
 export declare function useAnimatedOpening({ defaultOpen, onOpenChanged, duration, }: UseAnimatedOpeningProps): UseAnimatedOpeningResult;
 export {};

package/dist/esm/helperComponents/{Actions/Actions.d.ts → ActionsButton/ActionsButton.d.ts}

@@ -13,4 +13,4 @@ export type NotificationCardFunctionProps = Required<Pick<NotificationCardProps,
     icon: ReactElement;
     className?: string;
 };
-export declare function Actions({ actions, open, setDroplistOpen, size, icon, className }: NotificationCardFunctionProps): import("react/jsx-runtime").JSX.Element;
+export declare function ActionsButton({ actions, open, setDroplistOpen, size, icon, className, }: NotificationCardFunctionProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/{Actions/Actions.js → ActionsButton/ActionsButton.js}

@@ -4,10 +4,12 @@ import { ButtonFunction } from '@snack-uikit/button';
 import { Droplist } from '@snack-uikit/list';
 import { Tag } from '@snack-uikit/tag';
 import { TEST_IDS } from '../../components/NotificationCard/constants';
-import { stopPropagation } from '../../components/NotificationCard/helpers';
+import { stopPropagationClick } from '../../components/NotificationCard/helpers';
 import styles from './styles.module.css';
-export function Actions({ actions, open, setDroplistOpen, size, icon, className }) {
-    return (_jsx("div", Object.assign({ className: cn(styles.container, className), "data-test-id": TEST_IDS.actions.wrapper }, stopPropagation, { children: _jsx(Droplist, { trigger: 'clickAndFocusVisible', open: open, onOpenChange: setDroplistOpen, placement: 'bottom-end', scroll: true, "data-test-id": TEST_IDS.actions.droplist, items: actions.map(({ onClick, disabled, content, tagLabel, icon }) => ({
+export function ActionsButton({ actions, open, setDroplistOpen, size, icon, className, }) {
+    return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    _jsx("div", { className: cn(styles.container, className), "data-test-id": TEST_IDS.actions.wrapper, onClick: stopPropagationClick, children: _jsx(Droplist, { trigger: 'clickAndFocusVisible', open: open, onOpenChange: setDroplistOpen, placement: 'bottom-end', scroll: true, "data-test-id": TEST_IDS.actions.droplist, items: actions.map(({ onClick, disabled, content, tagLabel, icon }) => ({
                 onClick: e => {
                     setDroplistOpen(false);
                     onClick === null || onClick === void 0 ? void 0 : onClick(e);
@@ -17,5 +19,5 @@ export function Actions({ actions, open, setDroplistOpen, size, icon, className
                 beforeContent: icon,
                 afterContent: tagLabel ? _jsx(Tag, { label: tagLabel }) : undefined,
                 'data-test-id': TEST_IDS.actions.droplistAction,
-            })), children: _jsx(ButtonFunction, { size: size, icon: icon, "data-test-id": TEST_IDS.actions.droplistTrigger }) }) })));
+            })), children: _jsx(ButtonFunction, { size: size, icon: icon, "data-test-id": TEST_IDS.actions.droplistTrigger }) }) }));
 }

package/dist/esm/helperComponents/ActionsButton/index.d.ts

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

package/dist/esm/helperComponents/ActionsButton/index.js

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

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Notification",
-  "version": "0.13.26-preview-115f396e.0",
+  "version": "0.13.27",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,21 +37,21 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.19.17",
-    "@snack-uikit/icons": "0.27.5",
-    "@snack-uikit/info-block": "0.6.36",
-    "@snack-uikit/link": "0.17.16",
-    "@snack-uikit/list": "0.32.12",
+    "@snack-uikit/icons": "0.27.6",
+    "@snack-uikit/info-block": "0.6.37",
+    "@snack-uikit/link": "0.17.17",
+    "@snack-uikit/list": "0.32.13",
     "@snack-uikit/popover-private": "0.15.4",
     "@snack-uikit/scroll": "0.10.6",
-    "@snack-uikit/segmented-control": "0.6.16",
+    "@snack-uikit/segmented-control": "0.6.17",
     "@snack-uikit/skeleton": "0.6.10",
-    "@snack-uikit/tag": "0.15.13",
-    "@snack-uikit/tooltip": "0.18.8",
-    "@snack-uikit/truncate-string": "0.7.7",
+    "@snack-uikit/tag": "0.15.14",
+    "@snack-uikit/tooltip": "0.18.9",
+    "@snack-uikit/truncate-string": "0.7.8",
     "@snack-uikit/typography": "0.8.12",
     "@snack-uikit/utils": "4.0.1",
     "classnames": "2.5.1",
     "uncontrollable": "9.0.0"
   },
-  "gitHead": "1778a2220bf24582caccfd4f4141c1693e88914a"
+  "gitHead": "17b72086167d3d6503e4e74142358765230478c8"
 }

package/src/components/NotificationCard/NotificationCard.tsx

@@ -8,9 +8,9 @@ import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { type Action, Actions } from '../../helperComponents/Actions/Actions';
+import { type Action, ActionsButton } from '../../helperComponents/ActionsButton';
 import { APPEARANCE, TEST_IDS } from './constants';
-import { getIcon, stopPropagation } from './helpers';
+import { getIcon, stopPropagationClick } from './helpers';
 import styles from './styles.module.scss';
 import { Appearance } from './types';
 
@@ -117,7 +117,7 @@ export function NotificationCard<LinkElement extends ElementType = 'a'>({
       className={cn(styles.notificationCard, className)}
     >
       {actions?.length && (
-        <Actions
+        <ActionsButton
           className={styles.notificationCardFunction}
           actions={actions}
           open={isDroplistOpen}
@@ -148,7 +148,8 @@ export function NotificationCard<LinkElement extends ElementType = 'a'>({
       )}
 
       {(primaryButton || secondaryButton) && (
-        <div className={styles.notificationCardButtons} {...stopPropagation}>
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        <div className={styles.notificationCardButtons} onClick={stopPropagationClick}>
           {secondaryButton && (
             <ButtonSimple {...secondaryButton} appearance='neutral' size='s' data-test-id={TEST_IDS.primaryButton} />
           )}

package/src/components/NotificationCard/helpers.tsx

@@ -21,6 +21,6 @@ export function getIcon(appearance: Appearance) {
   }
 }
 
-export const stopPropagation = {
-  onClick: (e: MouseEvent<HTMLElement>) => e.stopPropagation(),
-};
+export function stopPropagationClick(e: MouseEvent<HTMLElement>) {
+  e.stopPropagation();
+}

package/src/components/NotificationPanel/components/NotificationCardStack/NotificationCardStack.tsx

@@ -3,7 +3,7 @@ import { Children, ReactNode, useMemo, useState } from 'react';
 import { ButtonFunction } from '@snack-uikit/button';
 import { ChevronDownSVG, ChevronUpSVG, KebabSVG } from '@snack-uikit/icons';
 
-import { Action, Actions } from '../../../../helperComponents/Actions/Actions';
+import { Action, ActionsButton } from '../../../../helperComponents/ActionsButton';
 import { TEST_IDS } from '../../constants';
 import { StackTail } from '../../helperComponents/StackTail';
 import { useAnimatedOpening } from './hooks';
@@ -12,7 +12,7 @@ import { cloneCard } from './utils';
 
 export type NotificationCardStackProps = {
   /**
-   * Заголовок стопки карточке
+   * Заголовок стопки карточек
    */
   title: string;
   /**
@@ -23,7 +23,6 @@ export type NotificationCardStackProps = {
   /**
    * Колбек смены состояния открыт/закрыт
    * @type (open: boolean) => void
-   * @param open Новое состояние открыт/закрыт
    */
   onOpenChanged?: (open: boolean) => void;
   /**
@@ -77,7 +76,7 @@ export function NotificationCardStack({
         </label>
         <div className={styles.right}>
           {actions && actions.length > 0 && (
-            <Actions
+            <ActionsButton
               actions={actions}
               open={actionsOpen}
               setDroplistOpen={setActionsOpen}

package/src/components/NotificationPanel/components/NotificationCardStack/hooks.ts

@@ -10,7 +10,7 @@ type UseAnimatedOpeningProps = {
 type UseAnimatedOpeningResult = {
   open: boolean;
   isVisible: boolean;
-  toggleOpen: () => void;
+  toggleOpen(): void;
 };
 
 export function useAnimatedOpening({

package/src/components/NotificationPanel/components/NotificationCardStack/styles.module.scss

@@ -44,14 +44,14 @@ $duration: var(--snack-notification-stack-animation-duration);
 }
 
 .stack {
-	position: relative;
+  position: relative;
   overflow: visible;
-	height: auto;
+  height: auto;
   transition: overflow $duration allow-discrete step-end;
 
-	&:not([data-open]) {
+  &:not([data-open]) {
     overflow: hidden;
-		transition:
+    transition:
       height $duration allow-discrete step-end;
 
     &[data-tail-size] {
@@ -61,29 +61,29 @@ $duration: var(--snack-notification-stack-animation-duration);
     &[data-tail-size="1"] {
       height: 4px;
     }
-	}
+  }
 }
 
 .animationContainer {
   translate: 0 -100%;
   scale: 0.98;
 
-	display: flex;
-	flex-direction: column;
-	gap: tokens.$space-notification-panel-container-body-stack-cards;
+  display: flex;
+  flex-direction: column;
+  gap: tokens.$space-notification-panel-container-body-stack-cards;
 
-	margin-top: tokens.$space-notification-panel-container-body-stack-cards;
+  margin-top: tokens.$space-notification-panel-container-body-stack-cards;
 
   opacity: 0;
 
-	transition:
+  transition:
     scale $duration,
-		translate $duration,
-		opacity $duration;
+    translate $duration,
+    opacity $duration;
 
-	[data-open] & {
+  [data-open] & {
     translate: 0 0;
     scale: 1;
     opacity: 1;
-	}
+  }
 }

package/src/helperComponents/{Actions/Actions.tsx → ActionsButton/ActionsButton.tsx}

@@ -6,7 +6,7 @@ import { BaseItemProps, Droplist } from '@snack-uikit/list';
 import { Tag } from '@snack-uikit/tag';
 
 import { TEST_IDS } from '../../components/NotificationCard/constants';
-import { stopPropagation } from '../../components/NotificationCard/helpers';
+import { stopPropagationClick } from '../../components/NotificationCard/helpers';
 import { NotificationCardProps } from '../../components/NotificationCard/NotificationCard';
 import styles from './styles.module.scss';
 
@@ -24,9 +24,21 @@ export type NotificationCardFunctionProps = Required<Pick<NotificationCardProps,
   className?: string;
 };
 
-export function Actions({ actions, open, setDroplistOpen, size, icon, className }: NotificationCardFunctionProps) {
+export function ActionsButton({
+  actions,
+  open,
+  setDroplistOpen,
+  size,
+  icon,
+  className,
+}: NotificationCardFunctionProps) {
   return (
-    <div className={cn(styles.container, className)} data-test-id={TEST_IDS.actions.wrapper} {...stopPropagation}>
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div
+      className={cn(styles.container, className)}
+      data-test-id={TEST_IDS.actions.wrapper}
+      onClick={stopPropagationClick}
+    >
       <Droplist
         trigger='clickAndFocusVisible'
         open={open}

package/src/helperComponents/ActionsButton/index.ts

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

package/src/helperComponents/{Actions → ActionsButton}/styles.module.scss

@@ -1,3 +1,3 @@
 .container {
   display: flex;
-}
+}

package/dist/cjs/helperComponents/Actions/Actions.js

@@ -1,69 +0,0 @@
-"use strict";
-
-var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
-  return mod && mod.__esModule ? mod : {
-    "default": mod
-  };
-};
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Actions = Actions;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const classnames_1 = __importDefault(require("classnames"));
-const button_1 = require("@snack-uikit/button");
-const list_1 = require("@snack-uikit/list");
-const tag_1 = require("@snack-uikit/tag");
-const constants_1 = require("../../components/NotificationCard/constants");
-const helpers_1 = require("../../components/NotificationCard/helpers");
-const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function Actions(_ref) {
-  let {
-    actions,
-    open,
-    setDroplistOpen,
-    size,
-    icon,
-    className
-  } = _ref;
-  return (0, jsx_runtime_1.jsx)("div", Object.assign({
-    className: (0, classnames_1.default)(styles_module_scss_1.default.container, className),
-    "data-test-id": constants_1.TEST_IDS.actions.wrapper
-  }, helpers_1.stopPropagation, {
-    children: (0, jsx_runtime_1.jsx)(list_1.Droplist, {
-      trigger: 'clickAndFocusVisible',
-      open: open,
-      onOpenChange: setDroplistOpen,
-      placement: 'bottom-end',
-      scroll: true,
-      "data-test-id": constants_1.TEST_IDS.actions.droplist,
-      items: actions.map(_ref2 => {
-        let {
-          onClick,
-          disabled,
-          content,
-          tagLabel,
-          icon
-        } = _ref2;
-        return {
-          onClick: e => {
-            setDroplistOpen(false);
-            onClick === null || onClick === void 0 ? void 0 : onClick(e);
-          },
-          disabled,
-          content,
-          beforeContent: icon,
-          afterContent: tagLabel ? (0, jsx_runtime_1.jsx)(tag_1.Tag, {
-            label: tagLabel
-          }) : undefined,
-          'data-test-id': constants_1.TEST_IDS.actions.droplistAction
-        };
-      }),
-      children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
-        size: size,
-        icon: icon,
-        "data-test-id": constants_1.TEST_IDS.actions.droplistTrigger
-      })
-    })
-  }));
-}

package/dist/cjs/helperComponents/Actions/index.d.ts

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

package/dist/esm/helperComponents/Actions/index.d.ts

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

package/dist/esm/helperComponents/Actions/index.js

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

package/src/helperComponents/Actions/index.ts

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