@studiometa/ui 0.2.13 → 0.2.15

package/molecules/Modal/Modal.cjs

@@ -21,16 +21,21 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 
-// packages/ui/molecules/Modal/Modal.js
+// packages/ui/molecules/Modal/Modal.ts
 var Modal_exports = {};
 __export(Modal_exports, {
-  default: () => Modal
+  Modal: () => Modal
 });
 module.exports = __toCommonJS(Modal_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_utils = require("@studiometa/js-toolkit/utils");
 var { trap, untrap, saveActiveElement } = (0, import_utils.focusTrap)();
 var Modal = class extends import_js_toolkit.Base {
+  isOpen = false;
+  __refsBackup;
+  __refModalPlaceholder;
+  __refModalParentBackup;
+  __refModalUnbindGetRefFilter;
   get onOpenClick() {
     return this.open;
   }
@@ -49,7 +54,7 @@ var Modal = class extends import_js_toolkit.Base {
       this.__refModalPlaceholder = document.createComment("");
       this.__refModalParentBackup = this.$refs.modal.parentElement || this.$el;
       this.__refModalParentBackup.insertBefore(this.__refModalPlaceholder, this.$refs.modal);
-      target.appendChild(this.$refs.modal);
+      target.append(this.$refs.modal);
     }
   }
   get $refs() {
@@ -95,11 +100,19 @@ var Modal = class extends import_js_toolkit.Base {
     this.isOpen = true;
     this.$emit("open");
     const refs = this.$refs;
-    return Promise.all(Object.entries(this.$options.styles).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => (0, import_utils.transition)(refs[refName], {
-      from: closed,
-      active,
-      to: open
-    }, "keep"))).then(() => {
+    return Promise.all(
+      Object.entries(this.$options.styles).map(
+        ([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => (0, import_utils.transition)(
+          refs[refName],
+          {
+            from: closed,
+            active,
+            to: open
+          },
+          "keep"
+        )
+      )
+    ).then(() => {
       if (this.$options.autofocus && this.$refs.modal.querySelector(this.$options.autofocus)) {
         saveActiveElement();
         const autofocusElement = this.$refs.modal.querySelector(this.$options.autofocus);
@@ -120,11 +133,19 @@ var Modal = class extends import_js_toolkit.Base {
     untrap();
     this.$emit("close");
     const refs = this.$refs;
-    return Promise.all(Object.entries(this.$options.styles).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => (0, import_utils.transition)(refs[refName], {
-      from: open,
-      active,
-      to: closed
-    }, "keep"))).then(() => Promise.resolve());
+    return Promise.all(
+      Object.entries(this.$options.styles).map(
+        ([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => (0, import_utils.transition)(
+          refs[refName],
+          {
+            from: open,
+            active,
+            to: closed
+          },
+          "keep"
+        )
+      )
+    ).then(() => Promise.resolve());
   }
 };
 __publicField(Modal, "config", {
@@ -153,3 +174,4 @@ __publicField(Modal, "config", {
   }
 });
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=Modal.cjs.map

package/molecules/Modal/Modal.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/Modal/Modal.ts"],
+  "sourcesContent": ["import { Base, KeyServiceProps } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { transition, focusTrap } from '@studiometa/js-toolkit/utils';\n\nconst { trap, untrap, saveActiveElement } = focusTrap();\n\ntype ModalStates = Partial<Record<'open'|'active'|'closed', string|Partial<CSSStyleDeclaration>>>\n// eslint-disable-next-line no-use-before-define\ntype ModalStylesOption = Partial<Record<keyof ModalProps['$refs'], ModalStates>>\n\nexport interface ModalProps extends BaseProps {\n  $refs: {\n    close: HTMLElement[];\n    container: HTMLElement;\n    content: HTMLElement;\n    modal: HTMLElement;\n    open: HTMLElement[];\n    overlay: HTMLElement;\n  };\n  $options: {\n    /**\n     * A selector where to move the modal to.\n     */\n    move: string;\n    /**\n     * A selector for the element to set the focus to when the modal opens.\n     */\n    autofocus: string;\n    /**\n     * Lock or allow scroll in the documentElement.\n     */\n    scrollLock: boolean;\n    /**\n     * The styles for the different state of the modal.\n     */\n    styles: ModalStylesOption;\n  }\n}\n\n/**\n * Modal class.\n */\nexport class Modal<T extends BaseProps = BaseProps> extends Base<T & ModalProps> {\n  /**\n   * Config.\n   */\n  static config:BaseConfig = {\n    name: 'Modal',\n    refs: ['close[]', 'container', 'content', 'modal', 'open[]', 'overlay'],\n    emits: ['open', 'close'],\n    options: {\n      move: String,\n      autofocus: { type: String, default: '[autofocus]' },\n      styles: {\n        type: Object,\n        default: ():ModalStylesOption => ({\n          modal: {\n            closed: {\n              opacity: '0',\n              pointerEvents: 'none',\n              visibility: 'hidden',\n            },\n          },\n        }),\n      },\n      scrollLock: {\n        type: Boolean,\n        default: true,\n      },\n    },\n  };\n\n  /**\n   * Wether the modal is open or not.\n   */\n  isOpen = false;\n\n  /**\n   * @private\n   */\n  __refsBackup:(T & ModalProps)['$refs'];\n\n  /**\n   * @private\n   */\n  __refModalPlaceholder: Comment;\n\n  /**\n   * @private\n   */\n  __refModalParentBackup: HTMLElement;\n\n  /**\n   * @private\n   */\n  __refModalUnbindGetRefFilter:() => void;\n\n  /**\n   * Open the modal on click on the `open` ref.\n   */\n  get onOpenClick() {\n    return this.open;\n  }\n\n  /**\n   * Close the modal on click on the `close` ref.\n   */\n  get onCloseClick() {\n    return this.close;\n  }\n\n  /**\n   * Close the modal on click on the `overlay` ref.\n   *\n   * @returns {Function} The component's `close` method.\n   */\n  get onOverlayClick() {\n    return this.close;\n  }\n\n  /**\n   * Initialize the component's behaviours.\n   */\n  mounted() {\n    this.isOpen = false;\n    this.close();\n\n    if (this.$options.move) {\n      const target = document.querySelector(this.$options.move) || document.body;\n\n      this.__refsBackup = this.$refs;\n      this.__refModalPlaceholder = document.createComment('');\n      this.__refModalParentBackup = this.$refs.modal.parentElement || this.$el;\n      this.__refModalParentBackup.insertBefore(this.__refModalPlaceholder, this.$refs.modal);\n\n      target.append(this.$refs.modal);\n    }\n  }\n\n  /**\n   * Add the moved refs to `this.$refs` when using the `move` options.\n   */\n  get $refs() {\n    const $refs = super.$refs;\n\n    if (this.$options.move && this.__refsBackup) {\n      Object.entries(this.__refsBackup).forEach(([key, ref]) => {\n        if (!$refs[key]) {\n          // @ts-ignore\n          $refs[key] = ref;\n        }\n      });\n    }\n\n    return $refs;\n  }\n\n  /**\n   * Unbind all events on destroy.\n   */\n  destroyed() {\n    this.close();\n\n    if (this.$options.move && this.__refModalParentBackup) {\n      this.__refModalParentBackup.insertBefore(this.$refs.modal, this.__refModalPlaceholder);\n      this.__refModalPlaceholder.remove();\n      delete this.__refModalPlaceholder;\n      delete this.__refModalParentBackup;\n    }\n\n    return this;\n  }\n\n  /**\n   * Close the modal on `ESC` and trap the tabulation.\n   */\n  keyed({ event, isUp, isDown, ESC }:KeyServiceProps) {\n    if (!this.isOpen) {\n      return;\n    }\n\n    if (isDown) {\n      trap(this.$refs.modal, event);\n    }\n\n    if (ESC && isUp) {\n      this.close();\n    }\n  }\n\n  /**\n   * Open the modal.\n   */\n  async open() {\n    if (this.isOpen) {\n      return Promise.resolve();\n    }\n\n    this.$refs.modal.setAttribute('aria-hidden', 'false');\n\n    if (this.$options.scrollLock) {\n      document.documentElement.style.overflow = 'hidden';\n    }\n\n    this.isOpen = true;\n    this.$emit('open');\n\n    /** @type {ModalRefs} */\n    const refs = this.$refs;\n\n    return Promise.all(\n      Object.entries(this.$options.styles).map(\n        ([refName, { open, active, closed } = { open: '', active: '', closed: '' }]) =>\n          transition(\n            refs[refName],\n            {\n              from: closed,\n              active,\n              to: open,\n            },\n            'keep',\n          ),\n      ),\n    ).then(() => {\n      if (this.$options.autofocus && this.$refs.modal.querySelector(this.$options.autofocus)) {\n        saveActiveElement();\n        const autofocusElement = this.$refs.modal.querySelector(this.$options.autofocus) as HTMLElement;\n        autofocusElement.focus();\n      }\n      return Promise.resolve();\n    });\n  }\n\n  /**\n   * Close the modal.\n   */\n  async close() {\n    if (!this.isOpen) {\n      return Promise.resolve();\n    }\n\n    this.$refs.modal.setAttribute('aria-hidden', 'true');\n\n    if (this.$options.scrollLock) {\n      document.documentElement.style.overflow = '';\n    }\n\n    this.isOpen = false;\n    untrap();\n    this.$emit('close');\n\n    const refs = this.$refs;\n\n    return Promise.all(\n      Object.entries(this.$options.styles).map(\n        ([refName, { open, active, closed } = { open: '', active: '', closed: '' }]) =>\n          transition(\n            refs[refName],\n            {\n              from: open,\n              active,\n              to: closed,\n            },\n            'keep',\n          ),\n      ),\n    ).then(() => Promise.resolve());\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/molecules/Modal/Modal.d.ts

@@ -1,171 +1,100 @@
-/**
- * @typedef {Object} ModalRefs
- * @property {HTMLElement} close[]
- * @property {HTMLElement} container
- * @property {HTMLElement} content
- * @property {HTMLElement} modal
- * @property {HTMLElement} open[]
- * @property {HTMLElement} overlay
- */
-/**
- * @typedef {Partial<Record<'open'|'active'|'closed', string|Partial<CSSStyleDeclaration>>>} ModalStates
- * @typedef {Partial<Record<keyof ModalRefs, ModalStates>>} ModalStylesOption
- */
-/**
- * @typedef {Object} ModalOptions
- * @property {String}            move       A selector where to move the modal to.
- * @property {String}            autofocus  A selector for the element to set the focus to when the modal opens.
- * @property {Boolean}           scrollLock Lock or allow scroll in the documentElement.
- * @property {ModalStylesOption} styles     The styles for the different state of the modal.
- */
-/**
- * @typedef {Object} ModalPrivateInterface
- * @property {ModalRefs} $refs
- * @property {ModalOptions} $options
- * @property {Boolean} isOpen
- * @property {Comment} refModalPlaceholder
- * @property {HTMLElement} refModalParentBackup
- * @property {Function} refModalUnbindGetRefFilter
- */
-/**
- * @typedef {Modal & ModalPrivateInterface} ModalInterface
- * @typedef {typeof Modal} ModalConstructor
- */
+import { Base, KeyServiceProps } from '@studiometa/js-toolkit';
+import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+declare type ModalStates = Partial<Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>>;
+declare type ModalStylesOption = Partial<Record<keyof ModalProps['$refs'], ModalStates>>;
+export interface ModalProps extends BaseProps {
+    $refs: {
+        close: HTMLElement[];
+        container: HTMLElement;
+        content: HTMLElement;
+        modal: HTMLElement;
+        open: HTMLElement[];
+        overlay: HTMLElement;
+    };
+    $options: {
+        /**
+         * A selector where to move the modal to.
+         */
+        move: string;
+        /**
+         * A selector for the element to set the focus to when the modal opens.
+         */
+        autofocus: string;
+        /**
+         * Lock or allow scroll in the documentElement.
+         */
+        scrollLock: boolean;
+        /**
+         * The styles for the different state of the modal.
+         */
+        styles: ModalStylesOption;
+    };
+}
 /**
  * Modal class.
  */
-export default class Modal extends Base {
+export declare class Modal<T extends BaseProps = BaseProps> extends Base<T & ModalProps> {
     /**
-     * Modal options.
+     * Config.
      */
-    static config: {
-        name: string;
-        refs: string[];
-        emits: string[];
-        options: {
-            move: StringConstructor;
-            autofocus: {
-                type: StringConstructor;
-                default: string;
-            };
-            styles: {
-                type: ObjectConstructor;
-                /**
-                 * @return {ModalStylesOption}
-                 */
-                default: () => ModalStylesOption;
-            };
-            /**
-             * @return {ModalScrollLockOption}
-             */
-            scrollLock: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-        };
-    };
+    static config: BaseConfig;
     /**
-     * Open the modal on click on the `open` ref.
-     *
-     * @return {Function} The component's `open` method.
+     * Wether the modal is open or not.
      */
-    get onOpenClick(): Function;
+    isOpen: boolean;
     /**
-     * Close the modal on click on the `close` ref.
-     *
-     * @return {Function} The component's `close` method.
+     * @private
      */
-    get onCloseClick(): Function;
+    __refsBackup: (T & ModalProps)['$refs'];
     /**
-     * Close the modal on click on the `overlay` ref.
-     *
-     * @return {Function} The component's `close` method.
+     * @private
      */
-    get onOverlayClick(): Function;
+    __refModalPlaceholder: Comment;
     /**
-     * Initialize the component's behaviours.
-     *
-     * @this {ModalInterface}
+     * @private
      */
-    mounted(this: ModalInterface): void;
-    isOpen: boolean;
-    __refsBackup: import("@studiometa/js-toolkit/Base/managers/RefsManager").default & ModalRefs;
-    __refModalPlaceholder: Comment;
     __refModalParentBackup: HTMLElement;
     /**
-     * Unbind all events on destroy.
-     *
-     * @this {ModalInterface}
-     * @return {Modal} The Modal instance.
+     * @private
      */
-    destroyed(this: ModalInterface): Modal;
+    __refModalUnbindGetRefFilter: () => void;
     /**
-     * Close the modal on `ESC` and trap the tabulation.
-     *
-     * @this {ModalInterface}
-     * @param  {Object}        options
-     * @param  {KeyboardEvent} options.event  The original keyboard event
-     * @param  {Boolean}       options.isUp   Is it a keyup event?
-     * @param  {Boolean}       options.isDown Is it a keydown event?
-     * @param  {Boolean}       options.ESC    Is it the ESC key?
+     * Open the modal on click on the `open` ref.
      */
-    keyed(this: ModalInterface, { event, isUp, isDown, ESC }: {
-        event: KeyboardEvent;
-        isUp: boolean;
-        isDown: boolean;
-        ESC: boolean;
-    }): void;
+    get onOpenClick(): () => Promise<void>;
     /**
-     * Open the modal.
-     *
-     * @this {ModalInterface}
-     * @return {Promise<void>} The Modal instance.
+     * Close the modal on click on the `close` ref.
      */
-    open(this: ModalInterface): Promise<void>;
+    get onCloseClick(): () => Promise<void>;
     /**
-     * Close the modal.
+     * Close the modal on click on the `overlay` ref.
      *
-     * @this {ModalInterface}
-     * @return {Promise<void>} The Modal instance.
+     * @returns {Function} The component's `close` method.
      */
-    close(this: ModalInterface): Promise<void>;
-}
-export type ModalRefs = {
-    close: HTMLElement;
-    container: HTMLElement;
-    content: HTMLElement;
-    modal: HTMLElement;
-    open: HTMLElement;
-    overlay: HTMLElement;
-};
-export type ModalStates = Partial<Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>>;
-export type ModalStylesOption = Partial<Record<keyof ModalRefs, ModalStates>>;
-export type ModalOptions = {
+    get onOverlayClick(): () => Promise<void>;
     /**
-     * A selector where to move the modal to.
+     * Initialize the component's behaviours.
      */
-    move: string;
+    mounted(): void;
     /**
-     * A selector for the element to set the focus to when the modal opens.
+     * Add the moved refs to `this.$refs` when using the `move` options.
      */
-    autofocus: string;
+    get $refs(): import("@studiometa/js-toolkit/Base/managers/RefsManager").RefsManager & (T & ModalProps)["$refs"] & import("@studiometa/js-toolkit/Base").BaseRefs;
     /**
-     * Lock or allow scroll in the documentElement.
+     * Unbind all events on destroy.
      */
-    scrollLock: boolean;
+    destroyed(): this;
     /**
-     * The styles for the different state of the modal.
+     * Close the modal on `ESC` and trap the tabulation.
      */
-    styles: ModalStylesOption;
-};
-export type ModalPrivateInterface = {
-    $refs: ModalRefs;
-    $options: ModalOptions;
-    isOpen: boolean;
-    refModalPlaceholder: Comment;
-    refModalParentBackup: HTMLElement;
-    refModalUnbindGetRefFilter: Function;
-};
-export type ModalInterface = Modal & ModalPrivateInterface;
-export type ModalConstructor = typeof Modal;
-import { Base } from "@studiometa/js-toolkit";
+    keyed({ event, isUp, isDown, ESC }: KeyServiceProps): void;
+    /**
+     * Open the modal.
+     */
+    open(): Promise<void>;
+    /**
+     * Close the modal.
+     */
+    close(): Promise<void>;
+}
+export {};

package/molecules/Modal/Modal.js

@@ -1 +1,150 @@
-import{Base as n}from"@studiometa/js-toolkit";import{transition as r,focusTrap as l}from"@studiometa/js-toolkit/utils";const{trap:a,untrap:c,saveActiveElement:f}=l();class h extends n{static config={name:"Modal",refs:["close[]","container","content","modal","open[]","overlay"],emits:["open","close"],options:{move:String,autofocus:{type:String,default:"[autofocus]"},styles:{type:Object,default:()=>({modal:{closed:{opacity:"0",pointerEvents:"none",visibility:"hidden"}}})},scrollLock:{type:Boolean,default:!0}}};get onOpenClick(){return this.open}get onCloseClick(){return this.close}get onOverlayClick(){return this.close}mounted(){if(this.isOpen=!1,this.close(),this.$options.move){const e=document.querySelector(this.$options.move)||document.body;this.__refsBackup=this.$refs,this.__refModalPlaceholder=document.createComment(""),this.__refModalParentBackup=this.$refs.modal.parentElement||this.$el,this.__refModalParentBackup.insertBefore(this.__refModalPlaceholder,this.$refs.modal),e.appendChild(this.$refs.modal)}}get $refs(){const e=super.$refs;return this.$options.move&&this.__refsBackup&&Object.entries(this.__refsBackup).forEach(([t,s])=>{e[t]||(e[t]=s)}),e}destroyed(){return this.close(),this.$options.move&&this.__refModalParentBackup&&(this.__refModalParentBackup.insertBefore(this.$refs.modal,this.__refModalPlaceholder),this.__refModalPlaceholder.remove(),delete this.__refModalPlaceholder,delete this.__refModalParentBackup),this}keyed({event:e,isUp:t,isDown:s,ESC:o}){!this.isOpen||(s&&a(this.$refs.modal,e),o&&t&&this.close())}async open(){if(this.isOpen)return Promise.resolve();this.$refs.modal.setAttribute("aria-hidden","false"),this.$options.scrollLock&&(document.documentElement.style.overflow="hidden"),this.isOpen=!0,this.$emit("open");const e=this.$refs;return Promise.all(Object.entries(this.$options.styles).map(([t,{open:s,active:o,closed:i}={open:"",active:"",closed:""}])=>r(e[t],{from:i,active:o,to:s},"keep"))).then(()=>(this.$options.autofocus&&this.$refs.modal.querySelector(this.$options.autofocus)&&(f(),this.$refs.modal.querySelector(this.$options.autofocus).focus()),Promise.resolve()))}async close(){if(!this.isOpen)return Promise.resolve();this.$refs.modal.setAttribute("aria-hidden","true"),this.$options.scrollLock&&(document.documentElement.style.overflow=""),this.isOpen=!1,c(),this.$emit("close");const e=this.$refs;return Promise.all(Object.entries(this.$options.styles).map(([t,{open:s,active:o,closed:i}={open:"",active:"",closed:""}])=>r(e[t],{from:s,active:o,to:i},"keep"))).then(()=>Promise.resolve())}}export{h as default};
+import { Base } from "@studiometa/js-toolkit";
+import { transition, focusTrap } from "@studiometa/js-toolkit/utils";
+const { trap, untrap, saveActiveElement } = focusTrap();
+class Modal extends Base {
+  static config = {
+    name: "Modal",
+    refs: ["close[]", "container", "content", "modal", "open[]", "overlay"],
+    emits: ["open", "close"],
+    options: {
+      move: String,
+      autofocus: { type: String, default: "[autofocus]" },
+      styles: {
+        type: Object,
+        default: () => ({
+          modal: {
+            closed: {
+              opacity: "0",
+              pointerEvents: "none",
+              visibility: "hidden"
+            }
+          }
+        })
+      },
+      scrollLock: {
+        type: Boolean,
+        default: true
+      }
+    }
+  };
+  isOpen = false;
+  __refsBackup;
+  __refModalPlaceholder;
+  __refModalParentBackup;
+  __refModalUnbindGetRefFilter;
+  get onOpenClick() {
+    return this.open;
+  }
+  get onCloseClick() {
+    return this.close;
+  }
+  get onOverlayClick() {
+    return this.close;
+  }
+  mounted() {
+    this.isOpen = false;
+    this.close();
+    if (this.$options.move) {
+      const target = document.querySelector(this.$options.move) || document.body;
+      this.__refsBackup = this.$refs;
+      this.__refModalPlaceholder = document.createComment("");
+      this.__refModalParentBackup = this.$refs.modal.parentElement || this.$el;
+      this.__refModalParentBackup.insertBefore(this.__refModalPlaceholder, this.$refs.modal);
+      target.append(this.$refs.modal);
+    }
+  }
+  get $refs() {
+    const $refs = super.$refs;
+    if (this.$options.move && this.__refsBackup) {
+      Object.entries(this.__refsBackup).forEach(([key, ref]) => {
+        if (!$refs[key]) {
+          $refs[key] = ref;
+        }
+      });
+    }
+    return $refs;
+  }
+  destroyed() {
+    this.close();
+    if (this.$options.move && this.__refModalParentBackup) {
+      this.__refModalParentBackup.insertBefore(this.$refs.modal, this.__refModalPlaceholder);
+      this.__refModalPlaceholder.remove();
+      delete this.__refModalPlaceholder;
+      delete this.__refModalParentBackup;
+    }
+    return this;
+  }
+  keyed({ event, isUp, isDown, ESC }) {
+    if (!this.isOpen) {
+      return;
+    }
+    if (isDown) {
+      trap(this.$refs.modal, event);
+    }
+    if (ESC && isUp) {
+      this.close();
+    }
+  }
+  async open() {
+    if (this.isOpen) {
+      return Promise.resolve();
+    }
+    this.$refs.modal.setAttribute("aria-hidden", "false");
+    if (this.$options.scrollLock) {
+      document.documentElement.style.overflow = "hidden";
+    }
+    this.isOpen = true;
+    this.$emit("open");
+    const refs = this.$refs;
+    return Promise.all(
+      Object.entries(this.$options.styles).map(
+        ([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => transition(
+          refs[refName],
+          {
+            from: closed,
+            active,
+            to: open
+          },
+          "keep"
+        )
+      )
+    ).then(() => {
+      if (this.$options.autofocus && this.$refs.modal.querySelector(this.$options.autofocus)) {
+        saveActiveElement();
+        const autofocusElement = this.$refs.modal.querySelector(this.$options.autofocus);
+        autofocusElement.focus();
+      }
+      return Promise.resolve();
+    });
+  }
+  async close() {
+    if (!this.isOpen) {
+      return Promise.resolve();
+    }
+    this.$refs.modal.setAttribute("aria-hidden", "true");
+    if (this.$options.scrollLock) {
+      document.documentElement.style.overflow = "";
+    }
+    this.isOpen = false;
+    untrap();
+    this.$emit("close");
+    const refs = this.$refs;
+    return Promise.all(
+      Object.entries(this.$options.styles).map(
+        ([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => transition(
+          refs[refName],
+          {
+            from: open,
+            active,
+            to: closed
+          },
+          "keep"
+        )
+      )
+    ).then(() => Promise.resolve());
+  }
+}
+export {
+  Modal
+};
+//# sourceMappingURL=Modal.js.map

package/molecules/Modal/Modal.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/Modal/Modal.ts"],
+  "sourcesContent": ["import { Base, KeyServiceProps } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { transition, focusTrap } from '@studiometa/js-toolkit/utils';\n\nconst { trap, untrap, saveActiveElement } = focusTrap();\n\ntype ModalStates = Partial<Record<'open'|'active'|'closed', string|Partial<CSSStyleDeclaration>>>\n// eslint-disable-next-line no-use-before-define\ntype ModalStylesOption = Partial<Record<keyof ModalProps['$refs'], ModalStates>>\n\nexport interface ModalProps extends BaseProps {\n  $refs: {\n    close: HTMLElement[];\n    container: HTMLElement;\n    content: HTMLElement;\n    modal: HTMLElement;\n    open: HTMLElement[];\n    overlay: HTMLElement;\n  };\n  $options: {\n    /**\n     * A selector where to move the modal to.\n     */\n    move: string;\n    /**\n     * A selector for the element to set the focus to when the modal opens.\n     */\n    autofocus: string;\n    /**\n     * Lock or allow scroll in the documentElement.\n     */\n    scrollLock: boolean;\n    /**\n     * The styles for the different state of the modal.\n     */\n    styles: ModalStylesOption;\n  }\n}\n\n/**\n * Modal class.\n */\nexport class Modal<T extends BaseProps = BaseProps> extends Base<T & ModalProps> {\n  /**\n   * Config.\n   */\n  static config:BaseConfig = {\n    name: 'Modal',\n    refs: ['close[]', 'container', 'content', 'modal', 'open[]', 'overlay'],\n    emits: ['open', 'close'],\n    options: {\n      move: String,\n      autofocus: { type: String, default: '[autofocus]' },\n      styles: {\n        type: Object,\n        default: ():ModalStylesOption => ({\n          modal: {\n            closed: {\n              opacity: '0',\n              pointerEvents: 'none',\n              visibility: 'hidden',\n            },\n          },\n        }),\n      },\n      scrollLock: {\n        type: Boolean,\n        default: true,\n      },\n    },\n  };\n\n  /**\n   * Wether the modal is open or not.\n   */\n  isOpen = false;\n\n  /**\n   * @private\n   */\n  __refsBackup:(T & ModalProps)['$refs'];\n\n  /**\n   * @private\n   */\n  __refModalPlaceholder: Comment;\n\n  /**\n   * @private\n   */\n  __refModalParentBackup: HTMLElement;\n\n  /**\n   * @private\n   */\n  __refModalUnbindGetRefFilter:() => void;\n\n  /**\n   * Open the modal on click on the `open` ref.\n   */\n  get onOpenClick() {\n    return this.open;\n  }\n\n  /**\n   * Close the modal on click on the `close` ref.\n   */\n  get onCloseClick() {\n    return this.close;\n  }\n\n  /**\n   * Close the modal on click on the `overlay` ref.\n   *\n   * @returns {Function} The component's `close` method.\n   */\n  get onOverlayClick() {\n    return this.close;\n  }\n\n  /**\n   * Initialize the component's behaviours.\n   */\n  mounted() {\n    this.isOpen = false;\n    this.close();\n\n    if (this.$options.move) {\n      const target = document.querySelector(this.$options.move) || document.body;\n\n      this.__refsBackup = this.$refs;\n      this.__refModalPlaceholder = document.createComment('');\n      this.__refModalParentBackup = this.$refs.modal.parentElement || this.$el;\n      this.__refModalParentBackup.insertBefore(this.__refModalPlaceholder, this.$refs.modal);\n\n      target.append(this.$refs.modal);\n    }\n  }\n\n  /**\n   * Add the moved refs to `this.$refs` when using the `move` options.\n   */\n  get $refs() {\n    const $refs = super.$refs;\n\n    if (this.$options.move && this.__refsBackup) {\n      Object.entries(this.__refsBackup).forEach(([key, ref]) => {\n        if (!$refs[key]) {\n          // @ts-ignore\n          $refs[key] = ref;\n        }\n      });\n    }\n\n    return $refs;\n  }\n\n  /**\n   * Unbind all events on destroy.\n   */\n  destroyed() {\n    this.close();\n\n    if (this.$options.move && this.__refModalParentBackup) {\n      this.__refModalParentBackup.insertBefore(this.$refs.modal, this.__refModalPlaceholder);\n      this.__refModalPlaceholder.remove();\n      delete this.__refModalPlaceholder;\n      delete this.__refModalParentBackup;\n    }\n\n    return this;\n  }\n\n  /**\n   * Close the modal on `ESC` and trap the tabulation.\n   */\n  keyed({ event, isUp, isDown, ESC }:KeyServiceProps) {\n    if (!this.isOpen) {\n      return;\n    }\n\n    if (isDown) {\n      trap(this.$refs.modal, event);\n    }\n\n    if (ESC && isUp) {\n      this.close();\n    }\n  }\n\n  /**\n   * Open the modal.\n   */\n  async open() {\n    if (this.isOpen) {\n      return Promise.resolve();\n    }\n\n    this.$refs.modal.setAttribute('aria-hidden', 'false');\n\n    if (this.$options.scrollLock) {\n      document.documentElement.style.overflow = 'hidden';\n    }\n\n    this.isOpen = true;\n    this.$emit('open');\n\n    /** @type {ModalRefs} */\n    const refs = this.$refs;\n\n    return Promise.all(\n      Object.entries(this.$options.styles).map(\n        ([refName, { open, active, closed } = { open: '', active: '', closed: '' }]) =>\n          transition(\n            refs[refName],\n            {\n              from: closed,\n              active,\n              to: open,\n            },\n            'keep',\n          ),\n      ),\n    ).then(() => {\n      if (this.$options.autofocus && this.$refs.modal.querySelector(this.$options.autofocus)) {\n        saveActiveElement();\n        const autofocusElement = this.$refs.modal.querySelector(this.$options.autofocus) as HTMLElement;\n        autofocusElement.focus();\n      }\n      return Promise.resolve();\n    });\n  }\n\n  /**\n   * Close the modal.\n   */\n  async close() {\n    if (!this.isOpen) {\n      return Promise.resolve();\n    }\n\n    this.$refs.modal.setAttribute('aria-hidden', 'true');\n\n    if (this.$options.scrollLock) {\n      document.documentElement.style.overflow = '';\n    }\n\n    this.isOpen = false;\n    untrap();\n    this.$emit('close');\n\n    const refs = this.$refs;\n\n    return Promise.all(\n      Object.entries(this.$options.styles).map(\n        ([refName, { open, active, closed } = { open: '', active: '', closed: '' }]) =>\n          transition(\n            refs[refName],\n            {\n              from: open,\n              active,\n              to: closed,\n            },\n            'keep',\n          ),\n      ),\n    ).then(() => Promise.resolve());\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/molecules/Modal/ModalWithTransition.cjs

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
@@ -17,21 +15,20 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 
-// packages/ui/molecules/Modal/ModalWithTransition.js
+// packages/ui/molecules/Modal/ModalWithTransition.ts
 var ModalWithTransition_exports = {};
 __export(ModalWithTransition_exports, {
-  default: () => ModalWithTransition
+  ModalWithTransition: () => ModalWithTransition
 });
 module.exports = __toCommonJS(ModalWithTransition_exports);
-var import_Modal = __toESM(require("./Modal.cjs"), 1);
-var ModalWithTransition = class extends import_Modal.default {
+var import_Modal = require("./Modal.cjs");
+var ModalWithTransition = class extends import_Modal.Modal {
   open() {
     this.$refs.modal.style.visibility = "";
     return super.open();
@@ -68,3 +65,4 @@ __publicField(ModalWithTransition, "config", {
   }
 });
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=ModalWithTransition.cjs.map

package/molecules/Modal/ModalWithTransition.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/molecules/Modal/ModalWithTransition.ts"],
+  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { Modal } from './Modal.js';\n\n/**\n * ModalWithTransition class.\n */\nexport class ModalWithTransition<T extends BaseProps = BaseProps> extends Modal<T> {\n  /**\n   * Modal options.\n   */\n  static config:BaseConfig = {\n    name: 'ModalWithTransition',\n    options: {\n      styles: {\n        type: Object,\n        /**\n         * @returns {ModalStylesOption}\n         */\n        default: () => ({\n          modal: {\n            closed: {\n              opacity: '0',\n              pointerEvents: 'none',\n            },\n            active: 'transition duration-500 ease-out-expo',\n          },\n          overlay: {\n            closed: 'opacity-0',\n            active: 'transition duration-500 ease-out-expo',\n          },\n          container: {\n            closed: 'transform scale-95 opacity-0',\n            active: 'transition duration-500 ease-out-expo',\n          },\n        }),\n      },\n    },\n  };\n\n  open() {\n    this.$refs.modal.style.visibility = '';\n    return super.open();\n  }\n\n  async close() {\n    await super.close();\n    this.$refs.modal.style.visibility = 'hidden';\n    return Promise.resolve();\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAsB;AAKf,IAAM,sBAAN,cAAmE,mBAAS;AAAA,EAiCjF,OAAO;AACL,SAAK,MAAM,MAAM,MAAM,aAAa;AACpC,WAAO,MAAM,KAAK;AAAA,EACpB;AAAA,EAEA,MAAM,QAAQ;AACZ,UAAM,MAAM,MAAM;AAClB,SAAK,MAAM,MAAM,MAAM,aAAa;AACpC,WAAO,QAAQ,QAAQ;AAAA,EACzB;AACF;AAvCE,cAJW,qBAIJ,UAAoB;AAAA,EACzB,MAAM;AAAA,EACN,SAAS;AAAA,IACP,QAAQ;AAAA,MACN,MAAM;AAAA,MAIN,SAAS,OAAO;AAAA,QACd,OAAO;AAAA,UACL,QAAQ;AAAA,YACN,SAAS;AAAA,YACT,eAAe;AAAA,UACjB;AAAA,UACA,QAAQ;AAAA,QACV;AAAA,QACA,SAAS;AAAA,UACP,QAAQ;AAAA,UACR,QAAQ;AAAA,QACV;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;",
+  "names": []
+}

package/molecules/Modal/ModalWithTransition.d.ts

@@ -1,29 +1,13 @@
-/**
- * @typedef {import('./Modal.js').ModalInterface} ModalInterface
- * @typedef {import('./Modal.js').ModalStylesOption} ModalStylesOption
- * @typedef {ModalInterface & ModalWithTransition} ModalWithTransitionInterface
- */
+import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+import { Modal } from './Modal.js';
 /**
  * ModalWithTransition class.
  */
-export default class ModalWithTransition extends Modal {
+export declare class ModalWithTransition<T extends BaseProps = BaseProps> extends Modal<T> {
     /**
      * Modal options.
      */
-    static config: {
-        name: string;
-        options: {
-            styles: {
-                type: ObjectConstructor;
-                /**
-                 * @return {ModalStylesOption}
-                 */
-                default: () => ModalStylesOption;
-            };
-        };
-    };
+    static config: BaseConfig;
+    open(): Promise<void>;
+    close(): Promise<void>;
 }
-export type ModalInterface = import('./Modal.js').ModalInterface;
-export type ModalStylesOption = import('./Modal.js').ModalStylesOption;
-export type ModalWithTransitionInterface = ModalInterface & ModalWithTransition;
-import Modal from "./Modal.js";