@studiometa/ui 0.2.12 → 0.2.14

package/molecules/Menu/MenuBtn.cjs

@@ -21,15 +21,18 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 
-// packages/ui/molecules/Menu/MenuBtn.js
+// packages/ui/molecules/Menu/MenuBtn.ts
 var MenuBtn_exports = {};
 __export(MenuBtn_exports, {
-  default: () => MenuBtn
+  MenuBtn: () => MenuBtn
 });
 module.exports = __toCommonJS(MenuBtn_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var MenuBtn = class extends import_js_toolkit.Base {
-  isHover = false;
+  constructor() {
+    super(...arguments);
+    __publicField(this, "isHover", false);
+  }
   onClick(event) {
     event.stopPropagation();
   }
@@ -43,7 +46,6 @@ var MenuBtn = class extends import_js_toolkit.Base {
   }
 };
 __publicField(MenuBtn, "config", {
-  name: "MenuBtn",
-  debug: true
+  name: "MenuBtn"
 });
 if (module.exports.default) module.exports = module.exports.default;

package/molecules/Menu/MenuBtn.d.ts

@@ -1,14 +1,13 @@
+import { Base } from '@studiometa/js-toolkit';
+import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
 /**
  * MenuBtn class.
  */
-export default class MenuBtn extends Base {
+export declare class MenuBtn<T extends BaseProps = BaseProps> extends Base<T> {
     /**
      * Config.
      */
-    static config: {
-        name: string;
-        debug: boolean;
-    };
+    static config: BaseConfig;
     /**
      * Wether the button is hovered or not.
      * @type {boolean}
@@ -20,19 +19,18 @@ export default class MenuBtn extends Base {
      * @param   {MouseEvent} event
      * @returns {void}
      */
-    onClick(event: MouseEvent): void;
+    onClick(event: any): void;
     /**
      * Dispatch the mouseenter event.
      *
      * @param   {MouseEvent} event
      * @returns {void}
      */
-    onMouseenter(event: MouseEvent): void;
+    onMouseenter(event: any): void;
     /**
      * Dispatch the mouseleave event.
      * @param   {MouseEvent} event
      * @returns {void}
      */
-    onMouseleave(event: MouseEvent): void;
+    onMouseleave(event: any): void;
 }
-import { Base } from "@studiometa/js-toolkit";

package/molecules/Menu/MenuBtn.js

@@ -1 +1,30 @@
-import{Base as o}from"@studiometa/js-toolkit";class t extends o{static config={name:"MenuBtn",debug:!0};isHover=!1;onClick(e){e.stopPropagation()}onMouseenter(e){this.isHover=!0,e.stopPropagation()}onMouseleave(e){this.isHover=!1,e.stopPropagation()}}export{t as default};
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { Base } from "@studiometa/js-toolkit";
+class MenuBtn extends Base {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "isHover", false);
+  }
+  onClick(event) {
+    event.stopPropagation();
+  }
+  onMouseenter(event) {
+    this.isHover = true;
+    event.stopPropagation();
+  }
+  onMouseleave(event) {
+    this.isHover = false;
+    event.stopPropagation();
+  }
+}
+__publicField(MenuBtn, "config", {
+  name: "MenuBtn"
+});
+export {
+  MenuBtn
+};

package/molecules/Menu/MenuList.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,20 +15,19 @@ 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/Menu/MenuList.js
+// packages/ui/molecules/Menu/MenuList.ts
 var MenuList_exports = {};
 __export(MenuList_exports, {
-  default: () => MenuList
+  MenuList: () => MenuList
 });
 module.exports = __toCommonJS(MenuList_exports);
-var import_Transition = __toESM(require("../../primitives/Transition/Transition.cjs"), 1);
+var import_primitives = require("../../primitives/index.cjs");
 var FOCUSABLE_ELEMENTS = [
   "a[href]:not([inert])",
   "area[href]:not([inert])",
@@ -44,9 +41,12 @@ var FOCUSABLE_ELEMENTS = [
   "[contenteditable]:not([inert])",
   "[tabindex]:not([inert])"
 ].join(",");
-var _MenuList = class extends import_Transition.default {
-  isOpen = false;
-  isHover = false;
+var _MenuList = class extends import_primitives.Transition {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "isOpen", false);
+    __publicField(this, "isHover", false);
+  }
   get $options() {
     const options = super.$options;
     options.leaveKeep = true;
@@ -103,7 +103,9 @@ var _MenuList = class extends import_Transition.default {
     }
   }
   __updateTabIndexes(mode = "open") {
-    const focusableItems = Array.from(this.$el.querySelectorAll(FOCUSABLE_ELEMENTS)).filter((item) => this.__filterFocusableItems(item));
+    const focusableItems = Array.from(this.$el.querySelectorAll(FOCUSABLE_ELEMENTS)).filter(
+      (item) => this.__filterFocusableItems(item)
+    );
     focusableItems.forEach((item) => {
       if (mode === "close") {
         item.setAttribute("tabindex", "-1");
@@ -122,7 +124,7 @@ var _MenuList = class extends import_Transition.default {
 };
 var MenuList = _MenuList;
 __publicField(MenuList, "config", {
-  ...import_Transition.default.config,
+  ...import_primitives.Transition.config,
   name: "MenuList",
   emits: ["items-open", "items-close", "items-mouseleave"],
   components: {

package/molecules/Menu/MenuList.d.ts

@@ -1,99 +1,62 @@
-declare const MenuList_base: typeof import("@studiometa/js-toolkit").Base & (new (...a: any[]) => {
-    readonly target: HTMLElement | HTMLElement[];
-    enter(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>;
-    leave(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>;
-});
-/**
- * @typedef {MenuList & {
- *   $children: {
- *     MenuList: MenuList[]
- *   }
- * }} MenuListInterface
- */
+import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
+import { Transition } from '../../primitives/index.js';
+export interface MenuListProps extends BaseProps {
+    $children: {
+        MenuList: MenuList[];
+    };
+}
 /**
  * MenuList class.
  */
-export default class MenuList extends MenuList_base {
+export declare class MenuList<T extends BaseProps = BaseProps> extends Transition<T & MenuListProps> {
     /**
      * Config.
      */
-    static config: {
-        name: string;
-        emits: string[];
-        components: {
-            MenuList: typeof MenuList;
-        };
-        debug?: boolean;
-        log?: boolean;
-        refs?: string[];
-        options?: import("@studiometa/js-toolkit/Base/managers/OptionsManager.js").OptionsSchema;
-    };
+    static config: BaseConfig;
     /**
      * Are the menu items visible?
-     * @type {boolean}
      */
     isOpen: boolean;
     /**
      * Wether the component is hovered.
-     * @type {boolean}
      */
     isHover: boolean;
+    /**
+     * Override `Transition` options.
+     */
+    get $options(): import("@studiometa/js-toolkit/Base/managers/OptionsManager.js").default & import("@studiometa/js-toolkit/Base/index.js").BaseOptions & (T & MenuListProps & import("../../index.js").TransitionProps)["$options"];
     /**
      * Update tab indexes on mount.
-     *
-     * @returns {void}
      */
     mounted(): void;
     /**
      * Set hover state.
-     *
-     * @returns {void}
      */
     onMouseenter(): void;
     /**
      * Unset hover state.
-     *
-     * @returns {void}
      */
     onMouseleave(): void;
     /**
      * Display the menu items.
-     *
-     * @returns {void}
      */
     open(): void;
     /**
      * Hide the menu items.
-     *
-     * @this    {MenuListInterface}
-     * @returns {void}
      */
-    close(this: MenuListInterface): void;
+    close(): void;
     /**
      * Toggle the menu items.
-     * @returns {void}
      */
     toggle(): void;
     /**
      * Update `tabindex` attribute of child focusable elements.
-     *
      * @private
-     * @param {'open'|'close'} mode
-     * @returns {void}
      */
-    private __updateTabIndexes;
+    __updateTabIndexes(mode?: 'open' | 'close'): void;
     /**
      * Filter out items which are inside a child `MenuList` instance.
-     *
      * @private
-     * @param   {HTMLElement} item
-     * @returns {boolean}
      */
-    private __filterFocusableItems;
+    __filterFocusableItems(item: HTMLElement): boolean;
 }
-export type MenuListInterface = MenuList & {
-    $children: {
-        MenuList: MenuList[];
-    };
-};
-export {};

package/molecules/Menu/MenuList.js

@@ -1 +1,113 @@
-import s from"../../primitives/Transition/Transition.js";const o=["a[href]:not([inert])","area[href]:not([inert])","input:not([disabled]):not([inert])","select:not([disabled]):not([inert])","textarea:not([disabled]):not([inert])","button:not([disabled]):not([inert])","iframe:not([inert])","audio:not([inert])","video:not([inert])","[contenteditable]:not([inert])","[tabindex]:not([inert])"].join(",");class n extends s{static config={...s.config,name:"MenuList",emits:["items-open","items-close","items-mouseleave"],components:{MenuList:n}};isOpen=!1;isHover=!1;get $options(){const e=super.$options;return e.leaveKeep=!0,e.enterKeep=!0,e}mounted(){this.__updateTabIndexes("close")}onMouseenter(){this.isHover=!0}onMouseleave(){this.isHover=!1}open(){if(this.isOpen)return;const e=t=>{this.$el.contains(t.target)||(document.removeEventListener("click",e),this.close())};document.addEventListener("click",e),this.__updateTabIndexes("open"),this.$el.setAttribute("aria-hidden","false"),this.isOpen=!0,this.enter(),this.$emit("items-open")}close(){!this.isOpen||(this.$children.MenuList.forEach(e=>{e.close()}),document.activeElement instanceof HTMLElement&&this.$el.contains(document.activeElement)&&document.activeElement.blur(),this.$el.setAttribute("aria-hidden","true"),this.__updateTabIndexes("close"),this.isOpen=!1,this.leave(),this.$emit("items-close"))}toggle(){this.isOpen?this.close():this.open()}__updateTabIndexes(e="open"){Array.from(this.$el.querySelectorAll(o)).filter(i=>this.__filterFocusableItems(i)).forEach(i=>{e==="close"?i.setAttribute("tabindex","-1"):i.removeAttribute("tabindex")})}__filterFocusableItems(e){let t=e.parentElement;for(;t&&(!t.__base__||!t.__base__.has(this.constructor));)t=t.parentElement;return t===null||t===this.$el}}export{n as default};
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { Transition } from "../../primitives/index.js";
+const FOCUSABLE_ELEMENTS = [
+  "a[href]:not([inert])",
+  "area[href]:not([inert])",
+  "input:not([disabled]):not([inert])",
+  "select:not([disabled]):not([inert])",
+  "textarea:not([disabled]):not([inert])",
+  "button:not([disabled]):not([inert])",
+  "iframe:not([inert])",
+  "audio:not([inert])",
+  "video:not([inert])",
+  "[contenteditable]:not([inert])",
+  "[tabindex]:not([inert])"
+].join(",");
+const _MenuList = class extends Transition {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "isOpen", false);
+    __publicField(this, "isHover", false);
+  }
+  get $options() {
+    const options = super.$options;
+    options.leaveKeep = true;
+    options.enterKeep = true;
+    return options;
+  }
+  mounted() {
+    this.__updateTabIndexes("close");
+  }
+  onMouseenter() {
+    this.isHover = true;
+  }
+  onMouseleave() {
+    this.isHover = false;
+  }
+  open() {
+    if (this.isOpen) {
+      return;
+    }
+    const clickOutsideHandler = (event) => {
+      if (!this.$el.contains(event.target)) {
+        document.removeEventListener("click", clickOutsideHandler);
+        this.close();
+      }
+    };
+    document.addEventListener("click", clickOutsideHandler);
+    this.__updateTabIndexes("open");
+    this.$el.setAttribute("aria-hidden", "false");
+    this.isOpen = true;
+    this.enter();
+    this.$emit("items-open");
+  }
+  close() {
+    if (!this.isOpen) {
+      return;
+    }
+    this.$children.MenuList.forEach((menuItem) => {
+      menuItem.close();
+    });
+    if (document.activeElement instanceof HTMLElement && this.$el.contains(document.activeElement)) {
+      document.activeElement.blur();
+    }
+    this.$el.setAttribute("aria-hidden", "true");
+    this.__updateTabIndexes("close");
+    this.isOpen = false;
+    this.leave();
+    this.$emit("items-close");
+  }
+  toggle() {
+    if (this.isOpen) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+  __updateTabIndexes(mode = "open") {
+    const focusableItems = Array.from(this.$el.querySelectorAll(FOCUSABLE_ELEMENTS)).filter(
+      (item) => this.__filterFocusableItems(item)
+    );
+    focusableItems.forEach((item) => {
+      if (mode === "close") {
+        item.setAttribute("tabindex", "-1");
+      } else {
+        item.removeAttribute("tabindex");
+      }
+    });
+  }
+  __filterFocusableItems(item) {
+    let ancestor = item.parentElement;
+    while (ancestor && (!ancestor.__base__ || !ancestor.__base__.has(this.constructor))) {
+      ancestor = ancestor.parentElement;
+    }
+    return ancestor === null || ancestor === this.$el;
+  }
+};
+let MenuList = _MenuList;
+__publicField(MenuList, "config", {
+  ...Transition.config,
+  name: "MenuList",
+  emits: ["items-open", "items-close", "items-mouseleave"],
+  components: {
+    MenuList: _MenuList
+  }
+});
+export {
+  MenuList
+};

package/molecules/Menu/index.cjs

@@ -1,13 +1,7 @@
-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 __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -16,18 +10,13 @@ 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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/ui/molecules/Menu/index.js
+// packages/ui/molecules/Menu/index.ts
 var Menu_exports = {};
-__export(Menu_exports, {
-  Menu: () => import_Menu.default,
-  MenuBtn: () => import_MenuBtn.default,
-  MenuList: () => import_MenuList.default
-});
 module.exports = __toCommonJS(Menu_exports);
-var import_Menu = __toESM(require("./Menu.cjs"), 1);
-var import_MenuBtn = __toESM(require("./MenuBtn.cjs"), 1);
-var import_MenuList = __toESM(require("./MenuList.cjs"), 1);
+__reExport(Menu_exports, require("./Menu.cjs"), module.exports);
+__reExport(Menu_exports, require("./MenuBtn.cjs"), module.exports);
+__reExport(Menu_exports, require("./MenuList.cjs"), module.exports);
 if (module.exports.default) module.exports = module.exports.default;

package/molecules/Menu/index.d.ts

@@ -1,3 +1,3 @@
-export { default as Menu } from "./Menu.js";
-export { default as MenuBtn } from "./MenuBtn.js";
-export { default as MenuList } from "./MenuList.js";
+export * from './Menu.js';
+export * from './MenuBtn.js';
+export * from './MenuList.js';

package/molecules/Menu/index.js

@@ -1 +1,3 @@
-import{default as a}from"./Menu.js";import{default as o}from"./MenuBtn.js";import{default as u}from"./MenuList.js";export{a as Menu,o as MenuBtn,u as MenuList};
+export * from "./Menu.js";
+export * from "./MenuBtn.js";
+export * from "./MenuList.js";

package/molecules/Modal/Modal.cjs

@@ -21,16 +21,29 @@ 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");
+function delegateTransition(elementOrElements, name, endMode) {
+  return (0, import_utils.isArray)(elementOrElements) || elementOrElements instanceof NodeList ? Promise.all(
+    Array.from(elementOrElements).map((el) => (0, import_utils.transition)(el, name, endMode))
+  ) : (0, import_utils.transition)(elementOrElements, name, endMode);
+}
 var { trap, untrap, saveActiveElement } = (0, import_utils.focusTrap)();
 var Modal = class extends import_js_toolkit.Base {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "isOpen", false);
+    __publicField(this, "__refsBackup");
+    __publicField(this, "__refModalPlaceholder");
+    __publicField(this, "__refModalParentBackup");
+    __publicField(this, "__refModalUnbindGetRefFilter");
+  }
   get onOpenClick() {
     return this.open;
   }
@@ -49,7 +62,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 +108,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: "" }]) => delegateTransition(
+          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 +141,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: "" }]) => delegateTransition(
+          refs[refName],
+          {
+            from: open,
+            active,
+            to: closed
+          },
+          "keep"
+        )
+      )
+    ).then(() => Promise.resolve());
   }
 };
 __publicField(Modal, "config", {