Replace similar toasts

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to `livewire-toaster` will be documented in this file.
 
+## 2.5.0 - 2024-11-25
+
+### Added
+
+- Replacement of similar toasts
+
 ## 2.4.0 - 2024-11-24
 
 ### Added

README.md

@@ -391,6 +391,17 @@ This way, your users will have enough time to read toasts that are a tad larger
 So, if your base duration value is `3 seconds` and your toast contains 223 words, 
 the total on-screen duration of the toast will be `3 + 2 = 5 seconds`  
 
+### Replacing similar toasts
+
+> [!NOTE]
+> The `replace` configuration value must be set to `true`.
+
+> [!WARNING]
+> Takes precedence over `suppress`.
+
+Toaster will dispose of any toast that is similar to the one being dispatched prior to displaying the new toast.
+A toast is considered similar if it has the same `duration`, `message`, and `type`.
+
 ### Suppressing duplicate toasts
 
 > [!NOTE]

config/toaster.php

@@ -37,6 +37,14 @@
      */
     'position' => 'right',
 
+    /**
+     * New toasts immediately replace similar ones, ensuring only one toast of a kind is visible at any time.
+     * Takes precedence over the "suppress" option.
+     *
+     * Supported: true | false
+     */
+    'replace' => true,
+
     /**
      * Prevent the display of duplicate toast messages.
      *

resources/js/config.js

@@ -11,13 +11,14 @@ class Alignment {
 }
 
 export class Config {
-    constructor(alignment, duration, suppress) {
+    constructor(alignment, duration, replace, suppress) {
         this.alignment = new Alignment(alignment);
         this.duration = duration;
+        this.replace = replace;
         this.suppress = suppress;
     }
 
     static fromJson(data) {
-        return new Config(data.alignment, data.duration, data.suppress);
+        return new Config(data.alignment, data.duration, data.replace, data.suppress);
     }
 }

resources/js/hub.js

@@ -22,7 +22,9 @@ export function Hub(Alpine) {
                 document.addEventListener('toaster:received', event => {
                     const toast = Toast.fromJson({ duration: config.duration, ...event.detail });
 
-                    if (config.suppress && this.toasts.some(t => t.equals(toast))) {
+                    if (config.replace) {
+                        this.toasts.filter(t => t.equals(toast)).forEach(t => t.dispose());
+                    } else if (config.suppress && this.toasts.some(t => t.equals(toast))) {
                         return;
                     }
 

src/ToasterConfig.php

@@ -13,6 +13,7 @@ private function __construct(
         public string $position,
         public bool $wantsAccessibility,
         public bool $wantsCloseableToasts,
+        public bool $wantsReplacement,
         public bool $wantsSuppression,
         public bool $wantsTranslation,
     ) {}
@@ -24,6 +25,7 @@ private function __construct(
      *     position?: "center" | "left" | "right",
      *     accessibility?: bool,
      *     closeable?: bool,
+     *     replace?: bool,
      *     suppress?: bool,
      *     translate?: bool,
      * } $config
@@ -36,6 +38,7 @@ public static function fromArray(array $config): self
             Arr::get($config, 'position', 'right'),
             Arr::get($config, 'accessibility', true),
             Arr::get($config, 'closeable', true),
+            Arr::get($config, 'replace', false),
             Arr::get($config, 'suppress', false),
             Arr::get($config, 'translate', true),
         );
@@ -53,6 +56,11 @@ public function position(): Position
 
     public function toJavaScript(): array
     {
-        return ['alignment' => $this->alignment, 'duration' => $this->duration, 'suppress' => $this->wantsSuppression];
+        return [
+            'alignment' => $this->alignment,
+            'duration' => $this->duration,
+            'replace' => $this->wantsReplacement,
+            'suppress' => $this->wantsSuppression,
+        ];
     }
 }

tests/ToasterConfigTest.php

@@ -15,6 +15,11 @@ public function it_can_be_serialized_for_the_frontend(): void
 
         $array = $config->toJavaScript();
 
-        $this->assertSame(['alignment' => 'bottom', 'duration' => 3000, 'suppress' => false], $array);
+        $this->assertSame([
+            'alignment' => 'bottom',
+            'duration' => 3000,
+            'replace' => false,
+            'suppress' => false,
+        ], $array);
     }
 }