fix: change the naming and and the comment for requestAnimationFrame

Author: Bair Buldaev

src/components/Notification/Notification.tsx

@@ -12,7 +12,7 @@ import './Notification.scss';
 const b = block('notification');
 
 type Props = {
-    rootRef?: React.RefObject<HTMLDivElement>;
+    wrapperRef?: React.RefObject<HTMLDivElement>;
     notification: NotificationProps;
 };
 
@@ -26,7 +26,7 @@ export const Notification = React.memo(function Notification(props: Props) {
     const ref = React.useRef<HTMLDivElement>(null);
     const {t} = i18n.useTranslation();
     const mobile = useMobile();
-    const {rootRef, notification} = props;
+    const {wrapperRef, notification} = props;
     const {
         title,
         content,
@@ -66,7 +66,7 @@ export const Notification = React.memo(function Notification(props: Props) {
     if (typeof content === 'function') {
         renderedContent = (
             <div className={b('content-wrapper')}>
-                <div className={b('content')}>{content({rootRef})}</div>
+                <div className={b('content')}>{content({wrapperRef})}</div>
             </div>
         );
     } else {

src/components/Notification/NotificationWithSwipe.tsx

@@ -17,7 +17,7 @@ const swipeActionContainerCls = b('swipe-action-container');
 type Props = {
     notification: NotificationProps;
     swipeThreshold?: number;
-    rootRef?: React.RefObject<HTMLDivElement>;
+    wrapperRef?: React.RefObject<HTMLDivElement>;
 };
 
 export const NotificationWithSwipe = React.memo(function NotificationWithSwipe(props: Props) {
@@ -28,7 +28,7 @@ export const NotificationWithSwipe = React.memo(function NotificationWithSwipe(p
     }
 
     const ref = React.useRef<HTMLDivElement>(null);
-    const {notification, rootRef} = props;
+    const {notification, wrapperRef} = props;
     const swipeActions = notification.swipeActions;
     const leftAction = swipeActions && 'left' in swipeActions ? swipeActions.left : undefined;
     const rightAction = swipeActions && 'right' in swipeActions ? swipeActions.right : undefined;
@@ -136,7 +136,7 @@ export const NotificationWithSwipe = React.memo(function NotificationWithSwipe(p
             >
                 {leftAction ? renderAction(leftAction) : null}
                 <div className={notificationWrapperCls}>
-                    <Notification notification={notification} rootRef={rootRef} />
+                    <Notification notification={notification} wrapperRef={wrapperRef} />
                 </div>
                 {rightAction ? renderAction(rightAction) : null}
             </div>

src/components/Notification/definitions.ts

@@ -26,7 +26,7 @@ export type NotificationProps = {
     id: string;
     content:
         | React.ReactNode
-        | ((props: {rootRef?: React.RefObject<HTMLDivElement>}) => React.ReactNode);
+        | ((props: {wrapperRef?: React.RefObject<HTMLDivElement>}) => React.ReactNode);
 
     title?: React.ReactNode;
     formattedDate?: React.ReactNode;

src/components/Notifications/NotificationWrapper.tsx

@@ -44,6 +44,10 @@ export const NotificationWrapper = (props: {
             element.style.maxHeight = `${element.scrollHeight}px`;
             element.style.transition = 'max-height 0.3s';
 
+            // Firefox batches style changes made within a single frame, so setting maxHeight
+            // to scrollHeight and then to 0px in the same frame skips the transition entirely.
+            // Two nested requestAnimationFrame calls guarantee the browser commits the initial
+            // maxHeight in one frame before applying 0px in the next, so the animation runs.
             requestAnimationFrame(() => {
                 requestAnimationFrame(() => {
                     element.style.maxHeight = '0px';
@@ -78,10 +82,10 @@ export const NotificationWrapper = (props: {
                     <NotificationWithSwipe
                         notification={notification}
                         swipeThreshold={swipeThreshold}
-                        rootRef={ref}
+                        wrapperRef={ref}
                     />
                 ) : (
-                    <Notification notification={notification} rootRef={ref} />
+                    <Notification notification={notification} wrapperRef={ref} />
                 )}
             </div>
         </li>

src/components/Notifications/__stories__/mockData.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import {Archive, ArrowRotateLeft, CircleCheck, Funnel, TrashBin} from '@gravity-ui/icons';
-import {Button, DropdownMenu, Flex, Icon, Link} from '@gravity-ui/uikit';
+import {Disclosure, DropdownMenu, Flex, Icon, Link} from '@gravity-ui/uikit';
 
 import {NotificationAction} from '../../Notification/NotificationAction';
 import {NotificationSwipeAction} from '../../Notification/NotificationSwipeAction';
@@ -89,54 +89,25 @@ export const notificationBottomActions: JSX.Element = (
     </React.Fragment>
 );
 
-export const LongNotificationContent = (props: {
-    rootRef?: React.RefObject<HTMLDivElement>;
-    wrapperRef?: React.RefObject<HTMLDivElement>;
-}) => {
-    const {rootRef} = props;
-    const [expanded, setExpanded] = React.useState(false);
-    const prevExpandedRef = React.useRef(false);
+export const LongNotificationContent = (props: {wrapperRef?: React.RefObject<HTMLDivElement>}) => {
+    const {wrapperRef} = props;
 
-    React.useLayoutEffect(() => {
-        if (prevExpandedRef.current && !expanded) {
+    const handleUpdate = (expanded: boolean) => {
+        if (!expanded) {
             requestAnimationFrame(() => {
-                rootRef?.current?.scrollIntoView({block: 'nearest', behavior: 'smooth'});
+                wrapperRef?.current?.scrollIntoView({block: 'nearest', behavior: 'smooth'});
             });
         }
-
-        prevExpandedRef.current = expanded;
-    }, [expanded, rootRef]);
-
-    const handleExpand = (event: React.MouseEvent<HTMLButtonElement>) => {
-        event.preventDefault();
-        setExpanded(true);
-    };
-
-    const handleCollapse = (event: React.MouseEvent<HTMLButtonElement>) => {
-        event.preventDefault();
-        setExpanded(false);
     };
 
-    if (expanded) {
-        return (
+    return (
+        <Disclosure summary="Collapsed content" onUpdate={handleUpdate}>
             <Flex direction="column" gap={1}>
                 {Array.from({length: 20}, (_, index) => (
                     <i key={index}>{'Long expanded content. '}</i>
                 ))}
-                <Button view="flat-secondary" onClick={handleCollapse}>
-                    Collapse
-                </Button>
             </Flex>
-        );
-    }
-
-    return (
-        <Flex direction="column" gap={1}>
-            <span>Collapsed content</span>
-            <Button view="flat-secondary" onClick={handleExpand}>
-                Expand
-            </Button>
-        </Flex>
+        </Disclosure>
     );
 };
 
@@ -209,7 +180,6 @@ export const mockNotifications: NotificationProps[] = [
         content: (contentProps) => <LongNotificationContent {...contentProps} />,
         formattedDate: '29 seconds ago',
         swipeActions: notificationsMockSwipeActions,
-        href: 'https://ya.ru',
     },
     {
         id: 'yandex',