Merge branch 'main' into fix-gallery-video-url

Author: kseniya57

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [4.3.0](https://github.com/gravity-ui/components/compare/v4.2.2...v4.3.0) (2025-05-16)
+
+
+### Features
+
+* **Notifications:** add the renderCustomHeader prop ([b7ddd4b](https://github.com/gravity-ui/components/commit/b7ddd4b1c031d086a73b0752007bf719ce65480c))
+
 ## [4.2.2](https://github.com/gravity-ui/components/compare/v4.2.1...v4.2.2) (2025-05-06)
 
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/components",
-  "version": "4.2.2",
+  "version": "4.3.0",
   "description": "",
   "license": "MIT",
   "type": "commonjs",

package.json

@@ -53,12 +53,18 @@ export const Notifications = React.memo(function Notifications(props: Notificati
         );
     }
 
+    const title = <div className={b('head-title')}>{props.title || i18n('title')}</div>;
+
     return (
         <div className={b()} data-qa={props.qa}>
-            <div className={b('head')}>
-                <div className={b('head-title')}>{props.title || i18n('title')}</div>
-                {<div className={b('actions')}>{props.actions}</div>}
-            </div>
+            {props.renderCustomHeader ? (
+                props.renderCustomHeader({title})
+            ) : (
+                <div className={b('head')}>
+                    {title}
+                    <div className={b('actions')}>{props.actions}</div>
+                </div>
+            )}
             <div className={b('body')}>{content}</div>
         </div>
     );

src/components/Notifications/Notifications.tsx

@@ -1,10 +1,21 @@
 import * as React from 'react';
 
-import {Bell} from '@gravity-ui/icons';
-import {Button, Checkbox, Flex, Icon, Popup, SegmentedRadioGroup, Text} from '@gravity-ui/uikit';
+import {Bell, Funnel, Gear} from '@gravity-ui/icons';
+import {
+    Button,
+    Checkbox,
+    Flex,
+    Icon,
+    Popup,
+    SegmentedRadioGroup,
+    Tab,
+    TabList,
+    Text,
+} from '@gravity-ui/uikit';
 import {Meta, StoryFn} from '@storybook/react';
 
 import {delay} from '../../InfiniteScroll/__stories__/utils';
+import {NotificationAction} from '../../Notification/NotificationAction';
 import {NotificationProps, NotificationSourcePlacement} from '../../Notification/definitions';
 import {Notifications} from '../Notifications';
 import {NotificationsPopupWrapper} from '../NotificationsPopupWrapper';
@@ -161,6 +172,73 @@ export const Empty: StoryFn = () => {
     );
 };
 
+export const CustomHeader: StoryFn = () => {
+    return (
+        <Wrapper>
+            <NotificationsWithCustomHeader />
+        </Wrapper>
+    );
+};
+
+function NotificationsWithCustomHeader() {
+    const [activeTab, setActiveTab] = React.useState('first');
+
+    return (
+        <Notifications
+            renderCustomHeader={({title}) => (
+                <CustomHeaderComponent
+                    title={title}
+                    activeTab={activeTab}
+                    onTabUpdate={setActiveTab}
+                />
+            )}
+            notifications={activeTab === 'first' ? mockNotifications : []}
+        />
+    );
+}
+
+interface CustomHeaderComponentProps {
+    title: React.ReactNode;
+    activeTab: string;
+    onTabUpdate?: (tab: string) => void;
+}
+
+function CustomHeaderComponent({title, activeTab, onTabUpdate}: CustomHeaderComponentProps) {
+    return (
+        <div>
+            <div
+                style={{
+                    padding: '16px 16px 0 16px',
+                }}
+            >
+                {title}
+            </div>
+            <div style={{position: 'relative'}}>
+                <TabList value={activeTab} onUpdate={onTabUpdate}>
+                    <Tab style={{marginLeft: '16px'}} value="first">
+                        First tab
+                    </Tab>
+                    <Tab value="second">Second tab</Tab>
+                </TabList>
+                <Flex
+                    style={{
+                        position: 'absolute',
+                        right: '16px',
+                        top: '50%',
+                        transform: 'translateY(-50%)',
+                    }}
+                    gap={1}
+                >
+                    <NotificationAction action={{icon: Funnel, text: 'Filter'}} />
+                    {activeTab === 'second' && (
+                        <NotificationAction action={{icon: Gear, text: 'Settings'}} />
+                    )}
+                </Flex>
+            </div>
+        </div>
+    );
+}
+
 function useNotificationsVariationsControl() {
     const [showNotificationsActions, setShowNotificationsActions] = React.useState(true);
     const [showNotificationActions, setShowNotificationActions] = React.useState(true);

src/components/Notifications/__stories__/Notifications.stories.tsx

@@ -8,6 +8,8 @@ export type NotificationsProps = {
     title?: React.ReactNode;
     actions?: React.ReactNode;
 
+    renderCustomHeader?: (params: {title: React.ReactNode}) => JSX.Element;
+
     notifications: NotificationProps[];
     areAllNotificationsLoaded?: boolean;
     onLoadMoreNotifications?: () => Promise<void>;