feat(Toast): add onClick prop to Toast.Toggle (#607) (#666)

Fixes #607

Co-authored-by: Ricardo Lüders <[email protected]>

Author: JackRobards

src/lib/components/Toast/Toast.spec.tsx

@@ -1,22 +1,26 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import { Toast } from './Toast';
 
 describe.concurrent('Components / Toast', () => {
   describe.concurrent('Keyboard interactions', () => {
     it('should close `Toast` when `Space` is pressed on `Toast.Toggle`', async () => {
       const user = userEvent.setup();
+      const handleClick = vi.fn();
+
       render(
         <Toast>
-          <Toast.Toggle />
+          <Toast.Toggle onClick={handleClick} />
         </Toast>,
       );
 
       await user.tab();
       await user.keyboard('[Space]');
 
       expect(toast().className).toContain('opacity-0');
+
+      expect(handleClick).toHaveBeenCalled();
     });
   });
 });

src/lib/components/Toast/ToastToggle.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import type { ComponentProps, FC } from 'react';
+import type { ComponentProps, FC, MouseEvent } from 'react';
 import { HiX } from 'react-icons/hi';
 import type { DeepPartial } from '..';
 import { mergeDeep } from '../../helpers/mergeDeep';
@@ -18,14 +18,16 @@ export interface ToastToggleProps extends ComponentProps<'button'> {
 
 export const ToastToggle: FC<ToastToggleProps> = ({
   className,
+  onClick,
   theme: customTheme = {},
   xIcon: XIcon = HiX,
   ...props
 }) => {
   const theme = mergeDeep(useTheme().theme.toast.toggle, customTheme);
   const { duration, isClosed, isRemoved, setIsClosed, setIsRemoved } = useToastContext();
 
-  const handleClick = () => {
+  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+    if (onClick) onClick(e);
     setIsClosed(!isClosed);
     setTimeout(() => setIsRemoved(!isRemoved), duration);
   };