@snack-uikit/notification 0.13.25 → 0.13.26

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

@@ -9,4 +9,10 @@ export declare const TEST_IDS: {
     readAll: string;
     footerButton: string;
     skeleton: string;
+    cardStack: {
+        headline: string;
+        wrapper: string;
+        title: string;
+        openButton: string;
+    };
 };

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

@@ -14,5 +14,11 @@ exports.TEST_IDS = {
   },
   readAll: 'notification-panel__readAll',
   footerButton: 'notification-panel__footerButton',
-  skeleton: 'notification-panel__skeleton'
+  skeleton: 'notification-panel__skeleton',
+  cardStack: {
+    headline: 'notification-panel__card-stack__headline',
+    wrapper: 'notification-panel__card-stack__wrapper',
+    title: 'notification-panel__card-stack__title',
+    openButton: 'notification-panel__card-stack__open-button'
+  }
 };

package/dist/cjs/components/NotificationPanel/helperComponents/StackTail/StackTail.d.ts

@@ -0,0 +1,6 @@
+type StackTailProps = {
+    open: boolean;
+    count: number;
+};
+export declare function StackTail({ open, count }: StackTailProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/NotificationPanel/helperComponents/StackTail/StackTail.js

@@ -0,0 +1,33 @@
+"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.StackTail = StackTail;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function StackTail(_ref) {
+  let {
+    open,
+    count
+  } = _ref;
+  return (0, jsx_runtime_1.jsx)("div", {
+    className: styles_module_scss_1.default.container,
+    "data-open": open || undefined,
+    children: (0, jsx_runtime_1.jsxs)("div", {
+      className: styles_module_scss_1.default.animationContainer,
+      children: [count > 1 && (0, jsx_runtime_1.jsx)("div", {
+        className: styles_module_scss_1.default.card,
+        "data-level": '3'
+      }), (0, jsx_runtime_1.jsx)("div", {
+        className: styles_module_scss_1.default.card,
+        "data-level": '2'
+      })]
+    })
+  });
+}

package/dist/cjs/components/NotificationPanel/helperComponents/StackTail/index.d.ts

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

package/dist/cjs/components/NotificationPanel/helperComponents/StackTail/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__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 = void 0 && (void 0).__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("./StackTail"), exports);

package/dist/cjs/components/NotificationPanel/helperComponents/StackTail/styles.module.css

@@ -0,0 +1,53 @@
+.container{
+  position:relative;
+  height:0;
+}
+
+.animationContainer{
+  position:absolute;
+  top:0;
+  bottom:calc(-1 * var(--space-notification-panel-card-stack-stack3-level-horizontal-padding, 8px));
+  overflow:hidden;
+  width:100%;
+  transition:bottom calc(var(--snack-notification-stack-animation-duration) / 2) calc(var(--snack-notification-stack-animation-duration) / 2 / 1.7) ease-out;
+}
+[data-open] .animationContainer{
+  bottom:-416px;
+  transition:bottom calc(var(--snack-notification-stack-animation-duration) / 2) ease-out;
+}
+
+.card{
+  position:absolute;
+  overflow:hidden;
+  height:200px;
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border:var(--border-width-notification-panel-card, 1px) solid var(--sys-neutral-decor-default, #dde0ea);
+  border-radius:var(--radius-notification-panel-card, 4px);
+  transition:left calc(var(--snack-notification-stack-animation-duration) / 2) calc(var(--snack-notification-stack-animation-duration) / 2) ease, right calc(var(--snack-notification-stack-animation-duration) / 2) calc(var(--snack-notification-stack-animation-duration) / 2) ease, opacity calc(var(--snack-notification-stack-animation-duration) / 2) calc(var(--snack-notification-stack-animation-duration) / 2) ease;
+}
+.card::after{
+  content:"";
+  position:absolute;
+  top:0;
+  right:0;
+  bottom:0;
+  left:0;
+  opacity:var(--opacity-a008, 0.08);
+  background-color:var(--sys-neutral-accent-default, #787b8a);
+}
+[data-open] .card{
+  right:0;
+  left:0;
+  opacity:0;
+  transition:left calc(var(--snack-notification-stack-animation-duration) / 2) ease, right calc(var(--snack-notification-stack-animation-duration) / 2) ease, opacity calc(var(--snack-notification-stack-animation-duration) / 2) ease;
+}
+.card[data-level="2"]{
+  right:var(--space-notification-panel-card-stack-stack2-level-horizontal-padding, 4px);
+  bottom:50%;
+  left:var(--space-notification-panel-card-stack-stack2-level-horizontal-padding, 4px);
+}
+.card[data-level="3"]{
+  right:var(--space-notification-panel-card-stack-stack3-level-horizontal-padding, 8px);
+  bottom:0;
+  left:var(--space-notification-panel-card-stack-stack3-level-horizontal-padding, 8px);
+}

package/dist/cjs/components/NotificationPanel/helperComponents/WithTooltip/WithTooltip.d.ts

@@ -3,5 +3,5 @@ import { TooltipProps } from '@snack-uikit/tooltip';
 type WithTooltipProps = PropsWithChildren<{
     tooltip?: TooltipProps;
 }>;
-export declare function WithTooltip({ tooltip, children }: WithTooltipProps): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function WithTooltip({ tooltip, children }: WithTooltipProps): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | null | undefined;
 export {};

package/dist/cjs/components/NotificationPanel/styles.module.css

@@ -32,14 +32,17 @@
 }
 
 .notificationPanelBody{
+  padding-top:var(--space-notification-panel-body-vertical-padding, 16px);
+  padding-bottom:var(--space-notification-panel-body-vertical-padding, 16px);
+  padding-left:var(--space-notification-panel-body-horizontal-padding, 16px);
+  padding-right:var(--space-notification-panel-body-horizontal-padding, 16px);
+  display:flex;
   flex:1 1 auto;
+  flex-direction:column;
+  gap:var(--space-notification-panel-container-body-gap, 16px);
   min-height:0;
 }
 
-.notificationPanelCard:last-of-type{
-  border-bottom:none;
-}
-
 .notificationPanelFooterButton{
   border-top-width:var(--border-width-notification-panel-container, 1px);
   border-bottom-right-radius:var(--radius-notification-panel-footer-radius-bottom, 4px);

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

@@ -0,0 +1,16 @@
+import { Dispatch, ReactElement, SetStateAction } from 'react';
+import { BaseItemProps } from '@snack-uikit/list';
+import { NotificationCardProps } from '../../components/NotificationCard/NotificationCard';
+export type Action = {
+    icon?: ReactElement;
+    tagLabel?: string;
+} & Pick<BaseItemProps, 'content' | 'onClick' | 'disabled'>;
+export type NotificationCardFunctionProps = Required<Pick<NotificationCardProps, 'actions'>> & {
+    actions: Action[];
+    open: boolean;
+    setDroplistOpen: Dispatch<SetStateAction<boolean>>;
+    size: 's' | 'xs';
+    icon: ReactElement;
+    className?: string;
+};
+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/ActionsButton/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__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 = void 0 && (void 0).__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("./ActionsButton"), exports);

package/dist/cjs/helperComponents/ActionsButton/styles.module.css

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

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

@@ -1,13 +1,9 @@
-import { ElementType, MouseEventHandler, ReactElement, ReactNode } from 'react';
+import { ElementType, MouseEventHandler, ReactNode } from 'react';
 import { ButtonSimpleProps, ButtonTonalProps } from '@snack-uikit/button';
 import { PickLinkProps } from '@snack-uikit/link';
-import { BaseItemProps } from '@snack-uikit/list';
 import { WithSupportProps } from '@snack-uikit/utils';
+import { type Action } from '../../helperComponents/ActionsButton';
 import { Appearance } from './types';
-type Action = {
-    icon?: ReactElement;
-    tagLabel?: string;
-} & Pick<BaseItemProps, 'content' | 'onClick' | 'disabled'>;
 export type NotificationCardProps<LinkElement extends ElementType = 'a'> = WithSupportProps<{
     /** Идентификатор уведомления */
     id: string;
@@ -40,4 +36,3 @@ export type NotificationCardProps<LinkElement extends ElementType = 'a'> = WithS
 }>;
 /** Компонент карточки уведомления */
 export declare function NotificationCard<LinkElement extends ElementType = 'a'>({ id, appearance, label, unread, title, content, link, date, onClick, primaryButton, secondaryButton, actions, onVisible, className, ...rest }: NotificationCardProps<LinkElement>): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -13,13 +13,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { ButtonSimple, ButtonTonal } from '@snack-uikit/button';
+import { KebabSVG } from '@snack-uikit/icons';
 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 { NotificationCardFunction } from './components';
+import { ActionsButton } from '../../helperComponents/ActionsButton';
 import { APPEARANCE, TEST_IDS } from './constants';
-import { getIcon } from './helpers';
+import { getIcon, stopPropagationClick } from './helpers';
 import styles from './styles.module.css';
 /** Компонент карточки уведомления */
 export function NotificationCard(_a) {
@@ -53,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(NotificationCardFunction, { actions: actions, open: isDroplistOpen, setDroplistOpen: setDroplistOpen })), 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", { className: styles.notificationCardButtons, 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/components/index.d.ts

@@ -1,2 +1 @@
-export * from './NotificationCardFunction';
 export * from './NotificationCardSkeleton';

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

@@ -1,2 +1 @@
-export * from './NotificationCardFunction';
 export * from './NotificationCardSkeleton';

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

@@ -1,2 +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 function stopPropagationClick(e: MouseEvent<HTMLElement>): void;

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

@@ -16,3 +16,6 @@ export function getIcon(appearance) {
             return null;
     }
 }
+export function stopPropagationClick(e) {
+    e.stopPropagation();
+}

package/dist/esm/components/NotificationCard/styles.module.css

@@ -1,6 +1,6 @@
 .notificationCardFunction{
   padding-top:var(--space-notification-panel-card-function-badge-padding-top, 12px);
-  padding-right:var(--space-notification-panel-card-function-badge-padding-right, 16px);
+  padding-right:var(--space-notification-panel-card-function-badge-padding-right, 12px);
   pointer-events:none;
   position:absolute;
   top:0;
@@ -24,19 +24,20 @@
 }
 
 .notificationCard{
-  padding-left:var(--space-notification-panel-card-padding-horizontal, 16px);
-  padding-right:var(--space-notification-panel-card-padding-horizontal, 16px);
-  padding-top:var(--space-notification-panel-card-padding-vertical, 16px);
-  padding-bottom:var(--space-notification-panel-card-padding-vertical, 16px);
+  padding-left:var(--space-notification-panel-card-padding-horizontal, 12px);
+  padding-right:var(--space-notification-panel-card-padding-horizontal, 12px);
+  padding-top:var(--space-notification-panel-card-padding-vertical, 12px);
+  padding-bottom:var(--space-notification-panel-card-padding-vertical, 12px);
   gap:var(--space-notification-panel-card-gap, 8px);
-  border-bottom-width:var(--border-width-notification-panel-card, 1px);
+  border-width:var(--border-width-notification-panel-card, 1px);
+  border-radius:var(--radius-notification-panel-card, 4px);
   position:relative;
   display:flex;
   flex-direction:column;
   box-sizing:border-box;
   max-width:100%;
-  border-bottom-color:var(--sys-neutral-decor-default, #dde0ea);
-  border-bottom-style:solid;
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
+  border-style:solid;
 }
 .notificationCard::before{
   pointer-events:none;
@@ -54,7 +55,7 @@
   outline-width:var(--border-state-focus-s-border-width, 2px);
   outline-style:var(--border-state-focus-s-border-style, solid);
   outline-color:var(--border-state-focus-s-border-color, );
-  border-bottom-color:transparent;
+  border-color:transparent;
   outline-color:var(--sys-available-complementary, #1c1c24);
 }
 .notificationCard[data-droplist-open]::before, .notificationCard:hover::before, .notificationCard:focus-visible::before, .notificationCard:focus-within:not(:focus)::before{

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

@@ -3,7 +3,7 @@ import { ButtonFunctionProps } from '@snack-uikit/button';
 import { SegmentedControlProps } from '@snack-uikit/segmented-control';
 import { TooltipProps } from '@snack-uikit/tooltip';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { NotificationPanelBlank, NotificationPanelBlankProps, NotificationPanelSettingsProps } from './components';
+import { NotificationCardStack, NotificationCardStackProps, NotificationPanelBlank, NotificationPanelBlankProps, NotificationPanelSettingsProps } from './components';
 import { NotificationPanelDivider, NotificationPanelDividerProps } from './components/NotificationPanelDivider';
 export type { NotificationPanelBlankProps };
 export type NotificationPanelProps = WithSupportProps<{
@@ -41,4 +41,6 @@ export declare namespace NotificationPanel {
     type BlankProps = NotificationPanelBlankProps;
     const Divider: typeof NotificationPanelDivider;
     type DividerProps = NotificationPanelDividerProps;
+    const Stack: typeof NotificationCardStack;
+    type StackProps = NotificationCardStackProps;
 }

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

@@ -20,7 +20,7 @@ import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { NotificationCardSkeleton } from '../NotificationCard/components';
-import { NotificationPanelBlank, NotificationPanelSettings, } from './components';
+import { NotificationCardStack, NotificationPanelBlank, NotificationPanelSettings, } from './components';
 import { NotificationPanelDivider } from './components/NotificationPanelDivider';
 import { TEST_IDS } from './constants';
 import { WithTooltip } from './helperComponents';
@@ -29,9 +29,10 @@ import styles from './styles.module.css';
 export function NotificationPanel(_a) {
     var { title, settings, segments, readAllButton, footerButton, content, loading, skeletonsAmount = 2, scrollEndRef, scrollContainerRef, className } = _a, rest = __rest(_a, ["title", "settings", "segments", "readAllButton", "footerButton", "content", "loading", "skeletonsAmount", "scrollEndRef", "scrollContainerRef", "className"]);
     const skeletons = useMemo(() => Array.from({ length: skeletonsAmount }, (_, i) => i), [skeletonsAmount]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [_jsxs("div", { className: styles.notificationPanelHeader, children: [_jsxs("div", { className: styles.notificationPanelHeadline, children: [_jsx(Typography.SansHeadlineS, { className: styles.notificationPanelTitle, children: _jsx(TruncateString, { text: title, "data-test-id": TEST_IDS.title }) }), _jsxs("div", { className: styles.notificationPanelHeaderActions, children: [readAllButton && (_jsx(WithTooltip, { tooltip: readAllButton.tooltip, children: _jsx(ButtonFunction, Object.assign({}, readAllButton, { onClick: readAllButton.onClick, size: 'xs', disabled: readAllButton.disabled || loading, "data-test-id": TEST_IDS.readAll })) })), settings && _jsx(NotificationPanelSettings, Object.assign({}, settings))] })] }), _jsx("div", { children: segments && (_jsx(SegmentedControl, Object.assign({}, segments, { size: 's', items: segments.items.map(item => (Object.assign(Object.assign({}, item), { disabled: item.disabled || loading }))), "data-test-id": TEST_IDS.segments }))) })] }), _jsxs(Scroll, { size: 'm', className: styles.notificationPanelBody, ref: scrollContainerRef, children: [content, loading && (_jsx(SkeletonContextProvider, { loading: loading || false, children: skeletons.map(skeleton => (_jsx(WithSkeleton, { skeleton: _jsx(NotificationCardSkeleton, {}) }, skeleton))) })), _jsx("div", { className: styles.scrollStub, ref: scrollEndRef })] }), footerButton && (_jsx("button", { type: 'button', onClick: footerButton.onClick, className: styles.notificationPanelFooterButton, "data-test-id": TEST_IDS.footerButton, children: _jsx(Typography.SansLabelS, { children: footerButton.label }) }))] })));
+    return (_jsxs("div", Object.assign({ className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [_jsxs("div", { className: styles.notificationPanelHeader, children: [_jsxs("div", { className: styles.notificationPanelHeadline, children: [_jsx(Typography.SansHeadlineS, { className: styles.notificationPanelTitle, children: _jsx(TruncateString, { text: title, "data-test-id": TEST_IDS.title }) }), _jsxs("div", { className: styles.notificationPanelHeaderActions, children: [readAllButton && (_jsx(WithTooltip, { tooltip: readAllButton.tooltip, children: _jsx(ButtonFunction, Object.assign({}, readAllButton, { onClick: readAllButton.onClick, size: 'xs', disabled: readAllButton.disabled || loading, "data-test-id": TEST_IDS.readAll })) })), settings && _jsx(NotificationPanelSettings, Object.assign({}, settings))] })] }), _jsx("div", { children: segments && (_jsx(SegmentedControl, Object.assign({}, segments, { size: 's', items: segments.items.map(item => (Object.assign(Object.assign({}, item), { disabled: item.disabled || loading }))), "data-test-id": TEST_IDS.segments }))) })] }), _jsx(Scroll, { size: 'm', ref: scrollContainerRef, children: _jsxs("div", { className: styles.notificationPanelBody, children: [content, loading && (_jsx(SkeletonContextProvider, { loading: loading || false, children: skeletons.map(skeleton => (_jsx(WithSkeleton, { skeleton: _jsx(NotificationCardSkeleton, {}) }, skeleton))) })), _jsx("div", { className: styles.scrollStub, ref: scrollEndRef })] }) }), footerButton && (_jsx("button", { type: 'button', onClick: footerButton.onClick, className: styles.notificationPanelFooterButton, "data-test-id": TEST_IDS.footerButton, children: _jsx(Typography.SansLabelS, { children: footerButton.label }) }))] })));
 }
 (function (NotificationPanel) {
     NotificationPanel.Blank = NotificationPanelBlank;
     NotificationPanel.Divider = NotificationPanelDivider;
+    NotificationPanel.Stack = NotificationCardStack;
 })(NotificationPanel || (NotificationPanel = {}));

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

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { Action } from '../../../../helperComponents/ActionsButton';
+export type NotificationCardStackProps = {
+    /**
+     * Заголовок стопки карточек
+     */
+    title: string;
+    /**
+     * Состояние открыт/закрыт по умолчанию
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Колбек смены состояния открыт/закрыт
+     * @type (open: boolean) => void
+     */
+    onOpenChanged?: (open: boolean) => void;
+    /**
+     * Карточки в стопке, видна первая карточка, остальные схлопываются под нее.
+     */
+    children: Iterable<ReactNode>;
+    /**
+     * Список действий в выпадающем меню
+     */
+    actions?: Action[];
+};
+export declare function NotificationCardStack({ children, defaultOpen, onOpenChanged, title, actions, }: NotificationCardStackProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,28 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, useMemo, useState } from 'react';
+import { ButtonFunction } from '@snack-uikit/button';
+import { ChevronDownSVG, ChevronUpSVG, KebabSVG } from '@snack-uikit/icons';
+import { ActionsButton } from '../../../../helperComponents/ActionsButton';
+import { TEST_IDS } from '../../constants';
+import { StackTail } from '../../helperComponents/StackTail';
+import { useAnimatedOpening } from './hooks';
+import styles from './styles.module.css';
+import { cloneCard } from './utils';
+const ANIMATION_DURATION = 0.3;
+export function NotificationCardStack({ children, defaultOpen, onOpenChanged, title, actions, }) {
+    const [actionsOpen, setActionsOpen] = useState(false);
+    const { open, toggleOpen, isVisible } = useAnimatedOpening({
+        defaultOpen,
+        onOpenChanged,
+        duration: ANIMATION_DURATION * 1000,
+    });
+    const [first, ...stack] = useMemo(() => Children.toArray(children), [children]);
+    if (!first) {
+        return null;
+    }
+    if (!stack.length) {
+        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(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

@@ -0,0 +1,12 @@
+type UseAnimatedOpeningProps = {
+    defaultOpen?: boolean;
+    onOpenChanged?: (open: boolean) => void;
+    duration: number;
+};
+type UseAnimatedOpeningResult = {
+    open: boolean;
+    isVisible: boolean;
+    toggleOpen(): void;
+};
+export declare function useAnimatedOpening({ defaultOpen, onOpenChanged, duration, }: UseAnimatedOpeningProps): UseAnimatedOpeningResult;
+export {};

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

@@ -0,0 +1,26 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+export function useAnimatedOpening({ defaultOpen = false, onOpenChanged, duration, }) {
+    const [open, setOpen] = useUncontrolledProp(undefined, defaultOpen, onOpenChanged);
+    const [isVisible, setIsVisible] = useState(open);
+    const timeout = useRef();
+    const toggleOpen = useCallback(() => {
+        setOpen(!open);
+    }, [open, setOpen]);
+    useEffect(() => {
+        clearTimeout(timeout.current);
+        if (open) {
+            setIsVisible(true);
+        }
+        else {
+            timeout.current = setTimeout(() => {
+                setIsVisible(false);
+            }, duration);
+        }
+    }, [open, duration]);
+    return {
+        toggleOpen,
+        open,
+        isVisible,
+    };
+}

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

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

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

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