Add onCloseButton to snackbar component

Author: Kubit

src/components/snackbar/snackbarStandAlone.tsx

@@ -97,6 +97,7 @@ const SnackbarStandAloneComponent = (
       variant={props.styles?.popoverVariants?.[align]}
     >
       <SnackbarStyled
+        data-testid={props.dataTestId}
         ref={ref}
         styles={props.styles}
         onBlur={props.onBlur}

src/components/snackbar/snackbarUnControlled.tsx

@@ -60,6 +60,10 @@ const SnackbarUnControlledComponent = <V extends string | unknown>(
   const handleCloseButton: (_open: boolean) => React.MouseEventHandler<HTMLButtonElement> =
     _open => event => {
       props.onOpenClose?.(_open, event);
+      if (props.onCloseButton) {
+        props.onCloseButton(event);
+        return;
+      }
       // After manually closing the popover, focus the last focused element
       // If the last focused element is not available, focus the first focusable element
       if (

src/components/snackbar/stories/argtypes.ts

@@ -168,6 +168,15 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         category: CATEGORY_CONTROL.FUNCTIONS,
       },
     },
+    onCloseButton: {
+      description: 'Funtion to handle the entire close button function If it is needed',
+      type: { name: 'function', required: true },
+      control: false,
+      table: {
+        type: { summary: 'React.MouseEventHandler<HTMLButtonElement>' },
+        category: CATEGORY_CONTROL.FUNCTIONS,
+      },
+    },
     onOpenClose: {
       description: 'Callback to be be called when the snackbar is opened or closed',
       type: { name: 'function' },

src/components/snackbar/stories/snackbar.stories.tsx

@@ -39,6 +39,42 @@ const StoryWithHooks = args => {
         called when snackbar should close, either because the close icon has been clicked, or
         because the "closeTimeout" time for displaying the snackbar has expired.
       </p>
+      <p style={{ marginTop: '10px' }}>
+        <strong>Note: </strong>Snackbar does not have an internal state. In order to open or close
+        it, &quot;isOpen&quot; prop must be used. Moreover &quot;onHandleOpen&quot; function will be
+        called when snackbar should close, either because the close icon has been clicked, or
+        because the &quot;closeTimeout&quot; time for displaying the snackbar has expired.
+      </p>
+      <p style={{ marginTop: '10px' }}>
+        <strong>Note: </strong>Snackbar does not have an internal state. In order to open or close
+        it, &quot;isOpen&quot; prop must be used. Moreover &quot;onHandleOpen&quot; function will be
+        called when snackbar should close, either because the close icon has been clicked, or
+        because the &quot;closeTimeout&quot; time for displaying the snackbar has expired.
+      </p>
+      <p style={{ marginTop: '10px' }}>
+        <strong>Note: </strong>Snackbar does not have an internal state. In order to open or close
+        it, &quot;isOpen&quot; prop must be used. Moreover &quot;onHandleOpen&quot; function will be
+        called when snackbar should close, either because the close icon has been clicked, or
+        because the &quot;closeTimeout&quot; time for displaying the snackbar has expired.
+      </p>
+      <p style={{ marginTop: '10px' }}>
+        <strong>Note: </strong>Snackbar does not have an internal state. In order to open or close
+        it, &quot;isOpen&quot; prop must be used. Moreover &quot;onHandleOpen&quot; function will be
+        called when snackbar should close, either because the close icon has been clicked, or
+        because the &quot;closeTimeout&quot; time for displaying the snackbar has expired.
+      </p>
+      <p style={{ marginTop: '10px' }}>
+        <strong>Note: </strong>Snackbar does not have an internal state. In order to open or close
+        it, &quot;isOpen&quot; prop must be used. Moreover &quot;onHandleOpen&quot; function will be
+        called when snackbar should close, either because the close icon has been clicked, or
+        because the &quot;closeTimeout&quot; time for displaying the snackbar has expired.
+      </p>
+      <p style={{ marginTop: '10px' }}>
+        <strong>Note: </strong>Snackbar does not have an internal state. In order to open or close
+        it, &quot;isOpen&quot; prop must be used. Moreover &quot;onHandleOpen&quot; function will be
+        called when snackbar should close, either because the close icon has been clicked, or
+        because the &quot;closeTimeout&quot; time for displaying the snackbar has expired.
+      </p>
     </>
   );
 };
@@ -58,6 +94,7 @@ export const Snackbar: Story = {
     description: { content: 'This is the description' },
     closeIcon: { icon: ICONS.ICON_PLACEHOLDER },
     secondaryActionContent: 'Link',
+    dataTestId: 'Snackbar',
     themeArgs: themesObject[themeSelected][STYLES_NAME.SNACKBAR],
   },
   parameters: {

src/components/snackbar/types/snackbar.ts

@@ -59,6 +59,7 @@ export interface ISnackbarControlled<V = undefined extends string ? unknown : st
 export interface ISnackbarUnControlled<V = undefined extends string ? unknown : string>
   extends Omit<ISnackbarControlled<V>, 'onCloseButtonClick'> {
   closeTimeout?: number;
+  onCloseButton?: React.MouseEventHandler<HTMLButtonElement>;
   onOpenClose?: (open: boolean, event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }