Merge branch '2.x' into 3.x

# By Hugo Alliaume (3) and seb-jean (1)
* 2.x:
  [Notify][Turbo] Add support for MercureBundle ^0.4.0 and Mercure ^0.7.0
  [Toolkit] Pin `tales-from-a-dev/twig-tailwind-extra` to `^1.0.0`
  [Toolkit][Shadcn] Minor tweaks on alert-dialog and dialog cmoponents
  [Toolkit][Shadcn] Add Dialog recipe

# Conflicts:
#	src/Notify/CHANGELOG.md
#	src/Notify/composer.json
#	src/Turbo/CHANGELOG.md
#	src/Turbo/composer.json
#	ux.symfony.com/importmap.php

Author: Kocal

biome.json

@@ -21,7 +21,8 @@
         "rules": {
             "suspicious": {
                 "noExplicitAny": "off",
-                "noEmptyBlockStatements": "off"
+                "noEmptyBlockStatements": "off",
+                "noPrototypeBuiltins": "off"
             },
             "complexity": {
                 "noStaticOnlyClass": "off",

src/Notify/CHANGELOG.md

@@ -6,6 +6,10 @@
 -   Minimum required PHP version is now 8.2
 -   Remove old compatibility layer with deprecated `StimulusTwigExtension` from WebpackEncoreBundle ^1.0, use StimulusBundle instead
 
+## 2.32
+
+-  Add support for MercureBundle ^0.4.1 and Mercure ^0.7.0
+
 ## 2.30
 
 -  Ensure compatibility with PHP 8.5

src/Notify/composer.json

@@ -32,7 +32,7 @@
         "symfony/config": "^6.4|^7.0|^8.0",
         "symfony/dependency-injection": "^6.4|^7.0|^8.0",
         "symfony/http-kernel": "^6.4|^7.0|^8.0",
-        "symfony/mercure-bundle": "^0.3.4",
+        "symfony/mercure-bundle": "^0.3.4|^0.4.1",
         "symfony/mercure-notifier": "^6.4|^7.0|^8.0",
         "symfony/stimulus-bundle": "^2.9.1",
         "symfony/twig-bundle": "^6.4|^7.0|^8.0"

src/Toolkit/composer.json

@@ -50,7 +50,7 @@
         "vincentlanglet/twig-cs-fixer": "^3.9",
         "spatie/phpunit-snapshot-assertions": "^5.2.3",
         "symfony/ux-icons": "^2.18",
-        "tales-from-a-dev/twig-tailwind-extra": "^0.4.0"
+        "tales-from-a-dev/twig-tailwind-extra": "^1.0.0"
     },
     "bin": [
         "bin/ux-toolkit-kit-create",

src/Toolkit/kits/shadcn/alert-dialog/EXAMPLES.md

@@ -22,26 +22,3 @@
     </twig:AlertDialog:Content>
 </twig:AlertDialog>
 ```
-
-## Opened by default
-
-```twig {"preview":true,"height":"500px"}
-<twig:AlertDialog id="delete_account" open>
-    <twig:AlertDialog:Trigger>
-        <twig:Button {{ ...trigger_attrs }}>Open</twig:Button>
-    </twig:AlertDialog:Trigger>
-    <twig:AlertDialog:Content>
-        <twig:AlertDialog:Header>
-            <twig:AlertDialog:Title>Are you absolutely sure?</twig:AlertDialog:Title>
-            <twig:AlertDialog:Description>
-                This action cannot be undone. This will permanently delete your account
-                and remove your data from our servers.
-            </twig:AlertDialog:Description>
-        </twig:AlertDialog:Header>
-        <twig:AlertDialog:Footer>
-            <twig:AlertDialog:Cancel>Cancel</twig:AlertDialog:Cancel>
-            <twig:AlertDialog:Action>Continue</twig:AlertDialog:Action>
-        </twig:AlertDialog:Footer>
-    </twig:AlertDialog:Content>
-</twig:AlertDialog>
-```

src/Toolkit/kits/shadcn/alert-dialog/assets/controllers/alert_dialog_controller.js

@@ -1,27 +1,34 @@
 import { Controller } from '@hotwired/stimulus';
-import { enter, leave } from 'el-transition';
 
 export default class extends Controller {
 
-    static targets = ['trigger', 'overlay', 'dialog', 'content'];
+    static targets = ['trigger', 'dialog'];
 
     async open() {
         this.dialogTarget.showModal();
 
-        await Promise.all([enter(this.overlayTarget), enter(this.contentTarget)]);
-
         if (this.hasTriggerTarget) {
-            this.triggerTarget.setAttribute('aria-expanded', 'true');
+            if (this.dialogTarget.getAnimations().length > 0) {
+                this.dialogTarget.addEventListener('transitionend', () => {
+                    this.triggerTarget.setAttribute('aria-expanded', 'true');
+                })
+            } else {
+                this.triggerTarget.setAttribute('aria-expanded', 'true');
+            }
         }
     }
 
     async close() {
-        await Promise.all([leave(this.overlayTarget), leave(this.contentTarget)]);
-
         this.dialogTarget.close();
 
         if (this.hasTriggerTarget) {
-            this.triggerTarget.setAttribute('aria-expanded', 'false');
+            if (this.dialogTarget.getAnimations().length > 0) {
+                this.dialogTarget.addEventListener('transitionend', () => {
+                    this.triggerTarget.setAttribute('aria-expanded', 'false');
+                })
+            } else {
+                this.triggerTarget.setAttribute('aria-expanded', 'false');
+            }
         }
     }
 }

src/Toolkit/kits/shadcn/alert-dialog/manifest.json

@@ -9,8 +9,6 @@
     },
     "dependencies": {
         "recipe": ["button"],
-        "composer": ["twig/extra-bundle", "twig/html-extra:^3.12.0", "tales-from-a-dev/twig-tailwind-extra"],
-        "npm": ["el-transition"],
-        "importmap": ["el-transition"]
+        "composer": ["twig/extra-bundle", "twig/html-extra:^3.12.0", "tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
     }
 }

src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog.html.twig

@@ -1,8 +1,7 @@
-{# @prop open boolean Open (or not) the AlertDialog at initial rendering, default to `false` #}
+{# @prop id string Unique suffix identifier for generating AlertDialog internal IDs #}
 {# @block content The default block #}
-{%- props open = false, id -%}
+{%- props id -%}
 
-{%- set _alert_dialog_open = open %}
 {%- set _alert_dialog_id = 'alert-dialog-' ~ id -%}
 {%- set _alert_dialog_title_id = _alert_dialog_id ~ '-title' -%}
 {%- set _alert_dialog_description_id = _alert_dialog_id ~ '-description' -%}

src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Content.html.twig

@@ -1,38 +1,10 @@
 {# @block content The default block #}
 <dialog
     id="{{ _alert_dialog_id }}"
-    {{ _alert_dialog_open ? 'open' }}
-    class="{{ 'fixed inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent ' ~ attributes.render('class')|tailwind_merge }}"
+    class="{{ 'bg-background fixed top-[50%] left-[50%] z-50 max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] scale-95 gap-4 rounded-lg border p-6 opacity-0 shadow-lg transition-all transition-discrete duration-200 backdrop:transition-discrete backdrop:duration-150 open:grid open:scale-100 open:opacity-100 open:backdrop:bg-black/50 sm:max-w-lg starting:open:scale-95 starting:open:opacity-0 ' ~ attributes.render('class')|tailwind_merge }}"
     data-alert-dialog-target="dialog"
     data-action="keydown.esc->alert-dialog#close:prevent"
     {{ attributes.without('id') }}
 >
-    <div
-        data-alert-dialog-target="overlay"
-        data-transition-enter="transition ease-out duration-100"
-        data-transition-enter-start="transform opacity-0"
-        data-transition-enter-end="transform opacity-100"
-        data-transition-leave="transition ease-in duration-75"
-        data-transition-leave-start="transform opacity-100"
-        data-transition-leave-end="transform opacity-0"
-        class="{{ _alert_dialog_open ? '' : 'hidden' }} fixed inset-0 z-50 bg-black/50"
-    ></div>
-
-    <section
-        tabindex="0"
-        class="flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0"
-    >
-        <div
-            data-transition-enter="transition ease-out duration-200"
-            data-transition-enter-start="transform opacity-0 scale-95"
-            data-transition-enter-end="transform opacity-100 scale-100"
-            data-transition-leave="transition ease-in duration-75"
-            data-transition-leave-start="transform opacity-100 scale-100"
-            data-transition-leave-end="transform opacity-0 scale-95"
-            class="{{ _alert_dialog_open ? '' : 'hidden' }} bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg"
-            data-alert-dialog-target="content"
-        >
-            {%- block content %}{% endblock -%}
-        </div>
-    </section>
+    {%- block content %}{% endblock -%}
 </dialog>

src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Trigger.html.twig

@@ -3,6 +3,6 @@
     'data-action': 'click->alert-dialog#open',
     'data-alert-dialog-target': 'trigger',
     'aria-haspopup': 'dialog',
-    'aria-expanded': _alert_dialog_open ? 'true' : 'false',
+    'aria-expanded': 'false',
 } -%}
 {%- block content %}{% endblock -%}