@snack-uikit/notification 0.6.17-preview-135ad6d6.0 → 0.6.17

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.6.17 (2024-02-20)
+
+
+### Bug Fixes
+
+* **FF-4297:** apply system-layer tokens ([7c8fd4b](https://github.com/cloud-ru-tech/snack-uikit/commit/7c8fd4b5334360b2fc31da92973b6835ffa287af))
+
+
+
+
+
 ## 0.6.16 (2024-02-13)
 
 ### Only dependencies have been changed

package/README.md

@@ -91,8 +91,6 @@ 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
@@ -100,39 +98,15 @@ 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` | - | Управляет состоянием показан/не показан. |
@@ -143,8 +117,18 @@ 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"` | 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). |
+| 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-класс |
 
 
 [//]: DOCUMENTATION_SECTION_END

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

@@ -1,5 +1,4 @@
 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';
@@ -29,15 +28,11 @@ 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, primaryButton, secondaryButton, actions, onVisible, className, ...rest }: NotificationCardProps): import("react/jsx-runtime").JSX.Element;
+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 {};

package/dist/components/NotificationCard/NotificationCard.js

@@ -12,7 +12,6 @@ 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';
@@ -23,11 +22,10 @@ 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, 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(() => ({
+    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(() => ({
         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);
@@ -57,5 +55,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 })), (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 }))] }))] })));
+    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 }))] }))] })));
 }

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

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

package/dist/components/NotificationCard/constants.js

@@ -17,6 +17,4 @@ 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,10 +125,4 @@
   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,11 +1,10 @@
-import { MouseEventHandler, ReactNode, RefObject } from 'react';
+import { MouseEventHandler, ReactNode } from 'react';
 import { ButtonFunctionProps } from '@snack-uikit/button';
 import { ChipToggleProps } from '@snack-uikit/chips';
-import { WithSupportProps } from '@snack-uikit/utils';
+import { NotificationPanelPopoverProps } from '../../helperComponents';
 import { NotificationPanelBlank, NotificationPanelBlankProps, NotificationPanelSettingsProps } from './components';
-import { NotificationPanelDivider, NotificationPanelDividerProps } from './components/NotificationPanelDivider';
 export type { NotificationPanelBlankProps };
-export type NotificationPanelProps = WithSupportProps<{
+export type NotificationPanelProps = {
     /** Заголовок панели */
     title: string;
     /** Кнопка настроек и выпадающий список */
@@ -16,28 +15,23 @@ export type NotificationPanelProps = WithSupportProps<{
     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;
-    /** Ссылка на элемент, обозначающий самый конец прокручиваемого списка */
-    scrollEndRef?: RefObject<HTMLDivElement>;
-    /** Ссылка на контейнер, который скроллится */
-    scrollContainerRef?: RefObject<HTMLElement>;
-}>;
+} & Omit<NotificationPanelPopoverProps, 'children' | 'content'>;
 /** Компонент панели для уведомлений */
-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 function NotificationPanel({ title, triggerElement, settings, chips, readAllButton, footerButton, content, loading, skeletonsAmount, ...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,8 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'classnames';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { ButtonFunction } from '@snack-uikit/button';
 import { ChipToggle } from '@snack-uikit/chips';
@@ -19,19 +18,17 @@ 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 } from '@snack-uikit/utils';
+import { NotificationPanelPopover } from '../../helperComponents';
 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, 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"]);
+    var { title, triggerElement, settings, chips, readAllButton, footerButton, content, loading, skeletonsAmount = 2 } = _a, rest = __rest(_a, ["title", "triggerElement", "settings", "chips", "readAllButton", "footerButton", "content", "loading", "skeletonsAmount"]);
     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 }) }), 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", { className: styles.notificationPanelFooterButton, "data-test-id": TEST_IDS.footerButton, children: _jsx(Typography.SansLabelS, { children: footerButton.label }) }))] })));
+    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 })));
 }
 (function (NotificationPanel) {
     NotificationPanel.Blank = NotificationPanelBlank;
-    NotificationPanel.Divider = NotificationPanelDivider;
 })(NotificationPanel || (NotificationPanel = {}));

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

@@ -1,4 +1,17 @@
-import { InfoBlockProps } from '@snack-uikit/info-block';
-export type NotificationPanelBlankProps = Omit<InfoBlockProps, 'footer' | 'align' | 'size'>;
+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;
+}>;
 /** Компонента для "заглушки" вместо карточек в панели */
-export declare function NotificationPanelBlank({ icon, className, ...props }: NotificationPanelBlankProps): import("react/jsx-runtime").JSX.Element;
+export declare function NotificationPanelBlank({ icon, iconAppearance, title, description, className, ...rest }: NotificationPanelBlankProps): import("react/jsx-runtime").JSX.Element;

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

@@ -9,13 +9,15 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
-import { InfoBlock } from '@snack-uikit/info-block';
+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 styles from './styles.module.css';
 /** Компонента для "заглушки" вместо карточек в панели */
 export function NotificationPanelBlank(_a) {
-    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) })) }));
+    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 })] })] })));
 }

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

@@ -1,3 +1,27 @@
 .notificationPanelBlank{
-  padding:var(--space-notification-panel-body-info-padding, 24px);
+  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;
 }

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

@@ -8,5 +8,10 @@ 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,5 +8,10 @@ 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

@@ -25,16 +25,16 @@
   border-radius:inherit;
 }
 
-.notificationPanelHeaderFunctions{
+.notificationPanelChips{
+  gap:var(--space-notification-panel-header-chips-gap, 8px);
   display:flex;
   align-items:center;
-  justify-content:space-between;
 }
 
-.notificationPanelChips{
-  gap:var(--space-notification-panel-header-chips-gap, 8px);
+.notificationPanelHeaderFunctions{
   display:flex;
   align-items:center;
+  justify-content:space-between;
 }
 
 .notificationPanelHeadline{
@@ -94,18 +94,4 @@
 .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/components/index.d.ts

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

package/dist/components/index.js

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

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

@@ -1,11 +1,9 @@
-import { ReactElement } from 'react';
+import { ReactNode } 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: ReactElement<NotificationPanelProps, typeof NotificationPanel>;
+    content: ReactNode;
     /** 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/{components → helperComponents}/NotificationPanelPopover/NotificationPanelPopover.js

@@ -13,7 +13,6 @@ 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/helperComponents/index.js

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

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Notification",
-  "version": "0.6.17-preview-135ad6d6.0",
+  "version": "0.6.17",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,20 +32,20 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.16.0",
-    "@snack-uikit/chips": "0.11.6",
+    "@snack-uikit/button": "0.16.1",
+    "@snack-uikit/chips": "0.11.7",
+    "@snack-uikit/icon-predefined": "0.4.2",
     "@snack-uikit/icons": "0.20.1",
-    "@snack-uikit/info-block": "0.1.2",
-    "@snack-uikit/link": "0.11.1",
-    "@snack-uikit/list": "0.3.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.2",
-    "@snack-uikit/tag": "0.7.3",
-    "@snack-uikit/truncate-string": "0.4.7",
+    "@snack-uikit/skeleton": "0.3.3",
+    "@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": "da47df263eec0bbb74764f5aec6f4296a4dfdf13"
+  "gitHead": "fd079dd3acbfe935d0b88d9efd863047f25e5824"
 }

package/src/components/NotificationCard/NotificationCard.tsx

@@ -1,7 +1,6 @@
 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';
@@ -40,10 +39,6 @@ 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-класс */
@@ -61,22 +56,15 @@ export function NotificationCard({
   link,
   date,
   onClick,
-  primaryButton,
-  secondaryButton,
   actions,
   onVisible,
   className,
   ...rest
 }: NotificationCardProps) {
-  const { icon, linkOnColor, buttonAppearance } = useMemo<{
-    icon: ReturnType<typeof getIcon>;
-    linkOnColor: LinkProps['appearance'];
-    buttonAppearance: ButtonTonalProps['appearance'];
-  }>(
+  const { icon, linkOnColor } = useMemo<{ icon: ReturnType<typeof getIcon>; linkOnColor: LinkProps['appearance'] }>(
     () => ({
       icon: getIcon(appearance),
       linkOnColor: appearance === APPEARANCE.ErrorCritical ? 'red' : undefined,
-      buttonAppearance: appearance === APPEARANCE.ErrorCritical ? 'destructive' : 'primary',
     }),
     [appearance],
   );
@@ -156,28 +144,6 @@ 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,6 +18,4 @@ 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,9 +170,3 @@
   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,5 +1,4 @@
-import cn from 'classnames';
-import { MouseEventHandler, ReactNode, RefObject, useMemo } from 'react';
+import { MouseEventHandler, ReactNode, useMemo } from 'react';
 
 import { ButtonFunction, ButtonFunctionProps } from '@snack-uikit/button';
 import { ChipToggle, ChipToggleProps } from '@snack-uikit/chips';
@@ -7,8 +6,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,
@@ -16,13 +15,12 @@ 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 = WithSupportProps<{
+export type NotificationPanelProps = {
   /** Заголовок панели */
   title: string;
   /** Кнопка настроек и выпадающий список */
@@ -33,27 +31,25 @@ export type NotificationPanelProps = WithSupportProps<{
   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;
-  /** Ссылка на элемент, обозначающий самый конец прокручиваемого списка */
-  scrollEndRef?: RefObject<HTMLDivElement>;
-  /** Ссылка на контейнер, который скроллится */
-  scrollContainerRef?: RefObject<HTMLElement>;
-}>;
+} & Omit<NotificationPanelPopoverProps, 'children' | 'content'>;
 
 /** Компонент панели для уведомлений */
 export function NotificationPanel({
   title,
+  triggerElement,
   settings,
   chips,
   readAllButton,
@@ -61,72 +57,73 @@ export function NotificationPanel({
   content,
   loading,
   skeletonsAmount = 2,
-  scrollEndRef,
-  scrollContainerRef,
-  className,
   ...rest
 }: NotificationPanelProps) {
   const skeletons = useMemo(() => Array.from({ length: skeletonsAmount }, (_, i) => i), [skeletonsAmount]);
 
   return (
-    <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>
+    <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>
 
-          {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>
+            <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} ref={scrollContainerRef}>
-        {content}
-        {loading && (
-          <SkeletonContextProvider loading={loading || false}>
-            {skeletons.map(skeleton => (
-              <WithSkeleton key={skeleton} skeleton={<NotificationCardSkeleton />} />
-            ))}
-          </SkeletonContextProvider>
-        )}
+              {readAllButton && (
+                <ButtonFunction
+                  {...readAllButton}
+                  disabled={readAllButton.disabled || loading}
+                  data-test-id={TEST_IDS.readAll}
+                />
+              )}
+            </div>
+          </div>
 
-        <div className={styles.scrollStub} ref={scrollEndRef} />
-      </Scroll>
+          <Scroll size='m' className={styles.notificationPanelBody}>
+            {loading ? (
+              <SkeletonContextProvider loading={loading || false}>
+                {skeletons.map(skeleton => (
+                  <WithSkeleton key={skeleton} skeleton={<NotificationCardSkeleton />} />
+                ))}
+              </SkeletonContextProvider>
+            ) : (
+              content
+            )}
+          </Scroll>
 
-      {footerButton && (
-        <button className={styles.notificationPanelFooterButton} data-test-id={TEST_IDS.footerButton}>
-          <Typography.SansLabelS>{footerButton.label}</Typography.SansLabelS>
-        </button>
-      )}
-    </div>
+          {!loading && footerButton && (
+            <button className={styles.notificationPanelFooterButton} data-test-id={TEST_IDS.footerButton}>
+              <Typography.SansLabelS>{footerButton.label}</Typography.SansLabelS>
+            </button>
+          )}
+        </>
+      }
+    >
+      {triggerElement}
+    </NotificationPanelPopover>
   );
 }
 
 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,22 +1,56 @@
 import cn from 'classnames';
+import { ReactNode } from 'react';
 
-import { InfoBlock, InfoBlockProps } from '@snack-uikit/info-block';
+import { IconPredefined, IconPredefinedProps } from '@snack-uikit/icon-predefined';
+import { Typography } from '@snack-uikit/typography';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
+import { TEST_IDS } from '../../constants';
 import styles from './styles.module.scss';
 
-export type NotificationPanelBlankProps = Omit<InfoBlockProps, 'footer' | 'align' | 'size'>;
+export type NotificationPanelBlankProps = WithSupportProps<{
+  /** Заголовок */
+  title: ReactNode;
+  /** Описание */
+  description?: ReactNode;
+  /** Иконка */
+  icon?: IconPredefinedProps['icon'];
+  /** Цвет обводки для иконки */
+  iconAppearance?: IconPredefinedProps['appearance'];
+  /** CSS-класс */
+  className?: string;
+}>;
 
 /** Компонента для "заглушки" вместо карточек в панели */
-export function NotificationPanelBlank({ icon, className, ...props }: NotificationPanelBlankProps) {
+export function NotificationPanelBlank({
+  icon,
+  iconAppearance = 'neutral',
+  title,
+  description,
+  className,
+  ...rest
+}: NotificationPanelBlankProps) {
   return (
-    <>
-      <InfoBlock
-        {...props}
-        icon={icon ? { ...icon, appearance: icon.appearance ?? 'neutral' } : undefined}
-        size='l'
-        align='vertical'
-        className={cn(styles.notificationPanelBlank, className)}
-      />
-    </>
+    <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>
   );
 }

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

@@ -2,5 +2,31 @@
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
 .notificationPanelBlank {
-  @include composite-var($notification-panel-body-info-container);
+  @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;
 }

package/src/components/NotificationPanel/constants.ts

@@ -8,5 +8,10 @@ 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

@@ -29,20 +29,20 @@
     border-radius: inherit;
   }
 }
+.notificationPanelChips {
+  @include composite-var($notification-panel-header-chips);
 
-.notificationPanelHeaderFunctions {
   display: flex;
   align-items: center;
-  justify-content: space-between;
 }
 
-.notificationPanelChips {
-  @include composite-var($notification-panel-header-chips);
-
+.notificationPanelHeaderFunctions {
   display: flex;
   align-items: center;
+  justify-content: space-between;
 }
 
+
 .notificationPanelHeadline {
   @include composite-var($notification-panel-header-headline);
 
@@ -107,17 +107,3 @@
     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/components/index.ts

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

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

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

package/src/helperComponents/NotificationPanelPopover/index.ts

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

package/src/helperComponents/index.ts

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

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

@@ -1,8 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

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

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

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

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

@@ -1,10 +0,0 @@
-.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/src/components/NotificationPanel/components/NotificationPanelDivider/NotificationPanelDivider.tsx

@@ -1,21 +0,0 @@
-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

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

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

@@ -1,14 +0,0 @@
-@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;
-}