feat: add closeButton property to toast options (#17)

* feat: add closeButton property to toast options

* tests: add closeButton tests

libs/ngx-sonner/src/lib/toast.component.ts

@@ -79,7 +79,7 @@ const defaultClasses: ToastClassnames = {
       (pointerdown)="onPointerDown($event)"
       (pointerup)="onPointerUp()"
       (pointermove)="onPointerMove($event)">
-      @if (toast().dismissible && closeButton() && !toast().component) {
+      @if (closeButton() && !toast().component) {
         <button
           aria-label="Close toast"
           [attr.data-disabled]="disabled()"
@@ -219,7 +219,9 @@ export class ToastComponent implements AfterViewInit, OnDestroy {
   position = input.required<ToastProps['position']>();
   visibleToasts = input.required<ToastProps['visibleToasts']>();
   expandByDefault = input.required<ToastProps['expandByDefault']>();
-  closeButton = input.required<ToastProps['closeButton']>();
+  _closeButton = input.required<ToastProps['closeButton']>({
+    alias: 'closeButton',
+  });
   interacting = input.required<ToastProps['interacting']>();
   cancelButtonStyle = input<ToastProps['cancelButtonStyle']>();
   actionButtonStyle = input<ToastProps['actionButtonStyle']>();
@@ -268,6 +270,7 @@ export class ToastComponent implements AfterViewInit, OnDestroy {
     }, 0)
   );
   invert = computed(() => this.toast().invert ?? this._invert());
+  closeButton = computed(() => this.toast().closeButton ?? this._closeButton());
   disabled = computed(() => this.toastType() === 'loading');
 
   timeoutId: ReturnType<typeof setTimeout> | undefined;

libs/ngx-sonner/src/lib/types.ts

@@ -35,9 +35,9 @@ export type ToastT = {
   component?: Type<unknown>;
   componentProps?: Record<string, unknown>;
   invert?: boolean;
+  closeButton?: boolean;
+  dismissible?: boolean;
   description?: string | Type<unknown>;
-  cancelButtonStyle?: string;
-  actionButtonStyle?: string;
   duration?: number;
   delete?: boolean;
   important?: boolean;
@@ -51,16 +51,17 @@ export type ToastT = {
   };
   onDismiss?: (toast: ToastT) => void;
   onAutoClose?: (toast: ToastT) => void;
-  dismissible?: boolean;
   promise?: PromiseT;
+  cancelButtonStyle?: string;
+  actionButtonStyle?: string;
   style?: Record<string, unknown>;
+  unstyled?: boolean;
   class?: string;
   classes?: ToastClassnames;
   descriptionClass?: string;
   position?: Position;
-  unstyled?: boolean;
   /**
-   * @internal This is used to determine if the toast has been updated to determine when to reset timer. Hacky but works.
+   * @internal This is used to determine if the toast has been updated to determine when to reset timer.
    */
   updated?: boolean;
 };

libs/ngx-sonner/src/tests/toaster.spec.ts

@@ -263,14 +263,25 @@ describe('Toaster', () => {
     expect(closeButton).not.toBeNull();
   });
 
-  it('should not show close button if the toast is not dismissible', async () => {
+  it('should not show close button if the toast has closeButton false', async () => {
     const { user, trigger, container } = await setup({
-      callback: toast => toast('Hello world', { dismissible: false }),
+      callback: toast => toast('Hello world', { closeButton: false }),
       closeButton: true,
     });
 
     await user.click(trigger);
     const closeButton = container.querySelector('[data-close-button]');
     expect(closeButton).toBeNull();
   });
+
+  it('should show close button if the toast has closeButton true', async () => {
+    const { user, trigger, container } = await setup({
+      callback: toast => toast('Hello world', { closeButton: true }),
+      closeButton: false,
+    });
+
+    await user.click(trigger);
+    const closeButton = container.querySelector('[data-close-button]');
+    expect(closeButton).not.toBeNull();
+  });
 });