Add support for grouped transitions

packages/ui/decorators/withTransition.ts

@@ -1,3 +1,4 @@
+import { getInstances } from '@studiometa/js-toolkit';
 import { transition } from '@studiometa/js-toolkit/utils';
 import type {
   Base,
@@ -17,6 +18,7 @@ export interface TransitionProps extends BaseProps {
     leaveActive: string;
     leaveTo: string;
     leaveKeep: boolean;
+    group: string;
   };
 }
 
@@ -59,6 +61,7 @@ export function withTransition<S extends Base>(
         leaveActive: String,
         leaveTo: String,
         leaveKeep: Boolean,
+        group: String,
       },
     };
 
@@ -72,37 +75,64 @@ export function withTransition<S extends Base>(
     /**
      * Trigger the enter transition.
      */
-    async enter(target?: HTMLElement | HTMLElement[]): Promise<void> {
+    async enter(target?: HTMLElement | HTMLElement[], { dispatch = true } = {}): Promise<void> {
       const { enterFrom, enterActive, enterTo, enterKeep, leaveTo } = this.$options;
 
-      await transition(
-        target ?? this.target,
-        {
-          // eslint-disable-next-line prefer-template
-          from: (leaveTo + ' ' + enterFrom).trim(),
-          active: enterActive as string,
-          to: enterTo as string,
-        },
-        enterKeep ? 'keep' : undefined,
-      );
+      await Promise.all([
+        transition(
+          target ?? this.target,
+          {
+            // eslint-disable-next-line prefer-template
+            from: (leaveTo + ' ' + enterFrom).trim(),
+            active: enterActive as string,
+            to: enterTo as string,
+          },
+          enterKeep ? 'keep' : undefined,
+        ),
+        dispatch && this.dispatch('enter'),
+      ]);
     }
 
     /**
      * Trigger the leave transition.
      */
-    async leave(target?: HTMLElement | HTMLElement[]): Promise<void> {
+    async leave(target?: HTMLElement | HTMLElement[], { dispatch = true } = {}): Promise<void> {
       const { leaveFrom, leaveActive, leaveTo, leaveKeep, enterTo } = this.$options;
 
-      await transition(
-        target ?? this.target,
-        {
-          // eslint-disable-next-line prefer-template
-          from: (enterTo + ' ' + leaveFrom).trim(),
-          active: leaveActive as string,
-          to: leaveTo as string,
-        },
-        leaveKeep ? 'keep' : undefined,
-      );
+      await Promise.all([
+        transition(
+          target ?? this.target,
+          {
+            // eslint-disable-next-line prefer-template
+            from: (enterTo + ' ' + leaveFrom).trim(),
+            active: leaveActive as string,
+            to: leaveTo as string,
+          },
+          leaveKeep ? 'keep' : undefined,
+        ),
+        dispatch && this.dispatch('leave'),
+      ]);
+    }
+
+    /**
+     * Dispatch the callback to related instances.
+     */
+    async dispatch(method: 'enter' | 'leave') {
+      const { group } = this.$options;
+
+      if (!group) {
+        return;
+      }
+
+      const promises = [];
+
+      for (const instance of getInstances(Transition)) {
+        if (instance !== this && instance.$options.group === group) {
+          promises.push(instance[method](undefined, { dispatch: false }));
+        }
+      }
+
+      await Promise.all(promises);
     }
   }