@snack-uikit/notification 0.13.30 → 0.13.31-preview-7cd3a502.0

package/README.md

@@ -261,6 +261,7 @@ function NotificationPanelStackExample() {
 | title* | `string` | - | Заголовок панели |
 | settings | `NotificationPanelSettingsProps` | - | Кнопка настроек и выпадающий список |
 | segments | `Omit<SegmentedControlProps, "data-test-id" \| "size">` | - | Сегменты для фильтрации |
+| chipToggle | `{ label: string; checked: boolean; defaultChecked?: boolean; onChange: (checked: boolean) => void; }` | {     label: 'Label',     checked: false,     onChange: () => {},   } | Переключатель для фильтрации |
 | readAllButton | `Omit<ButtonFunctionProps, "data-test-id"> & { tooltip?: TooltipProps; }` | - | Кнопка в "шапке" панели |
 | footerButton | `{ label: string; onClick: MouseEventHandler<HTMLButtonElement>; }` | - | Кнопка внизу панели |
 | className | `string` | - | CSS-класс |
@@ -292,6 +293,14 @@ function NotificationPanelStackExample() {
 | defaultOpen | `boolean` | false | Состояние открыт/закрыт по умолчанию |
 | onOpenChanged | `(open: boolean) => void` | - | Колбек смены состояния открыт/закрыт |
 | actions | `Action[]` | - | Список действий в выпадающем меню |
+| unread | `boolean` | - | Состояние непрочитанных карточек |
+## NotificationPanel.Group
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| children* | `ReactNode` | - | Содержимое группы |
+| title* | `string` | - | Заголовок группы |
+| className | `string` | - | CSS-класс |
 ## NotificationPanelPopover
 Компонент-обёртка для NotificationPanel для использования как выпадающий элемент
 ### Props

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

@@ -23,6 +23,7 @@ const react_1 = require("react");
 const button_1 = require("@snack-uikit/button");
 const icons_1 = require("@snack-uikit/icons");
 const link_1 = require("@snack-uikit/link");
+const status_1 = require("@snack-uikit/status");
 const truncate_string_1 = require("@snack-uikit/truncate-string");
 const typography_1 = require("@snack-uikit/typography");
 const utils_1 = require("@snack-uikit/utils");
@@ -150,6 +151,10 @@ function NotificationCard(_a) {
         "data-test-id": constants_1.TEST_IDS.date,
         children: date
       })]
+    }), unread && (0, jsx_runtime_1.jsx)(status_1.StatusIndicator, {
+      className: styles_module_scss_1.default.statusIndicator,
+      size: 'xs',
+      appearance: 'primary'
     })]
   }));
 }

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

@@ -23,6 +23,12 @@
   box-sizing:border-box;
 }
 
+.statusIndicator{
+  position:absolute;
+  top:4px;
+  right:4px;
+}
+
 .notificationCard{
   padding-left:var(--space-notification-panel-card-padding-horizontal, 12px);
   padding-right:var(--space-notification-panel-card-padding-horizontal, 12px);

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

@@ -3,7 +3,7 @@ import { ButtonFunctionProps } from '@snack-uikit/button';
 import { SegmentedControlProps } from '@snack-uikit/segmented-control';
 import { TooltipProps } from '@snack-uikit/tooltip';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { NotificationCardStack, NotificationCardStackProps, NotificationPanelBlank, NotificationPanelBlankProps, NotificationPanelSettingsProps } from './components';
+import { NotificationCardStack, NotificationCardStackProps, NotificationPanelBlank, NotificationPanelBlankProps, NotificationPanelGroup, NotificationPanelGroupProps, NotificationPanelSettingsProps } from './components';
 import { NotificationPanelDivider, NotificationPanelDividerProps } from './components/NotificationPanelDivider';
 export type { NotificationPanelBlankProps };
 export type NotificationPanelProps = WithSupportProps<{
@@ -13,6 +13,13 @@ export type NotificationPanelProps = WithSupportProps<{
     settings?: NotificationPanelSettingsProps;
     /** Сегменты для фильтрации */
     segments?: Omit<SegmentedControlProps, 'size' | 'data-test-id'>;
+    /** Переключатель для фильтрации */
+    chipToggle?: {
+        label: string;
+        checked: boolean;
+        defaultChecked?: boolean;
+        onChange: (checked: boolean) => void;
+    };
     /** Кнопка в "шапке" панели */
     readAllButton?: Omit<ButtonFunctionProps, 'data-test-id'> & {
         tooltip?: TooltipProps;
@@ -35,7 +42,7 @@ export type NotificationPanelProps = WithSupportProps<{
     scrollContainerRef?: RefObject<HTMLElement>;
 }>;
 /** Компонент панели для уведомлений */
-export declare function NotificationPanel({ title, settings, segments, readAllButton, footerButton, content, loading, skeletonsAmount, scrollEndRef, scrollContainerRef, className, ...rest }: NotificationPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function NotificationPanel({ title, settings, segments, readAllButton, footerButton, content, loading, skeletonsAmount, scrollEndRef, scrollContainerRef, className, chipToggle, ...rest }: NotificationPanelProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace NotificationPanel {
     const Blank: typeof NotificationPanelBlank;
     type BlankProps = NotificationPanelBlankProps;
@@ -43,4 +50,6 @@ export declare namespace NotificationPanel {
     type DividerProps = NotificationPanelDividerProps;
     const Stack: typeof NotificationCardStack;
     type StackProps = NotificationCardStackProps;
+    const Group: typeof NotificationPanelGroup;
+    type GroupProps = NotificationPanelGroupProps;
 }

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

@@ -21,6 +21,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const button_1 = require("@snack-uikit/button");
+const chips_1 = require("@snack-uikit/chips");
 const scroll_1 = require("@snack-uikit/scroll");
 const segmented_control_1 = require("@snack-uikit/segmented-control");
 const skeleton_1 = require("@snack-uikit/skeleton");
@@ -46,9 +47,14 @@ function NotificationPanel(_a) {
       skeletonsAmount = 2,
       scrollEndRef,
       scrollContainerRef,
-      className
+      className,
+      chipToggle = {
+        label: 'Label',
+        checked: false,
+        onChange: () => {}
+      }
     } = _a,
-    rest = __rest(_a, ["title", "settings", "segments", "readAllButton", "footerButton", "content", "loading", "skeletonsAmount", "scrollEndRef", "scrollContainerRef", "className"]);
+    rest = __rest(_a, ["title", "settings", "segments", "readAllButton", "footerButton", "content", "loading", "skeletonsAmount", "scrollEndRef", "scrollContainerRef", "className", "chipToggle"]);
   const skeletons = (0, react_1.useMemo)(() => Array.from({
     length: skeletonsAmount
   }, (_, i) => i), [skeletonsAmount]);
@@ -77,14 +83,21 @@ function NotificationPanel(_a) {
             }))
           }), settings && (0, jsx_runtime_1.jsx)(components_2.NotificationPanelSettings, Object.assign({}, settings))]
         })]
-      }), (0, jsx_runtime_1.jsx)("div", {
-        children: segments && (0, jsx_runtime_1.jsx)(segmented_control_1.SegmentedControl, Object.assign({}, segments, {
-          size: 's',
+      }), (0, jsx_runtime_1.jsxs)("div", {
+        className: styles_module_scss_1.default.actionsRow,
+        children: [segments && (0, jsx_runtime_1.jsx)(segmented_control_1.SegmentedControl, Object.assign({}, segments, {
+          size: 'xs',
           items: segments.items.map(item => Object.assign(Object.assign({}, item), {
             disabled: item.disabled || loading
           })),
           "data-test-id": constants_1.TEST_IDS.segments
-        }))
+        })), chipToggle && (0, jsx_runtime_1.jsx)(chips_1.ChipToggle, {
+          size: 'xs',
+          disabled: loading,
+          label: chipToggle.label,
+          onChange: chipToggle.onChange,
+          checked: chipToggle.checked
+        })]
       })]
     }), (0, jsx_runtime_1.jsx)(scroll_1.Scroll, {
       size: 'm',
@@ -116,4 +129,5 @@ function NotificationPanel(_a) {
   NotificationPanel.Blank = components_2.NotificationPanelBlank;
   NotificationPanel.Divider = NotificationPanelDivider_1.NotificationPanelDivider;
   NotificationPanel.Stack = components_2.NotificationCardStack;
+  NotificationPanel.Group = components_2.NotificationPanelGroup;
 })(NotificationPanel || (exports.NotificationPanel = NotificationPanel = {}));

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

@@ -23,5 +23,9 @@ export type NotificationCardStackProps = {
      * Список действий в выпадающем меню
      */
     actions?: Action[];
+    /**
+     * Состояние непрочитанных карточек
+     */
+    unread?: boolean;
 };
-export declare function NotificationCardStack({ children, defaultOpen, onOpenChanged, title, actions, }: NotificationCardStackProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function NotificationCardStack({ children, defaultOpen, onOpenChanged, title, actions, unread, }: NotificationCardStackProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -26,7 +26,8 @@ function NotificationCardStack(_ref) {
     defaultOpen,
     onOpenChanged,
     title,
-    actions
+    actions,
+    unread
   } = _ref;
   const [actionsOpen, setActionsOpen] = (0, react_1.useState)(false);
   const {
@@ -47,13 +48,14 @@ function NotificationCardStack(_ref) {
       children: first
     });
   }
-  const firstCardElement = open ? first : (0, utils_1.cloneCard)(first, {
-    onClick: toggleOpen
-  });
+  const firstCardElement = open ? first : (0, utils_1.cloneCard)(first, componentProps => Object.assign(Object.assign({}, componentProps), {
+    onClick: toggleOpen,
+    unread: unread || componentProps.unread
+  }));
   return (0, jsx_runtime_1.jsxs)("div", {
     className: styles_module_scss_1.default.container,
     style: {
-      '--snack-notification-stack-animation-duration': "".concat(ANIMATION_DURATION, "s")
+      '--snack-notification-stack-animation-duration': `${ANIMATION_DURATION}s`
     },
     "data-test-id": constants_1.TEST_IDS.cardStack.wrapper,
     children: [(0, jsx_runtime_1.jsxs)("div", {

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

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

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

@@ -9,6 +9,6 @@ const cloneCard = (element, props) => {
   if (!(0, react_1.isValidElement)(element)) {
     return element;
   }
-  return (0, react_1.cloneElement)(element, Object.assign(Object.assign({}, element.props), props));
+  return (0, react_1.cloneElement)(element, props(element.props));
 };
 exports.cloneCard = cloneCard;

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

@@ -29,7 +29,8 @@ function NotificationPanelBlank(_a) {
       className
     } = _a,
     props = __rest(_a, ["icon", "className"]);
-  return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {
+  return (0, jsx_runtime_1.jsx)("div", {
+    className: styles_module_scss_1.default.wrapper,
     children: (0, jsx_runtime_1.jsx)(info_block_1.InfoBlock, Object.assign({}, props, {
       icon: icon ? Object.assign(Object.assign({}, icon), {
         appearance: (_b = icon.appearance) !== null && _b !== void 0 ? _b : 'neutral'

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

@@ -1,3 +1,10 @@
+.wrapper{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  min-height:316px;
+}
+
 .notificationPanelBlank{
   padding:var(--space-notification-panel-body-info-padding, 24px);
 }

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

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+export type NotificationPanelGroupProps = WithSupportProps<{
+    /** Заголовок группы */
+    title: string;
+    /** Содержимое группы */
+    children: ReactNode;
+    /** CSS-класс */
+    className?: string;
+}>;
+/** Группа уведомлений с заголовком внутри панели */
+export declare function NotificationPanelGroup({ title, children, className, ...rest }: NotificationPanelGroupProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,51 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__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;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NotificationPanelGroup = NotificationPanelGroup;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const truncate_string_1 = require("@snack-uikit/truncate-string");
+const typography_1 = require("@snack-uikit/typography");
+const utils_1 = require("@snack-uikit/utils");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/** Группа уведомлений с заголовком внутри панели */
+function NotificationPanelGroup(_a) {
+  var {
+      title,
+      children,
+      className
+    } = _a,
+    rest = __rest(_a, ["title", "children", "className"]);
+  return (0, jsx_runtime_1.jsxs)("div", Object.assign({
+    className: (0, classnames_1.default)(styles_module_scss_1.default.root, className)
+  }, (0, utils_1.extractSupportProps)(rest), {
+    children: [(0, jsx_runtime_1.jsx)("div", {
+      className: styles_module_scss_1.default.title,
+      children: (0, jsx_runtime_1.jsx)(typography_1.Typography.LightLabelS, {
+        className: styles_module_scss_1.default.text,
+        tag: 'span',
+        children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
+          text: title
+        })
+      })
+    }), (0, jsx_runtime_1.jsx)("div", {
+      className: styles_module_scss_1.default.content,
+      children: children
+    })]
+  }));
+}

package/dist/cjs/components/NotificationPanel/components/NotificationPanelGroup/index.d.ts

@@ -0,0 +1 @@
+export { NotificationPanelGroup, type NotificationPanelGroupProps } from './NotificationPanelGroup';

package/dist/cjs/components/NotificationPanel/components/NotificationPanelGroup/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NotificationPanelGroup = void 0;
+var NotificationPanelGroup_1 = require("./NotificationPanelGroup");
+Object.defineProperty(exports, "NotificationPanelGroup", {
+  enumerable: true,
+  get: function () {
+    return NotificationPanelGroup_1.NotificationPanelGroup;
+  }
+});

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

@@ -0,0 +1,34 @@
+.root{
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  gap:var(--space-notification-panel-container-body-gap, 16px);
+}
+
+.title{
+  position:sticky;
+  z-index:1;
+  top:4px;
+  display:flex;
+  justify-content:center;
+}
+
+.text{
+  padding-left:var(--space-notification-panel-date-horizontal-padding, 8px);
+  padding-right:var(--space-notification-panel-date-horizontal-padding, 8px);
+  height:var(--size-notification-panel-date-height, 20px);
+  border-radius:var(--radius-chips-m, 20px);
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  color:var(--sys-neutral-text-disabled, #aaaebd);
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
+  border-style:solid;
+}
+
+.content{
+  display:flex;
+  flex-direction:column;
+  gap:var(--space-notification-panel-container-body-gap, 16px);
+}

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

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

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

@@ -24,4 +24,5 @@ Object.defineProperty(exports, "__esModule", {
 });
 __exportStar(require("./NotificationPanelSettings"), exports);
 __exportStar(require("./NotificationPanelBlank"), exports);
-__exportStar(require("./NotificationCardStack"), exports);
+__exportStar(require("./NotificationCardStack"), exports);
+__exportStar(require("./NotificationPanelGroup"), exports);

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

@@ -101,4 +101,12 @@
   -moz-column-gap:var(--dimension-1m, 8px);
        column-gap:var(--dimension-1m, 8px);
   align-items:center;
+}
+
+.actionsRow{
+  display:flex;
+  -moz-column-gap:var(--dimension-1m, 8px);
+       column-gap:var(--dimension-1m, 8px);
+  align-items:center;
+  justify-content:space-between;
 }

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

@@ -15,6 +15,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { ButtonSimple, ButtonTonal } from '@snack-uikit/button';
 import { KebabSVG } from '@snack-uikit/icons';
 import { Link } from '@snack-uikit/link';
+import { StatusIndicator } from '@snack-uikit/status';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps } from '@snack-uikit/utils';
@@ -56,5 +57,5 @@ export function NotificationCard(_a) {
     };
     return (_jsxs("div", Object.assign({ ref: cardRef, role: 'button', onClick: onClick, tabIndex: 0 }, extractSupportProps(rest), { "data-appearance": appearance, "data-unread": unread || undefined, "data-clickable": Boolean(onClick) || undefined, "data-droplist-open": isDroplistOpen || undefined, className: cn(styles.notificationCard, className), children: [(actions === null || actions === void 0 ? void 0 : actions.length) && (_jsx(ActionsButton, { className: styles.notificationCardFunction, actions: actions, open: isDroplistOpen, setDroplistOpen: setDroplistOpen, size: 's', icon: _jsx(KebabSVG, {}) })), label && (_jsx(Typography.LightLabelS, { tag: 'div', className: styles.notificationCardLabel, children: _jsx(TruncateString, { maxLines: 1, text: label, "data-test-id": TEST_IDS.label }) })), _jsxs("div", { className: styles.notificationCardTitle, children: [_jsx("div", { className: styles.notificationCardTitleIcon, children: icon }), _jsx(Typography.SansTitleS, { tag: 'div', className: styles.notificationCardTitleText, children: _jsx(TruncateString, { maxLines: 2, text: title, "data-test-id": TEST_IDS.title }) })] }), content && (_jsx(Typography.SansBodyS, { tag: 'div', className: styles.notificationCardContent, "data-test-id": TEST_IDS.content, children: content })), (primaryButton || secondaryButton) && (
             // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-            _jsxs("div", { className: styles.notificationCardButtons, onClick: stopPropagationClick, children: [secondaryButton && (_jsx(ButtonSimple, Object.assign({}, secondaryButton, { appearance: 'neutral', size: 's', "data-test-id": TEST_IDS.primaryButton }))), primaryButton && (_jsx(ButtonTonal, Object.assign({}, primaryButton, { appearance: 'neutral', size: 's', "data-test-id": TEST_IDS.secondaryButton })))] })), showFooter && (_jsxs("div", { className: styles.notificationCardFooter, children: [link && (_jsx(Link, Object.assign({}, link, { onClick: handleLinkClick, appearance: 'primary', textMode: 'accent', size: 's', "data-test-id": TEST_IDS.link }))), date && (_jsx(Typography.LightLabelS, { className: styles.notificationCardDate, "data-test-id": TEST_IDS.date, children: date }))] }))] })));
+            _jsxs("div", { className: styles.notificationCardButtons, onClick: stopPropagationClick, children: [secondaryButton && (_jsx(ButtonSimple, Object.assign({}, secondaryButton, { appearance: 'neutral', size: 's', "data-test-id": TEST_IDS.primaryButton }))), primaryButton && (_jsx(ButtonTonal, Object.assign({}, primaryButton, { appearance: 'neutral', size: 's', "data-test-id": TEST_IDS.secondaryButton })))] })), showFooter && (_jsxs("div", { className: styles.notificationCardFooter, children: [link && (_jsx(Link, Object.assign({}, link, { onClick: handleLinkClick, appearance: 'primary', textMode: 'accent', size: 's', "data-test-id": TEST_IDS.link }))), date && (_jsx(Typography.LightLabelS, { className: styles.notificationCardDate, "data-test-id": TEST_IDS.date, children: date }))] })), unread && _jsx(StatusIndicator, { className: styles.statusIndicator, size: 'xs', appearance: 'primary' })] })));
 }

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

@@ -23,6 +23,12 @@
   box-sizing:border-box;
 }
 
+.statusIndicator{
+  position:absolute;
+  top:4px;
+  right:4px;
+}
+
 .notificationCard{
   padding-left:var(--space-notification-panel-card-padding-horizontal, 12px);
   padding-right:var(--space-notification-panel-card-padding-horizontal, 12px);

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

@@ -3,7 +3,7 @@ import { ButtonFunctionProps } from '@snack-uikit/button';
 import { SegmentedControlProps } from '@snack-uikit/segmented-control';
 import { TooltipProps } from '@snack-uikit/tooltip';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { NotificationCardStack, NotificationCardStackProps, NotificationPanelBlank, NotificationPanelBlankProps, NotificationPanelSettingsProps } from './components';
+import { NotificationCardStack, NotificationCardStackProps, NotificationPanelBlank, NotificationPanelBlankProps, NotificationPanelGroup, NotificationPanelGroupProps, NotificationPanelSettingsProps } from './components';
 import { NotificationPanelDivider, NotificationPanelDividerProps } from './components/NotificationPanelDivider';
 export type { NotificationPanelBlankProps };
 export type NotificationPanelProps = WithSupportProps<{
@@ -13,6 +13,13 @@ export type NotificationPanelProps = WithSupportProps<{
     settings?: NotificationPanelSettingsProps;
     /** Сегменты для фильтрации */
     segments?: Omit<SegmentedControlProps, 'size' | 'data-test-id'>;
+    /** Переключатель для фильтрации */
+    chipToggle?: {
+        label: string;
+        checked: boolean;
+        defaultChecked?: boolean;
+        onChange: (checked: boolean) => void;
+    };
     /** Кнопка в "шапке" панели */
     readAllButton?: Omit<ButtonFunctionProps, 'data-test-id'> & {
         tooltip?: TooltipProps;
@@ -35,7 +42,7 @@ export type NotificationPanelProps = WithSupportProps<{
     scrollContainerRef?: RefObject<HTMLElement>;
 }>;
 /** Компонент панели для уведомлений */
-export declare function NotificationPanel({ title, settings, segments, readAllButton, footerButton, content, loading, skeletonsAmount, scrollEndRef, scrollContainerRef, className, ...rest }: NotificationPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function NotificationPanel({ title, settings, segments, readAllButton, footerButton, content, loading, skeletonsAmount, scrollEndRef, scrollContainerRef, className, chipToggle, ...rest }: NotificationPanelProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace NotificationPanel {
     const Blank: typeof NotificationPanelBlank;
     type BlankProps = NotificationPanelBlankProps;
@@ -43,4 +50,6 @@ export declare namespace NotificationPanel {
     type DividerProps = NotificationPanelDividerProps;
     const Stack: typeof NotificationCardStack;
     type StackProps = NotificationCardStackProps;
+    const Group: typeof NotificationPanelGroup;
+    type GroupProps = NotificationPanelGroupProps;
 }

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

@@ -13,6 +13,7 @@ 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';
 import { Scroll } from '@snack-uikit/scroll';
 import { SegmentedControl } from '@snack-uikit/segmented-control';
 import { SkeletonContextProvider, WithSkeleton } from '@snack-uikit/skeleton';
@@ -20,19 +21,24 @@ import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { NotificationCardSkeleton } from '../NotificationCard/components';
-import { NotificationCardStack, NotificationPanelBlank, NotificationPanelSettings, } from './components';
+import { NotificationCardStack, NotificationPanelBlank, NotificationPanelGroup, NotificationPanelSettings, } from './components';
 import { NotificationPanelDivider } from './components/NotificationPanelDivider';
 import { TEST_IDS } from './constants';
 import { WithTooltip } from './helperComponents';
 import styles from './styles.module.css';
 /** Компонент панели для уведомлений */
 export function NotificationPanel(_a) {
-    var { title, settings, segments, readAllButton, footerButton, content, loading, skeletonsAmount = 2, scrollEndRef, scrollContainerRef, className } = _a, rest = __rest(_a, ["title", "settings", "segments", "readAllButton", "footerButton", "content", "loading", "skeletonsAmount", "scrollEndRef", "scrollContainerRef", "className"]);
+    var { title, settings, segments, readAllButton, footerButton, content, loading, skeletonsAmount = 2, scrollEndRef, scrollContainerRef, className, chipToggle = {
+        label: 'Label',
+        checked: false,
+        onChange: () => { },
+    } } = _a, rest = __rest(_a, ["title", "settings", "segments", "readAllButton", "footerButton", "content", "loading", "skeletonsAmount", "scrollEndRef", "scrollContainerRef", "className", "chipToggle"]);
     const skeletons = useMemo(() => Array.from({ length: skeletonsAmount }, (_, i) => i), [skeletonsAmount]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [_jsxs("div", { className: styles.notificationPanelHeader, children: [_jsxs("div", { className: styles.notificationPanelHeadline, children: [_jsx(Typography.SansHeadlineS, { className: styles.notificationPanelTitle, children: _jsx(TruncateString, { text: title, "data-test-id": TEST_IDS.title }) }), _jsxs("div", { className: styles.notificationPanelHeaderActions, children: [readAllButton && (_jsx(WithTooltip, { tooltip: readAllButton.tooltip, children: _jsx(ButtonFunction, Object.assign({}, readAllButton, { onClick: readAllButton.onClick, size: 'xs', disabled: readAllButton.disabled || loading, "data-test-id": TEST_IDS.readAll })) })), settings && _jsx(NotificationPanelSettings, Object.assign({}, settings))] })] }), _jsx("div", { children: segments && (_jsx(SegmentedControl, Object.assign({}, segments, { size: 's', items: segments.items.map(item => (Object.assign(Object.assign({}, item), { disabled: item.disabled || loading }))), "data-test-id": TEST_IDS.segments }))) })] }), _jsx(Scroll, { size: 'm', ref: scrollContainerRef, children: _jsxs("div", { className: styles.notificationPanelBody, children: [content, loading && (_jsx(SkeletonContextProvider, { loading: loading || false, children: skeletons.map(skeleton => (_jsx(WithSkeleton, { skeleton: _jsx(NotificationCardSkeleton, {}) }, skeleton))) })), _jsx("div", { className: styles.scrollStub, ref: scrollEndRef })] }) }), footerButton && (_jsx("button", { type: 'button', onClick: footerButton.onClick, className: styles.notificationPanelFooterButton, "data-test-id": TEST_IDS.footerButton, children: _jsx(Typography.SansLabelS, { children: footerButton.label }) }))] })));
+    return (_jsxs("div", Object.assign({ className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [_jsxs("div", { className: styles.notificationPanelHeader, children: [_jsxs("div", { className: styles.notificationPanelHeadline, children: [_jsx(Typography.SansHeadlineS, { className: styles.notificationPanelTitle, children: _jsx(TruncateString, { text: title, "data-test-id": TEST_IDS.title }) }), _jsxs("div", { className: styles.notificationPanelHeaderActions, children: [readAllButton && (_jsx(WithTooltip, { tooltip: readAllButton.tooltip, children: _jsx(ButtonFunction, Object.assign({}, readAllButton, { onClick: readAllButton.onClick, size: 'xs', disabled: readAllButton.disabled || loading, "data-test-id": TEST_IDS.readAll })) })), settings && _jsx(NotificationPanelSettings, Object.assign({}, settings))] })] }), _jsxs("div", { className: styles.actionsRow, children: [segments && (_jsx(SegmentedControl, Object.assign({}, segments, { size: 'xs', items: segments.items.map(item => (Object.assign(Object.assign({}, item), { disabled: item.disabled || loading }))), "data-test-id": TEST_IDS.segments }))), chipToggle && (_jsx(ChipToggle, { size: 'xs', disabled: loading, label: chipToggle.label, onChange: chipToggle.onChange, checked: chipToggle.checked }))] })] }), _jsx(Scroll, { size: 'm', ref: scrollContainerRef, children: _jsxs("div", { className: styles.notificationPanelBody, children: [content, loading && (_jsx(SkeletonContextProvider, { loading: loading || false, children: skeletons.map(skeleton => (_jsx(WithSkeleton, { skeleton: _jsx(NotificationCardSkeleton, {}) }, skeleton))) })), _jsx("div", { className: styles.scrollStub, ref: scrollEndRef })] }) }), footerButton && (_jsx("button", { type: 'button', onClick: footerButton.onClick, className: styles.notificationPanelFooterButton, "data-test-id": TEST_IDS.footerButton, children: _jsx(Typography.SansLabelS, { children: footerButton.label }) }))] })));
 }
 (function (NotificationPanel) {
     NotificationPanel.Blank = NotificationPanelBlank;
     NotificationPanel.Divider = NotificationPanelDivider;
     NotificationPanel.Stack = NotificationCardStack;
+    NotificationPanel.Group = NotificationPanelGroup;
 })(NotificationPanel || (NotificationPanel = {}));

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

@@ -23,5 +23,9 @@ export type NotificationCardStackProps = {
      * Список действий в выпадающем меню
      */
     actions?: Action[];
+    /**
+     * Состояние непрочитанных карточек
+     */
+    unread?: boolean;
 };
-export declare function NotificationCardStack({ children, defaultOpen, onOpenChanged, title, actions, }: NotificationCardStackProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function NotificationCardStack({ children, defaultOpen, onOpenChanged, title, actions, unread, }: NotificationCardStackProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -9,7 +9,7 @@ import { useAnimatedOpening } from './hooks';
 import styles from './styles.module.css';
 import { cloneCard } from './utils';
 const ANIMATION_DURATION = 0.3;
-export function NotificationCardStack({ children, defaultOpen, onOpenChanged, title, actions, }) {
+export function NotificationCardStack({ children, defaultOpen, onOpenChanged, title, actions, unread, }) {
     const [actionsOpen, setActionsOpen] = useState(false);
     const { open, toggleOpen, isVisible } = useAnimatedOpening({
         defaultOpen,
@@ -23,6 +23,8 @@ export function NotificationCardStack({ children, defaultOpen, onOpenChanged, ti
     if (!stack.length) {
         return _jsx(_Fragment, { children: first });
     }
-    const firstCardElement = open ? first : cloneCard(first, { onClick: toggleOpen });
+    const firstCardElement = open
+        ? first
+        : cloneCard(first, componentProps => (Object.assign(Object.assign({}, componentProps), { onClick: toggleOpen, unread: unread || componentProps.unread })));
     return (_jsxs("div", { className: styles.container, style: { '--snack-notification-stack-animation-duration': `${ANIMATION_DURATION}s` }, "data-test-id": TEST_IDS.cardStack.wrapper, children: [_jsxs("div", { className: styles.header, "data-test-id": TEST_IDS.cardStack.headline, children: [_jsx("label", { className: styles.title, onClick: toggleOpen, "data-test-id": TEST_IDS.cardStack.title, children: title }), _jsxs("div", { className: styles.right, children: [actions && actions.length > 0 && (_jsx(ActionsButton, { actions: actions, open: actionsOpen, setDroplistOpen: setActionsOpen, size: 'xs', icon: _jsx(KebabSVG, {}) })), _jsx(ButtonFunction, { size: 'xs', onClick: toggleOpen, "data-test-id": TEST_IDS.cardStack.openButton, icon: open ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}) })] })] }), _jsxs("div", { className: styles.cards, children: [_jsxs("div", { className: styles.first, children: [_jsx(StackTail, { open: open, count: stack.length }), firstCardElement] }), _jsx("div", { className: styles.stack, "data-open": open || undefined, "data-tail-size": stack.length, children: _jsx("div", { className: styles.animationContainer, children: isVisible ? stack : [] }) })] })] }));
 }

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

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

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

@@ -3,5 +3,5 @@ export const cloneCard = (element, props) => {
     if (!isValidElement(element)) {
         return element;
     }
-    return cloneElement(element, Object.assign(Object.assign({}, element.props), props));
+    return cloneElement(element, props(element.props));
 };

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

@@ -9,7 +9,7 @@ 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 } from "react/jsx-runtime";
 import cn from 'classnames';
 import { InfoBlock } from '@snack-uikit/info-block';
 import styles from './styles.module.css';
@@ -17,5 +17,5 @@ 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) })) }));
+    return (_jsx("div", { className: styles.wrapper, 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/esm/components/NotificationPanel/components/NotificationPanelBlank/styles.module.css

@@ -1,3 +1,10 @@
+.wrapper{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  min-height:316px;
+}
+
 .notificationPanelBlank{
   padding:var(--space-notification-panel-body-info-padding, 24px);
 }

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

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+export type NotificationPanelGroupProps = WithSupportProps<{
+    /** Заголовок группы */
+    title: string;
+    /** Содержимое группы */
+    children: ReactNode;
+    /** CSS-класс */
+    className?: string;
+}>;
+/** Группа уведомлений с заголовком внутри панели */
+export declare function NotificationPanelGroup({ title, children, className, ...rest }: NotificationPanelGroupProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,22 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+import { extractSupportProps } from '@snack-uikit/utils';
+import styles from './styles.module.css';
+/** Группа уведомлений с заголовком внутри панели */
+export function NotificationPanelGroup(_a) {
+    var { title, children, className } = _a, rest = __rest(_a, ["title", "children", "className"]);
+    return (_jsxs("div", Object.assign({ className: cn(styles.root, className) }, extractSupportProps(rest), { children: [_jsx("div", { className: styles.title, children: _jsx(Typography.LightLabelS, { className: styles.text, tag: 'span', children: _jsx(TruncateString, { text: title }) }) }), _jsx("div", { className: styles.content, children: children })] })));
+}

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

@@ -0,0 +1 @@
+export { NotificationPanelGroup, type NotificationPanelGroupProps } from './NotificationPanelGroup';

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

@@ -0,0 +1 @@
+export { NotificationPanelGroup } from './NotificationPanelGroup';

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

@@ -0,0 +1,34 @@
+.root{
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  gap:var(--space-notification-panel-container-body-gap, 16px);
+}
+
+.title{
+  position:sticky;
+  z-index:1;
+  top:4px;
+  display:flex;
+  justify-content:center;
+}
+
+.text{
+  padding-left:var(--space-notification-panel-date-horizontal-padding, 8px);
+  padding-right:var(--space-notification-panel-date-horizontal-padding, 8px);
+  height:var(--size-notification-panel-date-height, 20px);
+  border-radius:var(--radius-chips-m, 20px);
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  color:var(--sys-neutral-text-disabled, #aaaebd);
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
+  border-style:solid;
+}
+
+.content{
+  display:flex;
+  flex-direction:column;
+  gap:var(--space-notification-panel-container-body-gap, 16px);
+}

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

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

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

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

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

@@ -101,4 +101,12 @@
   -moz-column-gap:var(--dimension-1m, 8px);
        column-gap:var(--dimension-1m, 8px);
   align-items:center;
+}
+
+.actionsRow{
+  display:flex;
+  -moz-column-gap:var(--dimension-1m, 8px);
+       column-gap:var(--dimension-1m, 8px);
+  align-items:center;
+  justify-content:space-between;
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Notification",
-  "version": "0.13.30",
+  "version": "0.13.31-preview-7cd3a502.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,6 +37,7 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.19.17",
+    "@snack-uikit/chips": "0.28.17",
     "@snack-uikit/icons": "0.27.7",
     "@snack-uikit/info-block": "0.6.39",
     "@snack-uikit/link": "0.17.19",
@@ -45,6 +46,7 @@
     "@snack-uikit/scroll": "0.10.8",
     "@snack-uikit/segmented-control": "0.6.19",
     "@snack-uikit/skeleton": "0.6.10",
+    "@snack-uikit/status": "0.10.11",
     "@snack-uikit/tag": "0.15.17",
     "@snack-uikit/tooltip": "0.18.11",
     "@snack-uikit/truncate-string": "0.7.10",
@@ -53,5 +55,5 @@
     "classnames": "2.5.1",
     "uncontrollable": "9.0.0"
   },
-  "gitHead": "d1bb005216777d5730f95394b5f1b823feb694df"
+  "gitHead": "32e4b2dbb52e9da27a48b5bee0e238a0ab785b1d"
 }

package/src/components/NotificationCard/NotificationCard.tsx

@@ -4,6 +4,7 @@ import { ElementType, MouseEventHandler, ReactNode, useEffect, useMemo, useRef,
 import { ButtonSimple, ButtonSimpleProps, ButtonTonal, ButtonTonalProps } from '@snack-uikit/button';
 import { KebabSVG } from '@snack-uikit/icons';
 import { Link, PickLinkProps } from '@snack-uikit/link';
+import { StatusIndicator } from '@snack-uikit/status';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
@@ -180,6 +181,8 @@ export function NotificationCard<LinkElement extends ElementType = 'a'>({
           )}
         </div>
       )}
+
+      {unread && <StatusIndicator className={styles.statusIndicator} size='xs' appearance='primary' />}
     </div>
   );
 }

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

@@ -29,6 +29,12 @@
   box-sizing: border-box;
 }
 
+.statusIndicator {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+}
+
 .notificationCard {
   @include styles-tokens-notification-notificationCard.composite-var(styles-tokens-notification-notificationCard.$notification-card-container);
 

package/src/components/NotificationPanel/NotificationPanel.tsx

@@ -2,6 +2,7 @@ import cn from 'classnames';
 import { MouseEventHandler, ReactNode, RefObject, useMemo } from 'react';
 
 import { ButtonFunction, ButtonFunctionProps } from '@snack-uikit/button';
+import { ChipToggle } from '@snack-uikit/chips';
 import { Scroll } from '@snack-uikit/scroll';
 import { SegmentedControl, SegmentedControlProps } from '@snack-uikit/segmented-control';
 import { SkeletonContextProvider, WithSkeleton } from '@snack-uikit/skeleton';
@@ -16,6 +17,8 @@ import {
   NotificationCardStackProps,
   NotificationPanelBlank,
   NotificationPanelBlankProps,
+  NotificationPanelGroup,
+  NotificationPanelGroupProps,
   NotificationPanelSettings,
   NotificationPanelSettingsProps,
 } from './components';
@@ -33,6 +36,13 @@ export type NotificationPanelProps = WithSupportProps<{
   settings?: NotificationPanelSettingsProps;
   /** Сегменты для фильтрации */
   segments?: Omit<SegmentedControlProps, 'size' | 'data-test-id'>;
+  /** Переключатель для фильтрации */
+  chipToggle?: {
+    label: string;
+    checked: boolean;
+    defaultChecked?: boolean;
+    onChange: (checked: boolean) => void;
+  };
   /** Кнопка в "шапке" панели */
   readAllButton?: Omit<ButtonFunctionProps, 'data-test-id'> & {
     tooltip?: TooltipProps;
@@ -68,6 +78,11 @@ export function NotificationPanel({
   scrollEndRef,
   scrollContainerRef,
   className,
+  chipToggle = {
+    label: 'Label',
+    checked: false,
+    onChange: () => {},
+  },
   ...rest
 }: NotificationPanelProps) {
   const skeletons = useMemo(() => Array.from({ length: skeletonsAmount }, (_, i) => i), [skeletonsAmount]);
@@ -97,11 +112,11 @@ export function NotificationPanel({
           </div>
         </div>
 
-        <div>
+        <div className={styles.actionsRow}>
           {segments && (
             <SegmentedControl
               {...segments}
-              size='s'
+              size='xs'
               items={segments.items.map(item => ({
                 ...item,
                 disabled: item.disabled || loading,
@@ -109,6 +124,15 @@ export function NotificationPanel({
               data-test-id={TEST_IDS.segments}
             />
           )}
+          {chipToggle && (
+            <ChipToggle
+              size='xs'
+              disabled={loading}
+              label={chipToggle.label}
+              onChange={chipToggle.onChange}
+              checked={chipToggle.checked}
+            />
+          )}
         </div>
       </div>
 
@@ -148,4 +172,6 @@ export namespace NotificationPanel {
   export type DividerProps = NotificationPanelDividerProps;
   export const Stack: typeof NotificationCardStack = NotificationCardStack;
   export type StackProps = NotificationCardStackProps;
+  export const Group: typeof NotificationPanelGroup = NotificationPanelGroup;
+  export type GroupProps = NotificationPanelGroupProps;
 }

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

@@ -33,6 +33,10 @@ export type NotificationCardStackProps = {
    * Список действий в выпадающем меню
    */
   actions?: Action[];
+  /**
+   * Состояние непрочитанных карточек
+   */
+  unread?: boolean;
 };
 
 const ANIMATION_DURATION = 0.3;
@@ -43,6 +47,7 @@ export function NotificationCardStack({
   onOpenChanged,
   title,
   actions,
+  unread,
 }: NotificationCardStackProps) {
   const [actionsOpen, setActionsOpen] = useState(false);
   const { open, toggleOpen, isVisible } = useAnimatedOpening({
@@ -61,7 +66,13 @@ export function NotificationCardStack({
     return <>{first}</>;
   }
 
-  const firstCardElement = open ? first : cloneCard(first, { onClick: toggleOpen });
+  const firstCardElement = open
+    ? first
+    : cloneCard(first, componentProps => ({
+        ...componentProps,
+        onClick: toggleOpen,
+        unread: unread || componentProps.unread,
+      }));
 
   return (
     <div

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

@@ -1,12 +1,11 @@
 import { cloneElement, isValidElement, ReactNode } from 'react';
 
-export const cloneCard = (element: ReactNode, props: Record<string, unknown>) => {
+type ComponentProps = Record<string, unknown>;
+
+export const cloneCard = (element: ReactNode, props: (componentProps: ComponentProps) => ComponentProps) => {
   if (!isValidElement(element)) {
     return element;
   }
 
-  return cloneElement(element, {
-    ...element.props,
-    ...props,
-  });
+  return cloneElement(element, props(element.props));
 };

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

@@ -9,7 +9,7 @@ export type NotificationPanelBlankProps = Omit<InfoBlockProps, 'footer' | 'align
 /** Компонента для "заглушки" вместо карточек в панели */
 export function NotificationPanelBlank({ icon, className, ...props }: NotificationPanelBlankProps) {
   return (
-    <>
+    <div className={styles.wrapper}>
       <InfoBlock
         {...props}
         icon={icon ? { ...icon, appearance: icon.appearance ?? 'neutral' } : undefined}
@@ -17,6 +17,6 @@ export function NotificationPanelBlank({ icon, className, ...props }: Notificati
         align='vertical'
         className={cn(styles.notificationPanelBlank, className)}
       />
-    </>
+    </div>
   );
 }

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

@@ -1,5 +1,12 @@
 @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-notification-notificationPanel';
 
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 316px; // two skeleton cards height
+}
+
 .notificationPanelBlank {
   @include styles-tokens-notification-notificationPanel.composite-var(styles-tokens-notification-notificationPanel.$notification-panel-body-info-container);
 }

package/src/components/NotificationPanel/components/NotificationPanelGroup/NotificationPanelGroup.tsx

@@ -0,0 +1,31 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import styles from './styles.module.scss';
+
+export type NotificationPanelGroupProps = WithSupportProps<{
+  /** Заголовок группы */
+  title: string;
+  /** Содержимое группы */
+  children: ReactNode;
+  /** CSS-класс */
+  className?: string;
+}>;
+
+/** Группа уведомлений с заголовком внутри панели */
+export function NotificationPanelGroup({ title, children, className, ...rest }: NotificationPanelGroupProps) {
+  return (
+    <div className={cn(styles.root, className)} {...extractSupportProps(rest)}>
+      <div className={styles.title}>
+        <Typography.LightLabelS className={styles.text} tag='span'>
+          <TruncateString text={title} />
+        </Typography.LightLabelS>
+      </div>
+      <div className={styles.content}>{children}</div>
+    </div>
+  );
+}

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

@@ -0,0 +1 @@
+export { NotificationPanelGroup, type NotificationPanelGroupProps } from './NotificationPanelGroup';

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

@@ -0,0 +1,39 @@
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-notification-notificationPanel' as panel;
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element' as element;
+
+.root {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: element.$space-notification-panel-container-body-gap;
+}
+
+.title {
+  position: sticky;
+  z-index: 1; /* stylelint-disable-line declaration-property-value-allowed-list */
+  top: 4px;
+
+  display: flex;
+  justify-content: center;
+  
+}
+
+.text {
+  @include element.composite-var(panel.$notification-panel-date-container);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  color: panel.$sys-neutral-text-disabled;
+
+  background-color: panel.$sys-neutral-background1-level;
+  border-color: panel.$sys-neutral-decor-default;
+  border-style: solid;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: element.$space-notification-panel-container-body-gap;
+}

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

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

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

@@ -106,4 +106,11 @@
   display: flex;
   column-gap: styles-tokens-notification-notificationPanel.$dimension-1m;
   align-items: center;
-}
+}
+
+.actionsRow {
+  display: flex;
+  column-gap: styles-tokens-notification-notificationPanel.$dimension-1m;
+  align-items: center;
+  justify-content: space-between;
+}