@snack-uikit/notification 0.13.25 → 0.13.26

package/dist/esm/components/NotificationPanel/components/NotificationCardStack/styles.module.css

@@ -0,0 +1,74 @@
+.container{
+  gap:var(--space-notification-panel-card-stack-container, 4px);
+  display:flex;
+  flex-direction:column;
+}
+
+.header{
+  gap:var(--space-notification-panel-card-stack-header-gap, 4px);
+  padding-bottom:var(--space-notification-panel-card-stack-header-padding-bottom, 4px);
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  color:var(var(--sys-neutral-text-main, #41424e));
+}
+
+.title{
+  font-family:var(--sans-title-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-title-s-font-weight, Semibold);
+  line-height:var(--sans-title-s-line-height, 20px);
+  font-size:var(--sans-title-s-font-size, 14px);
+  letter-spacing:var(--sans-title-s-letter-spacing, 0.15px);
+  paragraph-spacing:var(--sans-title-s-paragraph-spacing, 7.7px);
+  overflow:hidden;
+  flex-grow:1;
+  flex-shrink:1;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.right{
+  gap:var(--space-notification-panel-card-stack-header-gap, 4px);
+  display:flex;
+  flex-direction:row;
+  flex-grow:0;
+  flex-shrink:0;
+}
+
+.first{
+  display:flex;
+  flex-direction:column-reverse;
+}
+
+.stack{
+  position:relative;
+  overflow:visible;
+  height:auto;
+  transition:overflow var(--snack-notification-stack-animation-duration) allow-discrete step-end;
+}
+.stack:not([data-open]){
+  overflow:hidden;
+  transition:height var(--snack-notification-stack-animation-duration) allow-discrete step-end;
+}
+.stack:not([data-open])[data-tail-size]{
+  height:8px;
+}
+.stack:not([data-open])[data-tail-size="1"]{
+  height:4px;
+}
+
+.animationContainer{
+  translate:0 -100%;
+  scale:0.98;
+  display:flex;
+  flex-direction:column;
+  gap:var(--space-notification-panel-container-body-stack-cards, 4px);
+  margin-top:var(--space-notification-panel-container-body-stack-cards, 4px);
+  opacity:0;
+  transition:scale var(--snack-notification-stack-animation-duration), translate var(--snack-notification-stack-animation-duration), opacity var(--snack-notification-stack-animation-duration);
+}
+[data-open] .animationContainer{
+  translate:0 0;
+  scale:1;
+  opacity:1;
+}

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

@@ -0,0 +1,2 @@
+import { ReactNode } from 'react';
+export declare const cloneCard: (element: ReactNode, props: Record<string, unknown>) => string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined;

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

@@ -0,0 +1,7 @@
+import { cloneElement, isValidElement } from 'react';
+export const cloneCard = (element, props) => {
+    if (!isValidElement(element)) {
+        return element;
+    }
+    return cloneElement(element, Object.assign(Object.assign({}, element.props), props));
+};

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

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps } from '@snack-uikit/utils';
@@ -17,5 +17,5 @@ import styles from './styles.module.css';
 /** Разделитель для группировки или разделения карточек в списке */
 export function NotificationPanelDivider(_a) {
     var { text, className } = _a, rest = __rest(_a, ["text", "className"]);
-    return (_jsx(Typography.LightLabelS, Object.assign({ className: cn(styles.notificationPanelDivider, className) }, extractSupportProps(rest), { children: text })));
+    return (_jsxs("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { children: [_jsx("div", { className: styles.line }), _jsx(Typography.LightLabelS, { className: styles.text, children: text }), _jsx("div", { className: styles.line })] })));
 }

package/dist/esm/components/NotificationPanel/components/NotificationPanelDivider/styles.module.css

@@ -1,10 +1,19 @@
-.notificationPanelDivider{
-  height:var(--size-notification-panel-readed-divider, 32px);
-  border-bottom-width:var(--border-width-notification-panel-container, 1px);
+.container{
   display:flex;
+  gap:var(--space-notification-panel-divider-gap, 8px);
   align-items:center;
   justify-content:center;
+}
+
+.text{
+  flex-grow:0;
+  flex-shrink:0;
   color:var(--sys-neutral-text-light, #8b8e9b);
+}
+
+.line{
+  flex-grow:1;
+  flex-shrink:1;
   background-color:var(--sys-neutral-background2-level, #ffffff);
   border-bottom-color:var(--sys-neutral-decor-default, #dde0ea);
   border-bottom-style:solid;

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

@@ -1,2 +1,3 @@
 export * from './NotificationPanelSettings';
 export * from './NotificationPanelBlank';
+export * from './NotificationCardStack';

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

@@ -1,2 +1,3 @@
 export * from './NotificationPanelSettings';
 export * from './NotificationPanelBlank';
+export * from './NotificationCardStack';

package/dist/esm/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/esm/components/NotificationPanel/constants.js

@@ -9,4 +9,10 @@ export const TEST_IDS = {
     readAll: 'notification-panel__readAll',
     footerButton: 'notification-panel__footerButton',
     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/esm/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/esm/components/NotificationPanel/helperComponents/StackTail/StackTail.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './styles.module.css';
+export function StackTail({ open, count }) {
+    return (_jsx("div", { className: styles.container, "data-open": open || undefined, children: _jsxs("div", { className: styles.animationContainer, children: [count > 1 && _jsx("div", { className: styles.card, "data-level": '3' }), _jsx("div", { className: styles.card, "data-level": '2' })] }) }));
+}

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

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

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

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

package/dist/esm/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/esm/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/esm/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/esm/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/esm/helperComponents/ActionsButton/ActionsButton.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+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 { stopPropagationClick } from '../../components/NotificationCard/helpers';
+import styles from './styles.module.css';
+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);
+                },
+                disabled,
+                content,
+                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 }) }) }));
+}

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/dist/esm/helperComponents/ActionsButton/styles.module.css

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

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Notification",
-  "version": "0.13.25",
+  "version": "0.13.26",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -50,7 +50,8 @@
     "@snack-uikit/truncate-string": "0.7.7",
     "@snack-uikit/typography": "0.8.12",
     "@snack-uikit/utils": "4.0.1",
-    "classnames": "2.5.1"
+    "classnames": "2.5.1",
+    "uncontrollable": "9.0.0"
   },
-  "gitHead": "84371bbf91915f650a852df849cd71d416c5b7b2"
+  "gitHead": "e247cdff4704598b6b9197e0570d480f81095d80"
 }

package/src/components/NotificationCard/NotificationCard.tsx

@@ -1,24 +1,19 @@
 import cn from 'classnames';
-import { ElementType, MouseEventHandler, ReactElement, ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import { ElementType, MouseEventHandler, ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 
 import { ButtonSimple, ButtonSimpleProps, ButtonTonal, ButtonTonalProps } from '@snack-uikit/button';
+import { KebabSVG } from '@snack-uikit/icons';
 import { Link, PickLinkProps } from '@snack-uikit/link';
-import { BaseItemProps } from '@snack-uikit/list';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { NotificationCardFunction } from './components';
+import { type Action, ActionsButton } from '../../helperComponents/ActionsButton';
 import { APPEARANCE, TEST_IDS } from './constants';
-import { getIcon } from './helpers';
+import { getIcon, stopPropagationClick } from './helpers';
 import styles from './styles.module.scss';
 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;
@@ -122,7 +117,14 @@ export function NotificationCard<LinkElement extends ElementType = 'a'>({
       className={cn(styles.notificationCard, className)}
     >
       {actions?.length && (
-        <NotificationCardFunction actions={actions} open={isDroplistOpen} setDroplistOpen={setDroplistOpen} />
+        <ActionsButton
+          className={styles.notificationCardFunction}
+          actions={actions}
+          open={isDroplistOpen}
+          setDroplistOpen={setDroplistOpen}
+          size='s'
+          icon={<KebabSVG />}
+        />
       )}
 
       {label && (
@@ -146,7 +148,8 @@ export function NotificationCard<LinkElement extends ElementType = 'a'>({
       )}
 
       {(primaryButton || secondaryButton) && (
-        <div className={styles.notificationCardButtons}>
+        // 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/components/index.ts

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

package/src/components/NotificationCard/helpers.tsx

@@ -1,3 +1,5 @@
+import { MouseEvent } from 'react';
+
 import { AlarmFilledSVG, CheckFilledSVG, CrossFilledSVG, InfoFilledSVG } from '@snack-uikit/icons';
 
 import { APPEARANCE } from './constants';
@@ -18,3 +20,7 @@ export function getIcon(appearance: Appearance) {
       return null;
   }
 }
+
+export function stopPropagationClick(e: MouseEvent<HTMLElement>) {
+  e.stopPropagation();
+}

package/src/components/NotificationCard/styles.module.scss

@@ -40,8 +40,8 @@
   box-sizing: border-box;
   max-width: 100%;
 
-  border-bottom-color: styles-tokens-notification-notificationCard.$sys-neutral-decor-default;
-  border-bottom-style: solid;
+  border-color: styles-tokens-notification-notificationCard.$sys-neutral-decor-default;
+  border-style: solid;
 
   &::before {
     pointer-events: none;
@@ -62,7 +62,7 @@
   &:focus-visible {
     @include styles-tokens-notification-notificationCard.outline-var(styles-tokens-element.$container-focused-s);
 
-    border-bottom-color: transparent;
+    border-color: transparent;
     outline-color: styles-tokens-notification-notificationCard.$sys-available-complementary;
   }
 

package/src/components/NotificationPanel/NotificationPanel.tsx

@@ -12,6 +12,8 @@ import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
 import { NotificationCardSkeleton } from '../NotificationCard/components';
 import {
+  NotificationCardStack,
+  NotificationCardStackProps,
   NotificationPanelBlank,
   NotificationPanelBlankProps,
   NotificationPanelSettings,
@@ -110,17 +112,19 @@ export function NotificationPanel({
         </div>
       </div>
 
-      <Scroll size='m' className={styles.notificationPanelBody} ref={scrollContainerRef}>
-        {content}
-        {loading && (
-          <SkeletonContextProvider loading={loading || false}>
-            {skeletons.map(skeleton => (
-              <WithSkeleton key={skeleton} skeleton={<NotificationCardSkeleton />} />
-            ))}
-          </SkeletonContextProvider>
-        )}
+      <Scroll size='m' ref={scrollContainerRef}>
+        <div className={styles.notificationPanelBody}>
+          {content}
+          {loading && (
+            <SkeletonContextProvider loading={loading || false}>
+              {skeletons.map(skeleton => (
+                <WithSkeleton key={skeleton} skeleton={<NotificationCardSkeleton />} />
+              ))}
+            </SkeletonContextProvider>
+          )}
 
-        <div className={styles.scrollStub} ref={scrollEndRef} />
+          <div className={styles.scrollStub} ref={scrollEndRef} />
+        </div>
       </Scroll>
 
       {footerButton && (
@@ -142,4 +146,6 @@ export namespace NotificationPanel {
   export type BlankProps = NotificationPanelBlankProps;
   export const Divider: typeof NotificationPanelDivider = NotificationPanelDivider;
   export type DividerProps = NotificationPanelDividerProps;
+  export const Stack: typeof NotificationCardStack = NotificationCardStack;
+  export type StackProps = NotificationCardStackProps;
 }

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

@@ -0,0 +1,107 @@
+import { Children, ReactNode, useMemo, useState } from 'react';
+
+import { ButtonFunction } from '@snack-uikit/button';
+import { ChevronDownSVG, ChevronUpSVG, KebabSVG } from '@snack-uikit/icons';
+
+import { Action, ActionsButton } from '../../../../helperComponents/ActionsButton';
+import { TEST_IDS } from '../../constants';
+import { StackTail } from '../../helperComponents/StackTail';
+import { useAnimatedOpening } from './hooks';
+import styles from './styles.module.scss';
+import { cloneCard } from './utils';
+
+export type NotificationCardStackProps = {
+  /**
+   * Заголовок стопки карточек
+   */
+  title: string;
+  /**
+   * Состояние открыт/закрыт по умолчанию
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * Колбек смены состояния открыт/закрыт
+   * @type (open: boolean) => void
+   */
+  onOpenChanged?: (open: boolean) => void;
+  /**
+   * Карточки в стопке, видна первая карточка, остальные схлопываются под нее.
+   */
+  children: Iterable<ReactNode>;
+  /**
+   * Список действий в выпадающем меню
+   */
+  actions?: Action[];
+};
+
+const ANIMATION_DURATION = 0.3;
+
+export function NotificationCardStack({
+  children,
+  defaultOpen,
+  onOpenChanged,
+  title,
+  actions,
+}: NotificationCardStackProps) {
+  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 <>{first}</>;
+  }
+
+  const firstCardElement = open ? first : cloneCard(first, { onClick: toggleOpen });
+
+  return (
+    <div
+      className={styles.container}
+      style={{ '--snack-notification-stack-animation-duration': `${ANIMATION_DURATION}s` }}
+      data-test-id={TEST_IDS.cardStack.wrapper}
+    >
+      <div className={styles.header} data-test-id={TEST_IDS.cardStack.headline}>
+        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
+        <label className={styles.title} onClick={toggleOpen} data-test-id={TEST_IDS.cardStack.title}>
+          {title}
+        </label>
+        <div className={styles.right}>
+          {actions && actions.length > 0 && (
+            <ActionsButton
+              actions={actions}
+              open={actionsOpen}
+              setDroplistOpen={setActionsOpen}
+              size='xs'
+              icon={<KebabSVG />}
+            />
+          )}
+          <ButtonFunction
+            size='xs'
+            onClick={toggleOpen}
+            data-test-id={TEST_IDS.cardStack.openButton}
+            icon={open ? <ChevronUpSVG /> : <ChevronDownSVG />}
+          />
+        </div>
+      </div>
+      <div className={styles.cards}>
+        <div className={styles.first}>
+          {/* there is column-reverse because of card focus outline should be placed over stack tail */}
+          <StackTail open={open} count={stack.length} />
+          {firstCardElement}
+        </div>
+        <div className={styles.stack} data-open={open || undefined} data-tail-size={stack.length}>
+          <div className={styles.animationContainer}>{isVisible ? stack : []}</div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,45 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+type UseAnimatedOpeningProps = {
+  defaultOpen?: boolean;
+  onOpenChanged?: (open: boolean) => void;
+  duration: number;
+};
+
+type UseAnimatedOpeningResult = {
+  open: boolean;
+  isVisible: boolean;
+  toggleOpen(): void;
+};
+
+export function useAnimatedOpening({
+  defaultOpen = false,
+  onOpenChanged,
+  duration,
+}: UseAnimatedOpeningProps): UseAnimatedOpeningResult {
+  const [open, setOpen] = useUncontrolledProp(undefined, defaultOpen, onOpenChanged);
+  const [isVisible, setIsVisible] = useState(open);
+  const timeout = useRef<NodeJS.Timeout>();
+
+  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/src/components/NotificationPanel/components/NotificationCardStack/index.ts

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