@snack-uikit/notification 0.6.18-preview-3cdd8d31.0 → 0.7.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.7.0 (2024-02-21)
+
+
+### Features
+
+* **FF-4309:** remove popover and trigger from NotificationPanel, add buttons to NotificationCard, add Divider ([99d9114](https://github.com/cloud-ru-tech/snack-uikit/commit/99d9114943e2ef1b98bb8ff02b165b5cd4465432))
+
+
+
+
+
 ## 0.6.17 (2024-02-20)
 
 

package/README.md

@@ -91,6 +91,8 @@ const cards = [
 | link | `Omit<LinkProps, "data-test-id" \| "appearance" \| "size" \| "textMode">` | - | Ссылка |
 | onClick | `MouseEventHandler<HTMLDivElement>` | - | Колбэк клика по карточке |
 | onVisible | `(cardId: string) => void` | - | Колбэк при попадании карточки в область видимости на 80% |
+| primaryButton | `Omit<ButtonTonalProps, "data-test-id" \| "appearance" \| "size">` | - | Кнопка главного действия у карточки |
+| secondaryButton | `Omit<ButtonSimpleProps, "data-test-id" \| "appearance" \| "size">` | - | Кнопка второстепенного действия у карточки |
 | actions | `Action[]` | - | Дополнительные действия у карточки |
 | className | `string` | - | CSS-класс |
 ## NotificationPanel
@@ -98,15 +100,39 @@ const cards = [
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| triggerElement* | `ReactNode \| ChildrenFunction` | - | Элемент для открытия панели |
 | title* | `string` | - | Заголовок панели |
 | settings | `NotificationPanelSettingsProps` | - | Кнопка настроек и выпадающий список |
 | chips | `Omit<ChipToggleProps, "data-test-id" \| "size">[]` | - | Чипы для фильтрации |
 | readAllButton | `Omit<ButtonFunctionProps, "data-test-id"> & { onClick: MouseEventHandler<HTMLElement>; }` | - | Кнопка в "шапке" панели |
 | footerButton | `{ label: string; onClick: MouseEventHandler<HTMLButtonElement>; }` | - | Кнопка внизу панели |
+| className | `string` | - | CSS-класс |
 | loading | `boolean` | - | Состояние загрузки |
 | content | `ReactNode` | - | Контент для отрисовки (e.g NotificationCard \| NotificationPanel.Blank) |
 | skeletonsAmount | `number` | 2 | Количество скелетонов карточек для отображения при загрузке |
+| scrollEndRef | `RefObject<HTMLDivElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
+| scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
+## NotificationPanel.Blank
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| title | `string` | - | Заголовок |
+| className | `string` | - | CSS-класс |
+| icon | `Pick<IconPredefinedProps, "appearance" \| "icon" \| "decor">` | - | Иконка |
+| description | `string` | - | Подзаголовок |
+## NotificationPanel.Divider
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| text* | `string` | - | Текст разделителя |
+| className | `string` | - | CSS-класс |
+## NotificationPanelPopover
+Компонент-обёртка для NotificationPanel для использования как выпадающий элемент
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| children* | `ReactNode \| ChildrenFunction` | - | Триггер поповера (подробнее читайте ниже) |
+| content* | `ReactElement<NotificationPanelProps, typeof NotificationPanel>` | - |  |
+| contentClassName | `string` | - | CSS-класс для элемента содержащего контент |
 | className | `string` | - | CSS-класс |
 | triggerClassName | `string` | - | CSS-класс триггера |
 | open | `boolean` | - | Управляет состоянием показан/не показан. |
@@ -117,18 +143,8 @@ const cards = [
 | closeOnEscapeKey | `boolean` | true | Закрывать ли по нажатию на кнопку `Esc` |
 | triggerClickByKeys | `boolean` | true | Вызывается ли попоповер по нажатию клавиш Enter/Space (при trigger = `click`) |
 | triggerRef | `ForwardedRef<HTMLElement \| ReferenceType>` | - | Ref ссылка на триггер |
-| trigger | enum Trigger: `"click"`, `"hover"`, `"focusVisible"`, `"focus"`, `"hoverAndFocusVisible"`, `"hoverAndFocus"`, `"clickAndFocusVisible"` | - | Условие отображения поповера: <br> - `click` - открывать по клику <br> - `hover` - открывать по ховеру <br> - `focusVisible` - открывать по focus-visible <br> - `focus` - открывать по фокусу <br> - `hoverAndFocusVisible` - открывать по ховеру и focus-visible <br> - `hoverAndFocus` - открывать по ховеру и фокусу <br> - `clickAndFocusVisible` - открывать по клику и focus-visible |
-| placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Положение поповера относительно своего триггера (children). |
-| contentClassName | `string` | - | CSS-класс для элемента содержащего контент |
-## NotificationPanel.Blank
-### Props
-| name | type | default value | description |
-|------|------|---------------|-------------|
-| title* | `ReactNode` | - | Заголовок |
-| description | `ReactNode` | - | Описание |
-| icon | `JSXElementConstructor<{ size?: number; className?: string; }>` | - | Иконка |
-| iconAppearance | enum Appearance: `"neutral"`, `"primary"`, `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"` | - | Цвет обводки для иконки |
-| className | `string` | - | CSS-класс |
+| trigger | enum Trigger: `"click"`, `"hover"`, `"focusVisible"`, `"focus"`, `"hoverAndFocusVisible"`, `"hoverAndFocus"`, `"clickAndFocusVisible"` | click | Условие отображения поповера: <br> - `click` - открывать по клику <br> - `hover` - открывать по ховеру <br> - `focusVisible` - открывать по focus-visible <br> - `focus` - открывать по фокусу <br> - `hoverAndFocusVisible` - открывать по ховеру и focus-visible <br> - `hoverAndFocus` - открывать по ховеру и фокусу <br> - `clickAndFocusVisible` - открывать по клику и focus-visible |
+| placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | bottom-end | Положение поповера относительно своего триггера (children). |
 
 
 [//]: DOCUMENTATION_SECTION_END

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

@@ -1,4 +1,5 @@
 import { MouseEventHandler, ReactElement, ReactNode } from 'react';
+import { ButtonSimpleProps, ButtonTonalProps } from '@snack-uikit/button';
 import { LinkProps } from '@snack-uikit/link';
 import { BaseItemProps } from '@snack-uikit/list';
 import { WithSupportProps } from '@snack-uikit/utils';
@@ -28,11 +29,15 @@ export type NotificationCardProps = WithSupportProps<{
     onClick?: MouseEventHandler<HTMLDivElement>;
     /** Колбэк при попадании карточки в область видимости на 80% */
     onVisible?(cardId: string): void;
+    /** Кнопка главного действия у карточки */
+    primaryButton?: Omit<ButtonTonalProps, 'size' | 'appearance' | 'data-test-id'>;
+    /** Кнопка второстепенного действия у карточки */
+    secondaryButton?: Omit<ButtonSimpleProps, 'size' | 'appearance' | 'data-test-id'>;
     /** Дополнительные действия у карточки */
     actions?: Action[];
     /** CSS-класс */
     className?: string;
 }>;
 /** Компонент карточки уведомления */
-export declare function NotificationCard({ id, appearance, label, unread, title, content, link, date, onClick, actions, onVisible, className, ...rest }: NotificationCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function NotificationCard({ id, appearance, label, unread, title, content, link, date, onClick, primaryButton, secondaryButton, actions, onVisible, className, ...rest }: NotificationCardProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/NotificationCard/NotificationCard.js

@@ -12,6 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 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 { Link } from '@snack-uikit/link';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
@@ -22,10 +23,11 @@ import { getIcon } from './helpers';
 import styles from './styles.module.css';
 /** Компонент карточки уведомления */
 export function NotificationCard(_a) {
-    var { id, appearance = APPEARANCE.Neutral, label, unread, title, content, link, date, onClick, actions, onVisible, className } = _a, rest = __rest(_a, ["id", "appearance", "label", "unread", "title", "content", "link", "date", "onClick", "actions", "onVisible", "className"]);
-    const { icon, linkOnColor } = useMemo(() => ({
+    var { id, appearance = APPEARANCE.Neutral, label, unread, title, content, link, date, onClick, primaryButton, secondaryButton, actions, onVisible, className } = _a, rest = __rest(_a, ["id", "appearance", "label", "unread", "title", "content", "link", "date", "onClick", "primaryButton", "secondaryButton", "actions", "onVisible", "className"]);
+    const { icon, linkOnColor, buttonAppearance } = useMemo(() => ({
         icon: getIcon(appearance),
         linkOnColor: appearance === APPEARANCE.ErrorCritical ? 'red' : undefined,
+        buttonAppearance: appearance === APPEARANCE.ErrorCritical ? 'destructive' : 'primary',
     }), [appearance]);
     const [isDroplistOpen, setDroplistOpen] = useState(false);
     const cardRef = useRef(null);
@@ -55,5 +57,5 @@ 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 })), showFooter && (_jsxs("div", { className: styles.notificationCardFooter, children: [link && (_jsx(Link, Object.assign({}, link, { onClick: handleLinkClick, appearance: linkOnColor, textMode: 'default', 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(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: buttonAppearance, size: 's', "data-test-id": TEST_IDS.primaryButton }))), primaryButton && (_jsx(ButtonTonal, Object.assign({}, primaryButton, { appearance: buttonAppearance, size: 's', "data-test-id": TEST_IDS.secondaryButton })))] })), showFooter && (_jsxs("div", { className: styles.notificationCardFooter, children: [link && (_jsx(Link, Object.assign({}, link, { onClick: handleLinkClick, appearance: linkOnColor, textMode: 'default', 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/components/NotificationCard/constants.d.ts

@@ -17,4 +17,6 @@ export declare const TEST_IDS: {
         droplistTrigger: string;
         droplistAction: string;
     };
+    primaryButton: string;
+    secondaryButton: string;
 };

package/dist/components/NotificationCard/constants.js

@@ -17,4 +17,6 @@ export const TEST_IDS = {
         droplistTrigger: 'notification-card__droplist-trigger',
         droplistAction: 'notification-card__droplist-action',
     },
+    primaryButton: 'notification-card__primary-button',
+    secondaryButton: 'notification-card__secondary-button',
 };

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

@@ -125,4 +125,10 @@
   box-sizing:border-box;
   color:var(--sys-neutral-text-light, #868892);
   text-align:right;
+}
+
+.notificationCardButtons{
+  display:flex;
+  align-items:center;
+  justify-content:flex-end;
 }

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

@@ -1,10 +1,11 @@
-import { MouseEventHandler, ReactNode } from 'react';
+import { MouseEventHandler, ReactNode, RefObject } from 'react';
 import { ButtonFunctionProps } from '@snack-uikit/button';
 import { ChipToggleProps } from '@snack-uikit/chips';
-import { NotificationPanelPopoverProps } from '../../helperComponents';
+import { WithSupportProps } from '@snack-uikit/utils';
 import { NotificationPanelBlank, NotificationPanelBlankProps, NotificationPanelSettingsProps } from './components';
+import { NotificationPanelDivider, NotificationPanelDividerProps } from './components/NotificationPanelDivider';
 export type { NotificationPanelBlankProps };
-export type NotificationPanelProps = {
+export type NotificationPanelProps = WithSupportProps<{
     /** Заголовок панели */
     title: string;
     /** Кнопка настроек и выпадающий список */
@@ -15,23 +16,28 @@ export type NotificationPanelProps = {
     readAllButton?: Omit<ButtonFunctionProps, 'data-test-id'> & {
         onClick: ButtonFunctionProps['onClick'];
     };
-    /** Элемент для открытия панели */
-    triggerElement: NotificationPanelPopoverProps['children'];
     /** Кнопка внизу панели */
     footerButton?: {
         label: string;
         onClick: MouseEventHandler<HTMLButtonElement>;
     };
+    className?: string;
     /** Состояние загрузки */
     loading?: boolean;
     /** Контент для отрисовки (e.g NotificationCard | NotificationPanel.Blank) */
     content?: ReactNode;
     /** Количество скелетонов карточек для отображения при загрузке */
     skeletonsAmount?: number;
-} & Omit<NotificationPanelPopoverProps, 'children' | 'content'>;
+    /** Ссылка на элемент, обозначающий самый конец прокручиваемого списка */
+    scrollEndRef?: RefObject<HTMLDivElement>;
+    /** Ссылка на контейнер, который скроллится */
+    scrollContainerRef?: RefObject<HTMLElement>;
+}>;
 /** Компонент панели для уведомлений */
-export declare function NotificationPanel({ title, triggerElement, settings, chips, readAllButton, footerButton, content, loading, skeletonsAmount, ...rest }: NotificationPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function NotificationPanel({ title, settings, chips, readAllButton, footerButton, content, loading, skeletonsAmount, scrollEndRef, scrollContainerRef, className, ...rest }: NotificationPanelProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace NotificationPanel {
     const Blank: typeof NotificationPanelBlank;
     type BlankProps = NotificationPanelBlankProps;
+    const Divider: typeof NotificationPanelDivider;
+    type DividerProps = NotificationPanelDividerProps;
 }

package/dist/components/NotificationPanel/NotificationPanel.js

@@ -10,7 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
 import { useMemo } from 'react';
 import { ButtonFunction } from '@snack-uikit/button';
 import { ChipToggle } from '@snack-uikit/chips';
@@ -18,17 +19,19 @@ import { Scroll } from '@snack-uikit/scroll';
 import { SkeletonContextProvider, WithSkeleton } from '@snack-uikit/skeleton';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
-import { NotificationPanelPopover } from '../../helperComponents';
+import { extractSupportProps } from '@snack-uikit/utils';
 import { NotificationCardSkeleton } from '../NotificationCard/components';
 import { NotificationPanelBlank, NotificationPanelSettings, } from './components';
+import { NotificationPanelDivider } from './components/NotificationPanelDivider';
 import { TEST_IDS } from './constants';
 import styles from './styles.module.css';
 /** Компонент панели для уведомлений */
 export function NotificationPanel(_a) {
-    var { title, triggerElement, settings, chips, readAllButton, footerButton, content, loading, skeletonsAmount = 2 } = _a, rest = __rest(_a, ["title", "triggerElement", "settings", "chips", "readAllButton", "footerButton", "content", "loading", "skeletonsAmount"]);
+    var { title, settings, chips, readAllButton, footerButton, content, loading, skeletonsAmount = 2, scrollEndRef, scrollContainerRef, className } = _a, rest = __rest(_a, ["title", "settings", "chips", "readAllButton", "footerButton", "content", "loading", "skeletonsAmount", "scrollEndRef", "scrollContainerRef", "className"]);
     const skeletons = useMemo(() => Array.from({ length: skeletonsAmount }, (_, i) => i), [skeletonsAmount]);
-    return (_jsx(NotificationPanelPopover, Object.assign({}, rest, { content: _jsxs(_Fragment, { 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 }) }), settings && _jsx(NotificationPanelSettings, Object.assign({}, settings))] }), _jsxs("div", { className: styles.notificationPanelHeaderFunctions, children: [_jsx("div", { className: styles.notificationPanelChips, children: chips === null || chips === void 0 ? void 0 : chips.map(chip => (_createElement(ChipToggle, Object.assign({}, chip, { key: chip.label, "data-test-id": `${TEST_IDS.chip}-${chip.label}`, size: 'xs', disabled: chip.disabled || loading })))) }), readAllButton && (_jsx(ButtonFunction, Object.assign({}, readAllButton, { disabled: readAllButton.disabled || loading, "data-test-id": TEST_IDS.readAll })))] })] }), _jsx(Scroll, { size: 'm', className: styles.notificationPanelBody, children: loading ? (_jsx(SkeletonContextProvider, { loading: loading || false, children: skeletons.map(skeleton => (_jsx(WithSkeleton, { skeleton: _jsx(NotificationCardSkeleton, {}) }, skeleton))) })) : (content) }), !loading && footerButton && (_jsx("button", { className: styles.notificationPanelFooterButton, "data-test-id": TEST_IDS.footerButton, children: _jsx(Typography.SansLabelS, { children: footerButton.label }) }))] }), children: triggerElement })));
+    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 }) }), settings && _jsx(NotificationPanelSettings, Object.assign({}, settings))] }), _jsxs("div", { className: styles.notificationPanelHeaderFunctions, children: [_jsx("div", { className: styles.notificationPanelChips, children: chips === null || chips === void 0 ? void 0 : chips.map(chip => (_createElement(ChipToggle, Object.assign({}, chip, { key: chip.label, "data-test-id": `${TEST_IDS.chip}-${chip.label}`, size: 'xs', disabled: chip.disabled || loading })))) }), readAllButton && (_jsx(ButtonFunction, Object.assign({}, readAllButton, { disabled: readAllButton.disabled || loading, "data-test-id": TEST_IDS.readAll })))] })] }), _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", { 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 || (NotificationPanel = {}));

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

@@ -1,17 +1,4 @@
-import { ReactNode } from 'react';
-import { IconPredefinedProps } from '@snack-uikit/icon-predefined';
-import { WithSupportProps } from '@snack-uikit/utils';
-export type NotificationPanelBlankProps = WithSupportProps<{
-    /** Заголовок */
-    title: ReactNode;
-    /** Описание */
-    description?: ReactNode;
-    /** Иконка */
-    icon?: IconPredefinedProps['icon'];
-    /** Цвет обводки для иконки */
-    iconAppearance?: IconPredefinedProps['appearance'];
-    /** CSS-класс */
-    className?: string;
-}>;
+import { InfoBlockProps } from '@snack-uikit/info-block';
+export type NotificationPanelBlankProps = Omit<InfoBlockProps, 'footer' | 'align' | 'size'>;
 /** Компонента для "заглушки" вместо карточек в панели */
-export declare function NotificationPanelBlank({ icon, iconAppearance, title, description, className, ...rest }: NotificationPanelBlankProps): import("react/jsx-runtime").JSX.Element;
+export declare function NotificationPanelBlank({ icon, className, ...props }: NotificationPanelBlankProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/NotificationPanel/components/NotificationPanelBlank/NotificationPanelBlank.js

@@ -9,15 +9,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import cn from 'classnames';
-import { IconPredefined } from '@snack-uikit/icon-predefined';
-import { Typography } from '@snack-uikit/typography';
-import { extractSupportProps } from '@snack-uikit/utils';
-import { TEST_IDS } from '../../constants';
+import { InfoBlock } from '@snack-uikit/info-block';
 import styles from './styles.module.css';
 /** Компонента для "заглушки" вместо карточек в панели */
 export function NotificationPanelBlank(_a) {
-    var { icon, iconAppearance = 'neutral', title, description, className } = _a, rest = __rest(_a, ["icon", "iconAppearance", "title", "description", "className"]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.notificationPanelBlank, className) }, extractSupportProps(rest), { children: [icon && _jsx(IconPredefined, { icon: icon, appearance: iconAppearance, size: 'l', "data-test-id": TEST_IDS.blank.icon }), _jsxs("div", { className: styles.notificationPanelBlankContent, children: [_jsx(Typography.SansTitleS, { tag: 'div', className: styles.notificationPanelBlankTitle, "data-test-id": TEST_IDS.blank.title, children: title }), _jsx(Typography.SansBodyM, { tag: 'div', className: styles.notificationPanelBlankDescription, "data-test-id": TEST_IDS.blank.description, children: description })] })] })));
+    var _b;
+    var { icon, className } = _a, props = __rest(_a, ["icon", "className"]);
+    return (_jsx(_Fragment, { children: _jsx(InfoBlock, Object.assign({}, props, { icon: icon ? Object.assign(Object.assign({}, icon), { appearance: (_b = icon.appearance) !== null && _b !== void 0 ? _b : 'neutral' }) : undefined, size: 'l', align: 'vertical', className: cn(styles.notificationPanelBlank, className) })) }));
 }

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

@@ -1,27 +1,3 @@
 .notificationPanelBlank{
-  gap:var(--space-notification-panel-blank-gap, 16px);
-  padding-top:var(--space-notification-panel-blank-vertical-padding, 24px);
-  padding-bottom:var(--space-notification-panel-blank-vertical-padding, 24px);
-  display:flex;
-  flex-direction:column;
-  align-items:center;
-  box-sizing:border-box;
-}
-
-.notificationPanelBlankContent{
-  gap:var(--space-notification-panel-blank-text-gap, 4px);
-  display:flex;
-  flex-direction:column;
-  align-items:center;
-  box-sizing:border-box;
-  text-align:center;
-}
-
-.notificationPanelBlankTitle{
-  color:var(--sys-neutral-text-main, #33333b);
-}
-
-.notificationPanelBlankDescription{
-  color:var(--sys-neutral-text-support, #656771);
-  white-space:pre-line;
+  padding:var(--space-notification-panel-body-info-padding, 24px);
 }

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

@@ -0,0 +1,8 @@
+import { WithSupportProps } from '@snack-uikit/utils';
+export type NotificationPanelDividerProps = WithSupportProps<{
+    /** Текст разделителя */
+    text: string;
+    className?: string;
+}>;
+/** Разделитель для группировки или разделения карточек в списке */
+export declare function NotificationPanelDivider({ text, className, ...rest }: NotificationPanelDividerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import { Typography } from '@snack-uikit/typography';
+import { extractSupportProps } from '@snack-uikit/utils';
+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 })));
+}

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

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

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

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

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

@@ -0,0 +1,10 @@
+.notificationPanelDivider{
+  height:var(--size-notification-panel-readed-divider, 32px);
+  border-bottom-width:var(--border-width-notification-panel-container, 1px);
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  color:var(--sys-neutral-text-light, #868892);
+  border-bottom-color:var(--sys-neutral-decor-default, #dfe2ec);
+  border-bottom-style:solid;
+}

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

@@ -8,10 +8,5 @@ export declare const TEST_IDS: {
     };
     readAll: string;
     footerButton: string;
-    blank: {
-        icon: string;
-        title: string;
-        description: string;
-    };
     skeleton: string;
 };

package/dist/components/NotificationPanel/constants.js

@@ -8,10 +8,5 @@ export const TEST_IDS = {
     },
     readAll: 'notification-panel__readAll',
     footerButton: 'notification-panel__footerButton',
-    blank: {
-        icon: 'notification-panel__blank__icon',
-        title: 'notification-panel__blank__title',
-        description: 'notification-panel__blank__description',
-    },
     skeleton: 'notification-panel__skeleton',
 };

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

@@ -94,4 +94,18 @@
 .notificationPanelFooterButton:active{
   color:var(--sys-neutral-text-main, #33333b);
   border-color:var(--sys-neutral-decor-default, #dfe2ec);
+}
+
+.wrapper{
+  box-sizing:border-box;
+  width:100%;
+  height:100%;
+  display:flex;
+  flex-direction:column;
+}
+
+.scrollStub{
+  height:calc(var(--dimension-025m, 2px) / 2);
+  margin-top:calc(var(--dimension-025m, 2px) / -2);
+  background:transparent;
 }

package/dist/{helperComponents → components}/NotificationPanelPopover/NotificationPanelPopover.d.ts

@@ -1,9 +1,11 @@
-import { ReactNode } from 'react';
+import { ReactElement } from 'react';
 import { PopoverPrivateProps } from '@snack-uikit/popover-private';
 import { WithSupportProps } from '@snack-uikit/utils';
+import { NotificationPanel, NotificationPanelProps } from '../NotificationPanel';
 export type NotificationPanelPopoverProps = WithSupportProps<{
-    content: ReactNode;
+    content: ReactElement<NotificationPanelProps, typeof NotificationPanel>;
     /** CSS-класс для элемента содержащего контент */
     contentClassName?: string;
 } & Pick<PopoverPrivateProps, 'className' | 'triggerClassName' | 'open' | 'onOpenChange' | 'hoverDelayOpen' | 'hoverDelayClose' | 'offset' | 'children' | 'closeOnEscapeKey' | 'triggerClickByKeys' | 'triggerRef'> & Partial<Pick<PopoverPrivateProps, 'trigger' | 'placement'>>>;
+/** Компонент-обёртка для NotificationPanel для использования как выпадающий элемент */
 export declare function NotificationPanelPopover({ content, trigger, placement, children, contentClassName, ...otherProps }: NotificationPanelPopoverProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/{helperComponents → components}/NotificationPanelPopover/NotificationPanelPopover.js

@@ -13,6 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import cn from 'classnames';
 import { PopoverPrivate } from '@snack-uikit/popover-private';
 import styles from './styles.module.css';
+/** Компонент-обёртка для NotificationPanel для использования как выпадающий элемент */
 export function NotificationPanelPopover(_a) {
     var { content, trigger = 'click', placement = 'bottom-end', children, contentClassName } = _a, otherProps = __rest(_a, ["content", "trigger", "placement", "children", "contentClassName"]);
     if (!children) {

package/dist/components/index.d.ts

@@ -1,2 +1,3 @@
 export * from './NotificationCard';
 export * from './NotificationPanel';
+export * from './NotificationPanelPopover';

package/dist/components/index.js

@@ -1,2 +1,3 @@
 export * from './NotificationCard';
 export * from './NotificationPanel';
+export * from './NotificationPanelPopover';

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Notification",
-  "version": "0.6.18-preview-3cdd8d31.0",
+  "version": "0.7.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,19 +33,19 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.16.1",
-    "@snack-uikit/chips": "0.11.8-preview-3cdd8d31.0",
-    "@snack-uikit/icon-predefined": "0.4.2",
-    "@snack-uikit/icons": "0.20.2-preview-3cdd8d31.0",
-    "@snack-uikit/link": "0.11.3-preview-3cdd8d31.0",
-    "@snack-uikit/list": "0.3.5-preview-3cdd8d31.0",
+    "@snack-uikit/chips": "0.11.7",
+    "@snack-uikit/icons": "0.20.1",
+    "@snack-uikit/info-block": "0.1.3",
+    "@snack-uikit/link": "0.11.2",
+    "@snack-uikit/list": "0.3.4",
     "@snack-uikit/popover-private": "0.13.0",
     "@snack-uikit/scroll": "0.5.1",
     "@snack-uikit/skeleton": "0.3.3",
-    "@snack-uikit/tag": "0.7.5-preview-3cdd8d31.0",
-    "@snack-uikit/truncate-string": "0.4.9-preview-3cdd8d31.0",
+    "@snack-uikit/tag": "0.7.4",
+    "@snack-uikit/truncate-string": "0.4.8",
     "@snack-uikit/typography": "0.6.1",
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "5c53d9cb0f3fcf9430b33814daca0755e43cc103"
+  "gitHead": "5489922b5df66a5cae5f4af6c050872a9a6cd23a"
 }

package/src/components/NotificationCard/NotificationCard.tsx

@@ -1,6 +1,7 @@
 import cn from 'classnames';
 import { MouseEventHandler, ReactElement, ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 
+import { ButtonSimple, ButtonSimpleProps, ButtonTonal, ButtonTonalProps } from '@snack-uikit/button';
 import { Link, LinkProps } from '@snack-uikit/link';
 import { BaseItemProps } from '@snack-uikit/list';
 import { TruncateString } from '@snack-uikit/truncate-string';
@@ -39,6 +40,10 @@ export type NotificationCardProps = WithSupportProps<{
   onClick?: MouseEventHandler<HTMLDivElement>;
   /** Колбэк при попадании карточки в область видимости на 80% */
   onVisible?(cardId: string): void;
+  /** Кнопка главного действия у карточки */
+  primaryButton?: Omit<ButtonTonalProps, 'size' | 'appearance' | 'data-test-id'>;
+  /** Кнопка второстепенного действия у карточки */
+  secondaryButton?: Omit<ButtonSimpleProps, 'size' | 'appearance' | 'data-test-id'>;
   /** Дополнительные действия у карточки */
   actions?: Action[];
   /** CSS-класс */
@@ -56,15 +61,22 @@ export function NotificationCard({
   link,
   date,
   onClick,
+  primaryButton,
+  secondaryButton,
   actions,
   onVisible,
   className,
   ...rest
 }: NotificationCardProps) {
-  const { icon, linkOnColor } = useMemo<{ icon: ReturnType<typeof getIcon>; linkOnColor: LinkProps['appearance'] }>(
+  const { icon, linkOnColor, buttonAppearance } = useMemo<{
+    icon: ReturnType<typeof getIcon>;
+    linkOnColor: LinkProps['appearance'];
+    buttonAppearance: ButtonTonalProps['appearance'];
+  }>(
     () => ({
       icon: getIcon(appearance),
       linkOnColor: appearance === APPEARANCE.ErrorCritical ? 'red' : undefined,
+      buttonAppearance: appearance === APPEARANCE.ErrorCritical ? 'destructive' : 'primary',
     }),
     [appearance],
   );
@@ -144,6 +156,28 @@ export function NotificationCard({
         </Typography.SansBodyS>
       )}
 
+      {(primaryButton || secondaryButton) && (
+        <div className={styles.notificationCardButtons}>
+          {secondaryButton && (
+            <ButtonSimple
+              {...secondaryButton}
+              appearance={buttonAppearance}
+              size='s'
+              data-test-id={TEST_IDS.primaryButton}
+            />
+          )}
+
+          {primaryButton && (
+            <ButtonTonal
+              {...primaryButton}
+              appearance={buttonAppearance}
+              size='s'
+              data-test-id={TEST_IDS.secondaryButton}
+            />
+          )}
+        </div>
+      )}
+
       {showFooter && (
         <div className={styles.notificationCardFooter}>
           {link && (

package/src/components/NotificationCard/constants.ts

@@ -18,4 +18,6 @@ export const TEST_IDS = {
     droplistTrigger: 'notification-card__droplist-trigger',
     droplistAction: 'notification-card__droplist-action',
   },
+  primaryButton: 'notification-card__primary-button',
+  secondaryButton: 'notification-card__secondary-button',
 };

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

@@ -170,3 +170,9 @@
   color: $sys-neutral-text-light;
   text-align: right;
 }
+
+.notificationCardButtons {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}

package/src/components/NotificationPanel/NotificationPanel.tsx

@@ -1,4 +1,5 @@
-import { MouseEventHandler, ReactNode, useMemo } from 'react';
+import cn from 'classnames';
+import { MouseEventHandler, ReactNode, RefObject, useMemo } from 'react';
 
 import { ButtonFunction, ButtonFunctionProps } from '@snack-uikit/button';
 import { ChipToggle, ChipToggleProps } from '@snack-uikit/chips';
@@ -6,8 +7,8 @@ import { Scroll } from '@snack-uikit/scroll';
 import { SkeletonContextProvider, WithSkeleton } from '@snack-uikit/skeleton';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { NotificationPanelPopover, NotificationPanelPopoverProps } from '../../helperComponents';
 import { NotificationCardSkeleton } from '../NotificationCard/components';
 import {
   NotificationPanelBlank,
@@ -15,12 +16,13 @@ import {
   NotificationPanelSettings,
   NotificationPanelSettingsProps,
 } from './components';
+import { NotificationPanelDivider, NotificationPanelDividerProps } from './components/NotificationPanelDivider';
 import { TEST_IDS } from './constants';
 import styles from './styles.module.scss';
 
 export type { NotificationPanelBlankProps };
 
-export type NotificationPanelProps = {
+export type NotificationPanelProps = WithSupportProps<{
   /** Заголовок панели */
   title: string;
   /** Кнопка настроек и выпадающий список */
@@ -31,25 +33,27 @@ export type NotificationPanelProps = {
   readAllButton?: Omit<ButtonFunctionProps, 'data-test-id'> & {
     onClick: ButtonFunctionProps['onClick'];
   };
-  /** Элемент для открытия панели */
-  triggerElement: NotificationPanelPopoverProps['children'];
   /** Кнопка внизу панели */
   footerButton?: {
     label: string;
     onClick: MouseEventHandler<HTMLButtonElement>;
   };
+  className?: string;
   /** Состояние загрузки */
   loading?: boolean;
   /** Контент для отрисовки (e.g NotificationCard | NotificationPanel.Blank) */
   content?: ReactNode;
   /** Количество скелетонов карточек для отображения при загрузке */
   skeletonsAmount?: number;
-} & Omit<NotificationPanelPopoverProps, 'children' | 'content'>;
+  /** Ссылка на элемент, обозначающий самый конец прокручиваемого списка */
+  scrollEndRef?: RefObject<HTMLDivElement>;
+  /** Ссылка на контейнер, который скроллится */
+  scrollContainerRef?: RefObject<HTMLElement>;
+}>;
 
 /** Компонент панели для уведомлений */
 export function NotificationPanel({
   title,
-  triggerElement,
   settings,
   chips,
   readAllButton,
@@ -57,73 +61,72 @@ export function NotificationPanel({
   content,
   loading,
   skeletonsAmount = 2,
+  scrollEndRef,
+  scrollContainerRef,
+  className,
   ...rest
 }: NotificationPanelProps) {
   const skeletons = useMemo(() => Array.from({ length: skeletonsAmount }, (_, i) => i), [skeletonsAmount]);
 
   return (
-    <NotificationPanelPopover
-      {...rest}
-      content={
-        <>
-          <div className={styles.notificationPanelHeader}>
-            <div className={styles.notificationPanelHeadline}>
-              <Typography.SansHeadlineS className={styles.notificationPanelTitle}>
-                <TruncateString text={title} data-test-id={TEST_IDS.title} />
-              </Typography.SansHeadlineS>
+    <div className={cn(styles.wrapper, className)} {...extractSupportProps(rest)}>
+      <div className={styles.notificationPanelHeader}>
+        <div className={styles.notificationPanelHeadline}>
+          <Typography.SansHeadlineS className={styles.notificationPanelTitle}>
+            <TruncateString text={title} data-test-id={TEST_IDS.title} />
+          </Typography.SansHeadlineS>
 
-              {settings && <NotificationPanelSettings {...settings} />}
-            </div>
+          {settings && <NotificationPanelSettings {...settings} />}
+        </div>
 
-            <div className={styles.notificationPanelHeaderFunctions}>
-              <div className={styles.notificationPanelChips}>
-                {chips?.map(chip => (
-                  <ChipToggle
-                    {...chip}
-                    key={chip.label}
-                    data-test-id={`${TEST_IDS.chip}-${chip.label}`}
-                    size='xs'
-                    disabled={chip.disabled || loading}
-                  />
-                ))}
-              </div>
-
-              {readAllButton && (
-                <ButtonFunction
-                  {...readAllButton}
-                  disabled={readAllButton.disabled || loading}
-                  data-test-id={TEST_IDS.readAll}
-                />
-              )}
-            </div>
+        <div className={styles.notificationPanelHeaderFunctions}>
+          <div className={styles.notificationPanelChips}>
+            {chips?.map(chip => (
+              <ChipToggle
+                {...chip}
+                key={chip.label}
+                data-test-id={`${TEST_IDS.chip}-${chip.label}`}
+                size='xs'
+                disabled={chip.disabled || loading}
+              />
+            ))}
           </div>
 
-          <Scroll size='m' className={styles.notificationPanelBody}>
-            {loading ? (
-              <SkeletonContextProvider loading={loading || false}>
-                {skeletons.map(skeleton => (
-                  <WithSkeleton key={skeleton} skeleton={<NotificationCardSkeleton />} />
-                ))}
-              </SkeletonContextProvider>
-            ) : (
-              content
-            )}
-          </Scroll>
-
-          {!loading && footerButton && (
-            <button className={styles.notificationPanelFooterButton} data-test-id={TEST_IDS.footerButton}>
-              <Typography.SansLabelS>{footerButton.label}</Typography.SansLabelS>
-            </button>
+          {readAllButton && (
+            <ButtonFunction
+              {...readAllButton}
+              disabled={readAllButton.disabled || loading}
+              data-test-id={TEST_IDS.readAll}
+            />
           )}
-        </>
-      }
-    >
-      {triggerElement}
-    </NotificationPanelPopover>
+        </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>
+        )}
+
+        <div className={styles.scrollStub} ref={scrollEndRef} />
+      </Scroll>
+
+      {footerButton && (
+        <button onClick={footerButton.onClick} className={styles.notificationPanelFooterButton} data-test-id={TEST_IDS.footerButton}>
+          <Typography.SansLabelS>{footerButton.label}</Typography.SansLabelS>
+        </button>
+      )}
+    </div>
   );
 }
 
 export namespace NotificationPanel {
   export const Blank: typeof NotificationPanelBlank = NotificationPanelBlank;
   export type BlankProps = NotificationPanelBlankProps;
+  export const Divider: typeof NotificationPanelDivider = NotificationPanelDivider;
+  export type DividerProps = NotificationPanelDividerProps;
 }

package/src/components/NotificationPanel/components/NotificationPanelBlank/NotificationPanelBlank.tsx

@@ -1,56 +1,22 @@
 import cn from 'classnames';
-import { ReactNode } from 'react';
 
-import { IconPredefined, IconPredefinedProps } from '@snack-uikit/icon-predefined';
-import { Typography } from '@snack-uikit/typography';
-import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+import { InfoBlock, InfoBlockProps } from '@snack-uikit/info-block';
 
-import { TEST_IDS } from '../../constants';
 import styles from './styles.module.scss';
 
-export type NotificationPanelBlankProps = WithSupportProps<{
-  /** Заголовок */
-  title: ReactNode;
-  /** Описание */
-  description?: ReactNode;
-  /** Иконка */
-  icon?: IconPredefinedProps['icon'];
-  /** Цвет обводки для иконки */
-  iconAppearance?: IconPredefinedProps['appearance'];
-  /** CSS-класс */
-  className?: string;
-}>;
+export type NotificationPanelBlankProps = Omit<InfoBlockProps, 'footer' | 'align' | 'size'>;
 
 /** Компонента для "заглушки" вместо карточек в панели */
-export function NotificationPanelBlank({
-  icon,
-  iconAppearance = 'neutral',
-  title,
-  description,
-  className,
-  ...rest
-}: NotificationPanelBlankProps) {
+export function NotificationPanelBlank({ icon, className, ...props }: NotificationPanelBlankProps) {
   return (
-    <div className={cn(styles.notificationPanelBlank, className)} {...extractSupportProps(rest)}>
-      {icon && <IconPredefined icon={icon} appearance={iconAppearance} size='l' data-test-id={TEST_IDS.blank.icon} />}
-
-      <div className={styles.notificationPanelBlankContent}>
-        <Typography.SansTitleS
-          tag='div'
-          className={styles.notificationPanelBlankTitle}
-          data-test-id={TEST_IDS.blank.title}
-        >
-          {title}
-        </Typography.SansTitleS>
-
-        <Typography.SansBodyM
-          tag='div'
-          className={styles.notificationPanelBlankDescription}
-          data-test-id={TEST_IDS.blank.description}
-        >
-          {description}
-        </Typography.SansBodyM>
-      </div>
-    </div>
+    <>
+      <InfoBlock
+        {...props}
+        icon={icon ? { ...icon, appearance: icon.appearance ?? 'neutral' } : undefined}
+        size='l'
+        align='vertical'
+        className={cn(styles.notificationPanelBlank, className)}
+      />
+    </>
   );
 }

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

@@ -2,31 +2,5 @@
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
 .notificationPanelBlank {
-  @include composite-var($notification-panel-blank-container);
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  box-sizing: border-box;
-}
-
-.notificationPanelBlankContent {
-  @include composite-var($notification-panel-blank-text);
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  box-sizing: border-box;
-
-  text-align: center;
-}
-
-.notificationPanelBlankTitle {
-  color: $sys-neutral-text-main;
-}
-
-.notificationPanelBlankDescription {
-  color: $sys-neutral-text-support;
-  white-space: pre-line;
+  @include composite-var($notification-panel-body-info-container);
 }

package/src/components/NotificationPanel/components/NotificationPanelDivider/NotificationPanelDivider.tsx

@@ -0,0 +1,21 @@
+import cn from 'classnames';
+
+import { Typography } from '@snack-uikit/typography';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import styles from './styles.module.scss';
+
+export type NotificationPanelDividerProps = WithSupportProps<{
+  /** Текст разделителя */
+  text: string;
+  className?: string;
+}>;
+
+/** Разделитель для группировки или разделения карточек в списке */
+export function NotificationPanelDivider({ text, className, ...rest }: NotificationPanelDividerProps) {
+  return (
+    <Typography.LightLabelS className={cn(styles.notificationPanelDivider, className)} {...extractSupportProps(rest)}>
+      {text}
+    </Typography.LightLabelS>
+  );
+}

package/src/components/NotificationPanel/components/NotificationPanelDivider/index.ts

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

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

@@ -0,0 +1,14 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-notification-notificationPanel';
+
+.notificationPanelDivider {
+  @include composite-var($notification-panel-readed-divider);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  color: $sys-neutral-text-light;
+
+  border-bottom-color: $sys-neutral-decor-default;
+  border-bottom-style: solid;
+}

package/src/components/NotificationPanel/constants.ts

@@ -8,10 +8,5 @@ export const TEST_IDS = {
   },
   readAll: 'notification-panel__readAll',
   footerButton: 'notification-panel__footerButton',
-  blank: {
-    icon: 'notification-panel__blank__icon',
-    title: 'notification-panel__blank__title',
-    description: 'notification-panel__blank__description',
-  },
   skeleton: 'notification-panel__skeleton',
 };

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

@@ -107,3 +107,17 @@
     border-color: $sys-neutral-decor-default;
   }
 }
+
+.wrapper {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.scrollStub {
+  height: calc($dimension-025m / 2);
+  margin-top: calc($dimension-025m / -2);
+  background: transparent;
+}

package/src/{helperComponents → components}/NotificationPanelPopover/NotificationPanelPopover.tsx

@@ -1,14 +1,15 @@
 import cn from 'classnames';
-import { ReactNode } from 'react';
+import { ReactElement } from 'react';
 
 import { PopoverPrivate, PopoverPrivateProps } from '@snack-uikit/popover-private';
 import { WithSupportProps } from '@snack-uikit/utils';
 
+import { NotificationPanel, NotificationPanelProps } from '../NotificationPanel';
 import styles from './styles.module.scss';
 
 export type NotificationPanelPopoverProps = WithSupportProps<
   {
-    content: ReactNode;
+    content: ReactElement<NotificationPanelProps, typeof NotificationPanel>;
     /** CSS-класс для элемента содержащего контент */
     contentClassName?: string;
   } & Pick<
@@ -28,6 +29,7 @@ export type NotificationPanelPopoverProps = WithSupportProps<
     Partial<Pick<PopoverPrivateProps, 'trigger' | 'placement'>>
 >;
 
+/** Компонент-обёртка для NotificationPanel для использования как выпадающий элемент */
 export function NotificationPanelPopover({
   content,
   trigger = 'click',

package/src/components/index.ts

@@ -1,2 +1,3 @@
 export * from './NotificationCard';
 export * from './NotificationPanel';
+export * from './NotificationPanelPopover';

package/dist/helperComponents/index.d.ts

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

package/dist/helperComponents/index.js

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

package/src/helperComponents/index.ts

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