+
);
diff --git a/src/components/Toaster/__stories__/ToasterShowcase.tsx b/src/components/Toaster/__stories__/ToasterShowcase.tsx
index 8f166a51a3..2fc921bc3a 100644
--- a/src/components/Toaster/__stories__/ToasterShowcase.tsx
+++ b/src/components/Toaster/__stories__/ToasterShowcase.tsx
@@ -3,7 +3,7 @@ import React from 'react';
import {faker} from '@faker-js/faker/locale/en';
import {CircleCheck, CircleInfo, Thunderbolt, TriangleExclamation} from '@gravity-ui/icons';
-import {ToasterComponent, useToaster} from '..';
+import {Toaster, ToasterComponent, useToaster} from '..';
import type {ToastAction, ToastProps} from '..';
import {Button} from '../../Button';
import type {ButtonView} from '../../Button';
@@ -14,6 +14,8 @@ import './ToasterShowcase.scss';
const b = cn('toaster-showcase');
+export const toasterInstance = new Toaster();
+
const CONTENT = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, atque!';
const ACTIONS = [
@@ -371,6 +373,22 @@ export const ToasterDemo = ({
);
+ const singletonToasterBtn = (
+
+ );
+
const component = React.useMemo(() => , []);
return (
@@ -385,6 +403,7 @@ export const ToasterDemo = ({
{toastWithLongContent}
{dynamicallyUpdatingToast}
{overrideToastBtn}
+ {singletonToasterBtn}
{clearBtn}
{component}
diff --git a/src/components/Toaster/__tests__/ToasterProvider.test.tsx b/src/components/Toaster/__tests__/ToasterProvider.test.tsx
index 78494ae8e2..30280e99f6 100644
--- a/src/components/Toaster/__tests__/ToasterProvider.test.tsx
+++ b/src/components/Toaster/__tests__/ToasterProvider.test.tsx
@@ -7,38 +7,20 @@ import {ToasterComponent} from '../ToasterComponent/ToasterComponent';
import {fireAnimationEndEvent} from '../__mocks__/fireAnimationEndEvent';
import {getToast} from '../__mocks__/getToast';
import {tick} from '../__mocks__/tick';
-import {useToaster} from '../hooks/useToaster';
-import type {ToasterPublicMethods} from '../types';
+import {Toaster} from '../index';
-function ToastAPI({onMount}: {onMount: (api: ToasterPublicMethods) => void}) {
- const toaster = useToaster();
-
- React.useEffect(() => {
- onMount(toaster);
- }, []);
-
- return null;
-}
+const toasterInstance = new Toaster();
function setup() {
- let providerAPI: undefined | ToasterPublicMethods;
-
render(
-
- {
- providerAPI = api;
- }}
- />
+
,
);
- if (!providerAPI) {
+ if (!toasterInstance) {
throw new Error('Failed to setup test');
}
-
- return providerAPI;
}
const toastTimeout = 1000;
@@ -54,10 +36,10 @@ describe('api.add', () => {
// We test that after adding toast the next add will remove
// previous toast from DOM and add it again
it('should override already added toast', async function () {
- const providerAPI = setup();
+ setup();
act(() => {
- providerAPI.add(toastProps);
+ toasterInstance.add(toastProps);
});
let toast = getToast();
@@ -67,7 +49,7 @@ describe('api.add', () => {
jest.advanceTimersByTime(1);
act(() => {
- providerAPI.add(toastProps);
+ toasterInstance.add(toastProps);
});
fireAnimationEndEvent(toast, 'toast-hide-end');
@@ -81,10 +63,10 @@ describe('api.add', () => {
describe('api.remove', () => {
it('should remove toast', function () {
- const providerAPI = setup();
+ setup();
act(() => {
- providerAPI.add({
+ toasterInstance.add({
...toastProps,
autoHiding: toastTimeout,
});
@@ -94,7 +76,7 @@ describe('api.remove', () => {
expect(toast).toBeInTheDocument();
act(() => {
- providerAPI.remove(toastProps.name);
+ toasterInstance.remove(toastProps.name);
});
tick(toast, 0);
@@ -104,10 +86,10 @@ describe('api.remove', () => {
});
it('should remove toast after timeout', function () {
- const providerAPI = setup();
+ setup();
act(() => {
- providerAPI.add({
+ toasterInstance.add({
...toastProps,
autoHiding: toastTimeout,
});
@@ -132,10 +114,10 @@ it('should remove toast after timeout', function () {
});
it('should preserve toast on hover', function () {
- const providerAPI = setup();
+ setup();
act(() => {
- providerAPI.add({
+ toasterInstance.add({
...toastProps,
autoHiding: toastTimeout,
});
@@ -170,10 +152,10 @@ it('should preserve toast on hover', function () {
describe('api.update', () => {
it('should update toast', function () {
- const providerAPI = setup();
+ setup();
act(() => {
- providerAPI.add({
+ toasterInstance.add({
...toastProps,
autoHiding: toastTimeout,
});
@@ -185,7 +167,7 @@ describe('api.update', () => {
expect(screen.queryByRole('button', {name: 'Toast Button'})).not.toBeInTheDocument();
act(() => {
- providerAPI.update(toastProps.name, {
+ toasterInstance.update(toastProps.name, {
content: 'Test Content of the toast',
actions: [
{
@@ -202,10 +184,10 @@ describe('api.update', () => {
});
it('should bypass update of unexisted toasts', function () {
- const providerAPI = setup();
+ setup();
act(() => {
- providerAPI.add({
+ toasterInstance.add({
...toastProps,
autoHiding: toastTimeout,
});
@@ -214,7 +196,7 @@ describe('api.update', () => {
const toast = getToast();
act(() => {
- providerAPI.update(`unexisted ${toastProps.name}`, {
+ toasterInstance.update(`unexisted ${toastProps.name}`, {
content: 'Test Content of the toast',
actions: [
{
@@ -231,11 +213,11 @@ describe('api.update', () => {
describe('api.removeAll', () => {
it('should remove all toasts', function () {
- const providerAPI = setup();
+ setup();
act(() => {
- providerAPI.add(toastProps);
- providerAPI.add({
+ toasterInstance.add(toastProps);
+ toasterInstance.add({
...toastProps,
name: `${toastProps.name}2`,
title: `${toastProps.title}2`,
@@ -249,7 +231,7 @@ describe('api.removeAll', () => {
expect(toast2).toBeInTheDocument();
act(() => {
- providerAPI.removeAll();
+ toasterInstance.removeAll();
});
[toast1, toast2].forEach((toast) => fireAnimationEndEvent(toast, 'toast-hide-end'));
@@ -261,45 +243,45 @@ describe('api.removeAll', () => {
describe('api.has', () => {
it('should return false when toast is not added', () => {
- const providerAPI = setup();
- expect(providerAPI.has('unexisted toasts')).toBe(false);
+ setup();
+ expect(toasterInstance.has('unexisted toasts')).toBe(false);
});
it('should return false when toast is removed by code', () => {
- const providerAPI = setup();
+ setup();
act(() => {
- providerAPI.add({
+ toasterInstance.add({
...toastProps,
autoHiding: toastTimeout,
});
});
- expect(providerAPI.has(toastProps.name)).toBe(true);
+ expect(toasterInstance.has(toastProps.name)).toBe(true);
act(() => {
- providerAPI.remove(toastProps.name);
+ toasterInstance.remove(toastProps.name);
});
- expect(providerAPI.has(toastProps.name)).toBe(false);
+ expect(toasterInstance.has(toastProps.name)).toBe(false);
});
it('should return false when toast is removed by timer', () => {
- const providerAPI = setup();
+ setup();
act(() => {
- providerAPI.add({
+ toasterInstance.add({
...toastProps,
autoHiding: toastTimeout,
});
});
- expect(providerAPI.has(toastProps.name)).toBe(true);
+ expect(toasterInstance.has(toastProps.name)).toBe(true);
act(() => {
jest.advanceTimersByTime(toastTimeout);
});
- expect(providerAPI.has(toastProps.name)).toBe(false);
+ expect(toasterInstance.has(toastProps.name)).toBe(false);
});
});
@@ -322,16 +304,10 @@ describe('modal remains open after toaster close', () => {
};
function setup() {
- let providerAPI: undefined | ToasterPublicMethods;
let openModal: undefined | (() => void);
render(
-
- {
- providerAPI = api;
- }}
- />
+
{
openModal = _openModal;
@@ -341,15 +317,15 @@ describe('modal remains open after toaster close', () => {
,
);
- if (!providerAPI || !openModal) {
+ if (!toasterInstance || !openModal) {
throw new Error('Failed to setup test');
}
- return {providerAPI, openModal};
+ return {openModal};
}
it('Toaster was opened after Modal', async () => {
- const {providerAPI, openModal} = setup();
+ const {openModal} = setup();
act(openModal);
@@ -357,7 +333,7 @@ describe('modal remains open after toaster close', () => {
expect(modal).toBeInTheDocument();
act(() => {
- providerAPI.add({...toastProps, isClosable: true});
+ toasterInstance.add({...toastProps, isClosable: true});
});
const toast = getToast();
@@ -380,10 +356,10 @@ describe('modal remains open after toaster close', () => {
});
it('Toaster was opened before Modal', async () => {
- const {providerAPI, openModal} = setup();
+ const {openModal} = setup();
act(() => {
- providerAPI.add({...toastProps, isClosable: true});
+ toasterInstance.add({...toastProps, isClosable: true});
});
const toast = getToast();
@@ -411,12 +387,12 @@ describe('modal remains open after toaster close', () => {
});
it('Toaster calls onClose callback when close icon is clicked', async () => {
- const {providerAPI} = setup();
+ setup();
const mockOnCloseFn = jest.fn();
act(() => {
- providerAPI.add({...toastProps, isClosable: true, onClose: mockOnCloseFn});
+ toasterInstance.add({...toastProps, isClosable: true, onClose: mockOnCloseFn});
});
const toast = getToast();
diff --git a/src/components/Toaster/hooks/useToaster.ts b/src/components/Toaster/hooks/useToaster.ts
index 4d069aaa79..527a4ec101 100644
--- a/src/components/Toaster/hooks/useToaster.ts
+++ b/src/components/Toaster/hooks/useToaster.ts
@@ -10,5 +10,14 @@ export function useToaster(): ToasterPublicMethods {
throw new Error('Toaster: `useToaster` hook is used out of context');
}
- return React.useMemo(() => toaster, [toaster]);
+ return React.useMemo(
+ () => ({
+ add: toaster.add.bind(toaster),
+ remove: toaster.remove.bind(toaster),
+ removeAll: toaster.removeAll.bind(toaster),
+ update: toaster.update.bind(toaster),
+ has: toaster.has.bind(toaster),
+ }),
+ [toaster],
+ );
}
diff --git a/src/components/Toc/Toc.tsx b/src/components/Toc/Toc.tsx
index a29575dbe1..30e9b65dab 100644
--- a/src/components/Toc/Toc.tsx
+++ b/src/components/Toc/Toc.tsx
@@ -15,10 +15,11 @@ export interface TocProps extends QAProps {
items: TocItemType[];
value?: string;
onUpdate?: (value: string) => void;
+ onItemClick?: (event: React.MouseEvent) => void;
}
export const Toc = React.forwardRef(function Toc(props, ref) {
- const {value: activeValue, items, className, onUpdate, qa} = props;
+ const {value: activeValue, items, className, onUpdate, onItemClick, qa} = props;
return (