@studiometa/ui 1.0.0-alpha.7 → 1.0.0-alpha.9

package/atoms/ScrollAnimation/ScrollAnimationWithEase.d.ts

@@ -1,4 +1,4 @@
-declare const ScrollAnimationWithEase_base: import("@studiometa/js-toolkit").BaseDecorator<import("./animationScrollWithEase.js").AnimationScrollWithEaseInterface, import("#private").AbstractScrollAnimation<import("@studiometa/js-toolkit").BaseProps>, import("./animationScrollWithEase.js").AnimationScrollWithEaseProps>;
+declare const ScrollAnimationWithEase_base: import("@studiometa/js-toolkit").BaseDecorator<import("./animationScrollWithEase.js").AnimationScrollWithEaseInterface, import("#private/index.js").AbstractScrollAnimation<import("@studiometa/js-toolkit").BaseProps>, import("./animationScrollWithEase.js").AnimationScrollWithEaseProps>;
 /**
  * ScrollAnimation class.
  */

package/decorators/withTransition.d.ts

@@ -9,6 +9,7 @@ export interface TransitionProps extends BaseProps {
         leaveActive: string;
         leaveTo: string;
         leaveKeep: boolean;
+        group: string;
     };
 }
 export interface TransitionInterface extends BaseInterface {

package/decorators/withTransition.js

@@ -1,3 +1,4 @@
+import { getInstances } from "@studiometa/js-toolkit";
 import { transition } from "@studiometa/js-toolkit/utils";
 function withTransition(BaseClass) {
   class Transition extends BaseClass {
@@ -14,7 +15,8 @@ function withTransition(BaseClass) {
         leaveFrom: String,
         leaveActive: String,
         leaveTo: String,
-        leaveKeep: Boolean
+        leaveKeep: Boolean,
+        group: String
       }
     };
     /**
@@ -26,34 +28,56 @@ function withTransition(BaseClass) {
     /**
      * Trigger the enter transition.
      */
-    async enter(target) {
+    async enter(target, { dispatch = true } = {}) {
       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,
-          to: enterTo
-        },
-        enterKeep ? "keep" : void 0
-      );
+      await Promise.all([
+        transition(
+          target ?? this.target,
+          {
+            // eslint-disable-next-line prefer-template
+            from: (leaveTo + " " + enterFrom).trim(),
+            active: enterActive,
+            to: enterTo
+          },
+          enterKeep ? "keep" : void 0
+        ),
+        dispatch && this.dispatch("enter")
+      ]);
     }
     /**
      * Trigger the leave transition.
      */
-    async leave(target) {
+    async leave(target, { dispatch = true } = {}) {
       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,
-          to: leaveTo
-        },
-        leaveKeep ? "keep" : void 0
-      );
+      await Promise.all([
+        transition(
+          target ?? this.target,
+          {
+            // eslint-disable-next-line prefer-template
+            from: (enterTo + " " + leaveFrom).trim(),
+            active: leaveActive,
+            to: leaveTo
+          },
+          leaveKeep ? "keep" : void 0
+        ),
+        dispatch && this.dispatch("leave")
+      ]);
+    }
+    /**
+     * Dispatch the callback to related instances.
+     */
+    async dispatch(method) {
+      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](void 0, { dispatch: false }));
+        }
+      }
+      await Promise.all(promises);
     }
   }
   return Transition;

package/decorators/withTransition.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/decorators/withTransition.ts"],
-  "sourcesContent": ["import { transition } from '@studiometa/js-toolkit/utils';\nimport type {\n  Base,\n  BaseDecorator,\n  BaseProps,\n  BaseConfig,\n  BaseInterface,\n} from '@studiometa/js-toolkit';\n\nexport interface TransitionProps extends BaseProps {\n  $options: {\n    enterFrom: string;\n    enterActive: string;\n    enterTo: string;\n    enterKeep: boolean;\n    leaveFrom: string;\n    leaveActive: string;\n    leaveTo: string;\n    leaveKeep: boolean;\n  };\n}\n\nexport interface TransitionInterface extends BaseInterface {\n  /**\n   * Get the transition target.\n   */\n  get target(): HTMLElement | HTMLElement[];\n  /**\n   * Trigger the enter transition.\n   */\n  enter(target?: HTMLElement | HTMLElement[]): Promise<void>;\n  /**\n   * Trigger the leave transition.\n   */\n  leave(target?: HTMLElement | HTMLElement[]): Promise<void>;\n}\n\n/**\n * Extend a class to add transition capabilities.\n */\nexport function withTransition<S extends Base>(\n  BaseClass: typeof Base,\n): BaseDecorator<TransitionInterface, S, TransitionProps> {\n  /**\n   * Class.\n   */\n  class Transition<T extends BaseProps = BaseProps> extends BaseClass<T & TransitionProps> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      name: 'Transition',\n      options: {\n        enterFrom: String,\n        enterActive: String,\n        enterTo: String,\n        enterKeep: Boolean,\n        leaveFrom: String,\n        leaveActive: String,\n        leaveTo: String,\n        leaveKeep: Boolean,\n      },\n    };\n\n    /**\n     * Get the transition target.\n     */\n    get target(): HTMLElement | HTMLElement[] {\n      return this.$el;\n    }\n\n    /**\n     * Trigger the enter transition.\n     */\n    async enter(target?: HTMLElement | HTMLElement[]): Promise<void> {\n      const { enterFrom, enterActive, enterTo, enterKeep, leaveTo } = this.$options;\n\n      await transition(\n        target ?? this.target,\n        {\n          // eslint-disable-next-line prefer-template\n          from: (leaveTo + ' ' + enterFrom).trim(),\n          active: enterActive as string,\n          to: enterTo as string,\n        },\n        enterKeep ? 'keep' : undefined,\n      );\n    }\n\n    /**\n     * Trigger the leave transition.\n     */\n    async leave(target?: HTMLElement | HTMLElement[]): Promise<void> {\n      const { leaveFrom, leaveActive, leaveTo, leaveKeep, enterTo } = this.$options;\n\n      await transition(\n        target ?? this.target,\n        {\n          // eslint-disable-next-line prefer-template\n          from: (enterTo + ' ' + leaveFrom).trim(),\n          active: leaveActive as string,\n          to: leaveTo as string,\n        },\n        leaveKeep ? 'keep' : undefined,\n      );\n    }\n  }\n\n  // @ts-ignore\n  return Transition;\n}\n"],
-  "mappings": "AAAA,SAAS,kBAAkB;AAwCpB,SAAS,eACd,WACwD;AAAA,EAIxD,MAAM,mBAAoD,UAA+B;AAAA;AAAA;AAAA;AAAA,IAIvF,OAAO,SAAqB;AAAA,MAC1B,MAAM;AAAA,MACN,SAAS;AAAA,QACP,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,QACT,WAAW;AAAA,MACb;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKA,IAAI,SAAsC;AACxC,aAAO,KAAK;AAAA,IACd;AAAA;AAAA;AAAA;AAAA,IAKA,MAAM,MAAM,QAAqD;AAC/D,YAAM,EAAE,WAAW,aAAa,SAAS,WAAW,QAAQ,IAAI,KAAK;AAErE,YAAM;AAAA,QACJ,UAAU,KAAK;AAAA,QACf;AAAA;AAAA,UAEE,OAAO,UAAU,MAAM,WAAW,KAAK;AAAA,UACvC,QAAQ;AAAA,UACR,IAAI;AAAA,QACN;AAAA,QACA,YAAY,SAAS;AAAA,MACvB;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKA,MAAM,MAAM,QAAqD;AAC/D,YAAM,EAAE,WAAW,aAAa,SAAS,WAAW,QAAQ,IAAI,KAAK;AAErE,YAAM;AAAA,QACJ,UAAU,KAAK;AAAA,QACf;AAAA;AAAA,UAEE,OAAO,UAAU,MAAM,WAAW,KAAK;AAAA,UACvC,QAAQ;AAAA,UACR,IAAI;AAAA,QACN;AAAA,QACA,YAAY,SAAS;AAAA,MACvB;AAAA,IACF;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import { getInstances } from '@studiometa/js-toolkit';\nimport { transition } from '@studiometa/js-toolkit/utils';\nimport type {\n  Base,\n  BaseDecorator,\n  BaseProps,\n  BaseConfig,\n  BaseInterface,\n} from '@studiometa/js-toolkit';\n\nexport interface TransitionProps extends BaseProps {\n  $options: {\n    enterFrom: string;\n    enterActive: string;\n    enterTo: string;\n    enterKeep: boolean;\n    leaveFrom: string;\n    leaveActive: string;\n    leaveTo: string;\n    leaveKeep: boolean;\n    group: string;\n  };\n}\n\nexport interface TransitionInterface extends BaseInterface {\n  /**\n   * Get the transition target.\n   */\n  get target(): HTMLElement | HTMLElement[];\n  /**\n   * Trigger the enter transition.\n   */\n  enter(target?: HTMLElement | HTMLElement[]): Promise<void>;\n  /**\n   * Trigger the leave transition.\n   */\n  leave(target?: HTMLElement | HTMLElement[]): Promise<void>;\n}\n\n/**\n * Extend a class to add transition capabilities.\n */\nexport function withTransition<S extends Base>(\n  BaseClass: typeof Base,\n): BaseDecorator<TransitionInterface, S, TransitionProps> {\n  /**\n   * Class.\n   */\n  class Transition<T extends BaseProps = BaseProps> extends BaseClass<T & TransitionProps> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      name: 'Transition',\n      options: {\n        enterFrom: String,\n        enterActive: String,\n        enterTo: String,\n        enterKeep: Boolean,\n        leaveFrom: String,\n        leaveActive: String,\n        leaveTo: String,\n        leaveKeep: Boolean,\n        group: String,\n      },\n    };\n\n    /**\n     * Get the transition target.\n     */\n    get target(): HTMLElement | HTMLElement[] {\n      return this.$el;\n    }\n\n    /**\n     * Trigger the enter transition.\n     */\n    async enter(target?: HTMLElement | HTMLElement[], { dispatch = true } = {}): Promise<void> {\n      const { enterFrom, enterActive, enterTo, enterKeep, leaveTo } = this.$options;\n\n      await Promise.all([\n        transition(\n          target ?? this.target,\n          {\n            // eslint-disable-next-line prefer-template\n            from: (leaveTo + ' ' + enterFrom).trim(),\n            active: enterActive as string,\n            to: enterTo as string,\n          },\n          enterKeep ? 'keep' : undefined,\n        ),\n        dispatch && this.dispatch('enter'),\n      ]);\n    }\n\n    /**\n     * Trigger the leave transition.\n     */\n    async leave(target?: HTMLElement | HTMLElement[], { dispatch = true } = {}): Promise<void> {\n      const { leaveFrom, leaveActive, leaveTo, leaveKeep, enterTo } = this.$options;\n\n      await Promise.all([\n        transition(\n          target ?? this.target,\n          {\n            // eslint-disable-next-line prefer-template\n            from: (enterTo + ' ' + leaveFrom).trim(),\n            active: leaveActive as string,\n            to: leaveTo as string,\n          },\n          leaveKeep ? 'keep' : undefined,\n        ),\n        dispatch && this.dispatch('leave'),\n      ]);\n    }\n\n    /**\n     * Dispatch the callback to related instances.\n     */\n    async dispatch(method: 'enter' | 'leave') {\n      const { group } = this.$options;\n\n      if (!group) {\n        return;\n      }\n\n      const promises = [];\n\n      for (const instance of getInstances(Transition)) {\n        if (instance !== this && instance.$options.group === group) {\n          promises.push(instance[method](undefined, { dispatch: false }));\n        }\n      }\n\n      await Promise.all(promises);\n    }\n  }\n\n  // @ts-ignore\n  return Transition;\n}\n"],
+  "mappings": "AAAA,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAyCpB,SAAS,eACd,WACwD;AAAA,EAIxD,MAAM,mBAAoD,UAA+B;AAAA;AAAA;AAAA;AAAA,IAIvF,OAAO,SAAqB;AAAA,MAC1B,MAAM;AAAA,MACN,SAAS;AAAA,QACP,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,QACT,WAAW;AAAA,QACX,OAAO;AAAA,MACT;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKA,IAAI,SAAsC;AACxC,aAAO,KAAK;AAAA,IACd;AAAA;AAAA;AAAA;AAAA,IAKA,MAAM,MAAM,QAAsC,EAAE,WAAW,KAAK,IAAI,CAAC,GAAkB;AACzF,YAAM,EAAE,WAAW,aAAa,SAAS,WAAW,QAAQ,IAAI,KAAK;AAErE,YAAM,QAAQ,IAAI;AAAA,QAChB;AAAA,UACE,UAAU,KAAK;AAAA,UACf;AAAA;AAAA,YAEE,OAAO,UAAU,MAAM,WAAW,KAAK;AAAA,YACvC,QAAQ;AAAA,YACR,IAAI;AAAA,UACN;AAAA,UACA,YAAY,SAAS;AAAA,QACvB;AAAA,QACA,YAAY,KAAK,SAAS,OAAO;AAAA,MACnC,CAAC;AAAA,IACH;AAAA;AAAA;AAAA;AAAA,IAKA,MAAM,MAAM,QAAsC,EAAE,WAAW,KAAK,IAAI,CAAC,GAAkB;AACzF,YAAM,EAAE,WAAW,aAAa,SAAS,WAAW,QAAQ,IAAI,KAAK;AAErE,YAAM,QAAQ,IAAI;AAAA,QAChB;AAAA,UACE,UAAU,KAAK;AAAA,UACf;AAAA;AAAA,YAEE,OAAO,UAAU,MAAM,WAAW,KAAK;AAAA,YACvC,QAAQ;AAAA,YACR,IAAI;AAAA,UACN;AAAA,UACA,YAAY,SAAS;AAAA,QACvB;AAAA,QACA,YAAY,KAAK,SAAS,OAAO;AAAA,MACnC,CAAC;AAAA,IACH;AAAA;AAAA;AAAA;AAAA,IAKA,MAAM,SAAS,QAA2B;AACxC,YAAM,EAAE,MAAM,IAAI,KAAK;AAEvB,UAAI,CAAC,OAAO;AACV;AAAA,MACF;AAEA,YAAM,WAAW,CAAC;AAElB,iBAAW,YAAY,aAAa,UAAU,GAAG;AAC/C,YAAI,aAAa,QAAQ,SAAS,SAAS,UAAU,OAAO;AAC1D,mBAAS,KAAK,SAAS,MAAM,EAAE,QAAW,EAAE,UAAU,MAAM,CAAC,CAAC;AAAA,QAChE;AAAA,MACF;AAEA,YAAM,QAAQ,IAAI,QAAQ;AAAA,IAC5B;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/molecules/AnchorNav/AnchorNavLink.d.ts

@@ -5,7 +5,7 @@ export interface AnchorNavLinkProps extends AnchorScrollToProps {
         id: string;
     };
 }
-declare const AnchorNavLink_base: import("@studiometa/js-toolkit").BaseDecorator<import("#private").TransitionInterface, import("@studiometa/js-toolkit").Base<import("@studiometa/js-toolkit").BaseProps>, import("#private").TransitionProps>;
+declare const AnchorNavLink_base: import("@studiometa/js-toolkit").BaseDecorator<import("#private/decorators/withTransition.js").TransitionInterface, import("@studiometa/js-toolkit").Base<import("@studiometa/js-toolkit").BaseProps>, import("#private/decorators/withTransition.js").TransitionProps>;
 /**
  * Manage a slider item and its state transition.
  */

package/molecules/Menu/MenuList.d.ts

@@ -24,7 +24,7 @@ export declare class MenuList<T extends BaseProps = BaseProps> extends Transitio
     /**
      * Override `Transition` options.
      */
-    get $options(): import("@studiometa/js-toolkit/Base/managers/OptionsManager.js").OptionsManager & import("@studiometa/js-toolkit").BaseOptions & (T & MenuListProps & import("#private").TransitionProps)["$options"];
+    get $options(): import("@studiometa/js-toolkit/Base/managers/OptionsManager.js").OptionsManager & import("@studiometa/js-toolkit").BaseOptions & (T & MenuListProps & import("#private/index.js").TransitionProps)["$options"];
     /**
      * Update tab indexes on mount.
      */

package/molecules/Slider/SliderDots.d.ts

@@ -5,7 +5,7 @@ export interface SliderDotsProps extends BaseProps {
         dots: HTMLButtonElement[];
     };
 }
-declare const SliderDots_base: import("@studiometa/js-toolkit").BaseDecorator<import("#private").TransitionInterface, AbstractSliderChild<BaseProps>, import("#private").TransitionProps>;
+declare const SliderDots_base: import("@studiometa/js-toolkit").BaseDecorator<import("#private/decorators/withTransition.js").TransitionInterface, AbstractSliderChild<BaseProps>, import("#private/decorators/withTransition.js").TransitionProps>;
 /**
  * SliderDots class.
  */

package/organisms/Frame/FrameTarget.d.ts

@@ -25,7 +25,7 @@ export declare class FrameTarget<T extends BaseProps = BaseProps> extends Transi
     /**
      * Override options.
      */
-    get $options(): import("@studiometa/js-toolkit/Base/managers/OptionsManager.js").OptionsManager & import("@studiometa/js-toolkit").BaseOptions & (T & FrameTargetProps & import("#private").TransitionProps)["$options"];
+    get $options(): import("@studiometa/js-toolkit/Base/managers/OptionsManager.js").OptionsManager & import("@studiometa/js-toolkit").BaseOptions & (T & FrameTargetProps & import("#private/index.js").TransitionProps)["$options"];
     /**
      * Get uniq ID.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-alpha.9",
   "description": "A set of opiniated, unstyled and accessible components",
   "publishConfig": {
     "access": "public"

package/primitives/Transition/Transition.d.ts

@@ -1,6 +1,6 @@
 import { Base, BaseProps } from '@studiometa/js-toolkit';
 import type { BaseConfig } from '@studiometa/js-toolkit';
-declare const Transition_base: import("@studiometa/js-toolkit").BaseDecorator<import("#private").TransitionInterface, Base<BaseProps>, import("#private").TransitionProps>;
+declare const Transition_base: import("@studiometa/js-toolkit").BaseDecorator<import("#private/decorators/withTransition.js").TransitionInterface, Base<BaseProps>, import("#private/decorators/withTransition.js").TransitionProps>;
 /**
  * Transition class.
  */