feat(Toaster): add experimental animation timing function

Author: ogonkov

src/components/Toaster/ToastList/ToastAnimation.scss

@@ -61,6 +61,43 @@ $animation-duration: 0.6s;
                 animation-name: #{variables.$ns}toast-exit-reduced-motion;
             }
         }
+
+        // Alternative animation timing function
+        &_feature_alternate-animation-timing-fn {
+            animation-timing-function: linear(
+                0,
+                0.002 0.3%,
+                0.007 0.6%,
+                0.033 1.3%,
+                0.073 2%,
+                0.125 2.7%,
+                0.254 4.1%,
+                0.683 8.3%,
+                0.803 9.7%,
+                0.897 11%,
+                0.977 12.4%,
+                1.036 13.8%,
+                1.058 14.5%,
+                1.078 15.3%,
+                1.091 16%,
+                1.101 16.8%,
+                1.106 17.5%,
+                1.108 18.3%,
+                1.107 19.2%,
+                1.103 20.1%,
+                1.089 21.8%,
+                1.038 26.5%,
+                1.014 29.1%,
+                1.005 30.5%,
+                0.997 32%,
+                0.992 33.5%,
+                0.989 35.1%,
+                0.989 38.6%,
+                0.998 47.4%,
+                1.001 53.2%,
+                1
+            );
+        }
     }
 
     @keyframes #{variables.$ns}toast-enter-#{$platform} {

src/components/Toaster/ToastList/ToastList.tsx

@@ -1,34 +1,39 @@
 'use client';
 
+import * as React from 'react';
+
 import {CSSTransition, TransitionGroup} from 'react-transition-group';
 
 import {block} from '../../utils/cn';
 import {getCSSTransitionClassNames} from '../../utils/transition';
 import {Toast} from '../Toast/Toast';
-import type {InternalToastProps} from '../types';
+import type {InternalToastProps, ToastListProps} from '../types';
 
 import './ToastAnimation.scss';
 import './ToastList.scss';
 
-const desktopTransitionClassNames = getCSSTransitionClassNames(block('toast-animation-desktop'));
-const mobileTransitionClassNames = getCSSTransitionClassNames(block('toast-animation-mobile'));
-
-type ToastListProps = {
-    removeCallback: (name: string) => void;
-    toasts: InternalToastProps[];
-    mobile?: boolean;
-};
-
 export function ToastList(props: ToastListProps) {
-    const {toasts, mobile, removeCallback} = props;
+    const {toasts, mobile, alternateAnimationFunction, removeCallback} = props;
+
+    const classNames = React.useMemo(
+        () =>
+            mobile
+                ? getCSSTransitionClassNames(block('toast-animation-mobile'), {
+                      feature: alternateAnimationFunction ? 'alternate-animation-timing-fn' : false,
+                  })
+                : getCSSTransitionClassNames(block('toast-animation-desktop'), {
+                      feature: alternateAnimationFunction ? 'alternate-animation-timing-fn' : false,
+                  }),
+        [alternateAnimationFunction, mobile],
+    );
 
     return (
         <TransitionGroup component={null}>
             {toasts.map((toast) => (
                 <CSSTransition
                     key={`${toast.name}_${toast.addedAt}`}
                     nodeRef={toast.ref}
-                    classNames={mobile ? mobileTransitionClassNames : desktopTransitionClassNames}
+                    classNames={classNames}
                     addEndListener={(done) =>
                         toast.ref?.current?.addEventListener('animationend', done)
                     }

src/components/Toaster/ToasterComponent/ToasterComponent.tsx

@@ -8,22 +8,32 @@ import {block} from '../../utils/cn';
 import {ToastsContext} from '../Provider/ToastsContext';
 import {ToastList} from '../ToastList/ToastList';
 import {useToaster} from '../hooks/useToaster';
+import type {ToastListProps} from '../types';
 
-interface Props {
+interface Props extends Pick<ToastListProps, 'mobile' | 'alternateAnimationFunction'> {
     className?: string;
-    mobile?: boolean;
     hasPortal?: boolean;
 }
 
 const b = block('toaster');
 
-export function ToasterComponent({className, mobile, hasPortal = true}: Props) {
+export function ToasterComponent({
+    className,
+    mobile,
+    alternateAnimationFunction,
+    hasPortal = true,
+}: Props) {
     const defaultMobile = useMobile();
     const {remove} = useToaster();
     const list = React.useContext(ToastsContext);
 
     const toaster = (
-        <ToastList toasts={list} removeCallback={remove} mobile={mobile ?? defaultMobile} />
+        <ToastList
+            toasts={list}
+            removeCallback={remove}
+            mobile={mobile ?? defaultMobile}
+            alternateAnimationFunction={alternateAnimationFunction}
+        />
     );
 
     if (!hasPortal) {

src/components/Toaster/__stories__/Toaster.stories.tsx

@@ -31,16 +31,18 @@ const views: ButtonView[] = [
     'flat-contrast',
 ];
 
-function viewSelect(name: string) {
+function selectControl<T>(name: string, options: T[]) {
     return {
         name,
         control: 'select' as const,
-        defaultValue: 'outlined',
-        options: views,
-        if: {arg: 'setActions'},
+        options,
     };
 }
 
+function viewSelect(name: string) {
+    return {...selectControl(name, views), defaultValue: 'outlined', if: {arg: 'setActions'}};
+}
+
 const disabledControl = {
     table: {
         disable: true,
@@ -95,6 +97,7 @@ export const Default: Story = {
         allowAutoHiding: booleanControl('Allow auto hiding'),
         setTitle: booleanControl('Add title'),
         setContent: booleanControl('Add content'),
+        animation: selectControl('Animation', ['default', 'alternate']),
         setActions: booleanControl('Add action'),
         action1View: viewSelect('Action 1 view'),
         action2View: viewSelect('Action 2 view'),
@@ -123,6 +126,7 @@ export const ToastPlayground: Story = {
         actions: faker.helpers.uniqueArray(getAction, faker.number.int({min: 1, max: 2})),
     },
     argTypes: {
+        animation: selectControl('Animation', ['default', 'alternate']),
         name: disabledControl,
         addedAt: disabledControl,
         renderIcon: disabledControl,
@@ -145,6 +149,7 @@ export const ToastPlayground: Story = {
             <ToasterComponent
                 mobile={args.mobile}
                 hasPortal={context.globals.screenshotTests !== true}
+                alternateAnimationFunction={args.animation === 'alternate'}
             />
         );
     },

src/components/Toaster/__stories__/ToasterShowcase.tsx

@@ -37,6 +37,7 @@ interface Props {
     showCloseIcon: boolean;
     setTimeout: boolean;
     allowAutoHiding: boolean;
+    animation: 'default' | 'alternate';
     setTitle: boolean;
     setContent: boolean;
     setActions: boolean;
@@ -51,6 +52,7 @@ export const ToasterDemo = ({
     showCloseIcon,
     setTimeout,
     allowAutoHiding,
+    animation,
     setTitle,
     setContent,
     setActions,
@@ -388,7 +390,10 @@ export const ToasterDemo = ({
         </Button>
     );
 
-    const component = React.useMemo(() => <ToasterComponent />, []);
+    const component = React.useMemo(
+        () => <ToasterComponent alternateAnimationFunction={animation === 'alternate'} />,
+        [animation],
+    );
 
     return (
         <React.Fragment>

src/components/Toaster/types.ts

@@ -46,3 +46,11 @@ export interface ToasterContextMethods {
 }
 
 export interface ToasterPublicMethods extends ToasterContextMethods {}
+
+export type ToastListProps = {
+    removeCallback: (name: string) => void;
+    toasts: InternalToastProps[];
+    mobile?: boolean;
+    /** Experimental animation timing function */
+    alternateAnimationFunction?: boolean;
+};

src/components/utils/transition.ts

@@ -1,16 +1,18 @@
+import type {NoStrictEntityMods} from '@bem-react/classname';
+
 import {modsClassName} from './cn';
 import type {CnBlock} from './cn';
 
-export function getCSSTransitionClassNames(b: CnBlock) {
+export function getCSSTransitionClassNames(b: CnBlock, mods?: NoStrictEntityMods) {
     return {
-        appear: modsClassName(b({appear: true})),
-        appearActive: modsClassName(b({appear: 'active'})),
-        appearDone: modsClassName(b({appear: 'done'})),
-        enter: modsClassName(b({enter: true})),
-        enterActive: modsClassName(b({enter: 'active'})),
-        enterDone: modsClassName(b({enter: 'done'})),
-        exit: modsClassName(b({exit: true})),
-        exitActive: modsClassName(b({exit: 'active'})),
-        exitDone: modsClassName(b({exit: 'done'})),
+        appear: modsClassName(b({...mods, appear: true})),
+        appearActive: modsClassName(b({...mods, appear: 'active'})),
+        appearDone: modsClassName(b({...mods, appear: 'done'})),
+        enter: modsClassName(b({...mods, enter: true})),
+        enterActive: modsClassName(b({...mods, enter: 'active'})),
+        enterDone: modsClassName(b({...mods, enter: 'done'})),
+        exit: modsClassName(b({...mods, exit: true})),
+        exitActive: modsClassName(b({...mods, exit: 'active'})),
+        exitDone: modsClassName(b({...mods, exit: 'done'})),
     };
 }