@studiometa/ui 0.2.12 → 0.2.14

package/molecules/Accordion/AccordionItem.d.ts

@@ -1,122 +1,52 @@
-/**
- * @typedef {import('@studiometa/js-toolkit/Base').BaseOptions} BaseOptions
- * @typedef {import('./AccordionCore.js').AccordionInterface} AccordionInterface
- */
-/**
- * @typedef {Object} AccordionItemRefs
- * @property {HTMLElement} btn
- * @property {HTMLElement} content
- * @property {HTMLElement} container
- */
-/**
- * @typedef {Object} StylesOption
- * @property {String|Partial<CSSStyleDeclaration>} open
- * @property {String|Partial<CSSStyleDeclaration>} active
- * @property {String|Partial<CSSStyleDeclaration>} closed
- */
-/**
- * @typedef {Partial<Record<'open'|'active'|'closed', string|Partial<CSSStyleDeclaration>>>} AccordionItemStates
- * @typedef {Partial<Record<keyof AccordionItemRefs, AccordionItemStates>>} AccordionItemStylesOption
- */
-/**
- * @typedef {Object} AccordionItemOptions
- * @property {Boolean} isOpen
- * @property {AccordionItemStylesOption} styles
- */
-/**
- * @typedef {Object} AccordionItemPrivateInterface
- * @property {AccordionItemOptions} $options
- * @property {AccordionItemRefs} $refs
- * @property {Accordion & AccordionInterface} $parent
- */
-/**
- * @typedef {AccordionItem & AccordionItemPrivateInterface} AccordionItemInterface
- */
+import { Base, BaseConfig } from '@studiometa/js-toolkit';
+import type { BaseProps } from '@studiometa/js-toolkit';
+declare type AccordionItemStates = Partial<Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>>;
+export interface AccordionItemProps extends BaseProps {
+    $refs: {
+        btn: HTMLElement;
+        content: HTMLElement;
+        container: HTMLElement;
+    };
+    $options: {
+        isOpen: boolean;
+        styles: Partial<Record<keyof AccordionItemProps['$refs'], AccordionItemStates>>;
+    };
+}
 /**
  * AccordionItem class.
  */
-export default class AccordionItem extends Base {
+export declare class AccordionItem<T extends BaseProps = BaseProps> extends Base<T & AccordionItemProps> {
     /**
-     * AccordionItem config
-     * @return {Object}
+     * Config.
      */
-    static config: {
-        name: string;
-        refs: string[];
-        emits: string[];
-        options: {
-            isOpen: BooleanConstructor;
-            styles: {
-                type: ObjectConstructor;
-                /**
-                 * @return {AccordionItemStylesOption}
-                 */
-                default: () => AccordionItemStylesOption;
-                merge: boolean;
-            };
-        };
-    };
+    static config: BaseConfig;
     /**
      * Add aria-attributes on mounted.
-     * @this {AccordionItemInterface}
      */
-    mounted(this: AccordionItemInterface): void;
+    mounted(): void;
     /**
      * Remove styles on destroy.
-     * @this {AccordionItemInterface}
      */
-    destroyed(this: AccordionItemInterface): void;
+    destroyed(): void;
     /**
      * Handler for the click event on the `btn` ref.
-     * @this {AccordionItemInterface}
      */
-    onBtnClick(this: AccordionItemInterface): void;
+    onBtnClick(): void;
     /**
      * Get the content ID.
-     * @return {String}
      */
     get contentId(): string;
     /**
      * Update the refs' attributes according to the given type.
-     *
-     * @this {AccordionItemInterface}
-     * @param  {Boolean} isOpen The state of the item.
      */
-    updateAttributes(this: AccordionItemInterface, isOpen: boolean): void;
+    updateAttributes(isOpen: boolean): void;
     /**
      * Open an item.
-     * @this {AccordionItemInterface}
      */
-    open(this: AccordionItemInterface): Promise<void>;
+    open(): Promise<void>;
     /**
      * Close an item.
-     * @this {AccordionItemInterface}
      */
-    close(this: AccordionItemInterface): Promise<void>;
+    close(): Promise<void>;
 }
-export type BaseOptions = import('@studiometa/js-toolkit/Base').BaseOptions;
-export type AccordionInterface = import('./AccordionCore.js').AccordionInterface;
-export type AccordionItemRefs = {
-    btn: HTMLElement;
-    content: HTMLElement;
-    container: HTMLElement;
-};
-export type StylesOption = {
-    open: string | Partial<CSSStyleDeclaration>;
-    active: string | Partial<CSSStyleDeclaration>;
-    closed: string | Partial<CSSStyleDeclaration>;
-};
-export type AccordionItemStates = Partial<Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>>;
-export type AccordionItemStylesOption = Partial<Record<keyof AccordionItemRefs, AccordionItemStates>>;
-export type AccordionItemOptions = {
-    isOpen: boolean;
-    styles: AccordionItemStylesOption;
-};
-export type AccordionItemPrivateInterface = {
-    $options: AccordionItemOptions;
-    $refs: AccordionItemRefs;
-    $parent: Accordion & AccordionInterface;
-};
-export type AccordionItemInterface = AccordionItem & AccordionItemPrivateInterface;
-import { Base } from "@studiometa/js-toolkit";
-import Accordion from "./AccordionCore.js";
+export {};

package/molecules/Accordion/AccordionItem.js

@@ -1 +1,153 @@
-import a from"deepmerge";import{Base as l}from"@studiometa/js-toolkit";import{transition as r}from"@studiometa/js-toolkit/utils";import f from"./AccordionCore.js";class c extends l{static config={name:"AccordionItem",refs:["btn","content","container"],emits:["open","close"],options:{isOpen:Boolean,styles:{type:Object,default:()=>({container:{open:"",active:"",closed:""}}),merge:!0}}};mounted(){this.$parent&&this.$parent instanceof f&&this.$parent.$options.item&&Object.entries(this.$parent.$options.item).forEach(([t,o])=>{if(t in this.$options){const n=c.config.options[t].type||c.config.options[t];n===Array||n===Object?this.$options[t]=a(this.$options[t],o):this.$options[t]=o}}),this.$refs.btn.setAttribute("id",this.$id),this.$refs.btn.setAttribute("aria-controls",this.contentId),this.$refs.content.setAttribute("aria-labelledby",this.$id),this.$refs.content.setAttribute("id",this.contentId);const{isOpen:i}=this.$options;this.updateAttributes(i);const{container:h,...s}=this.$options.styles,e=this.$refs;Object.entries(s).filter(([t])=>e[t]).forEach(([t,{open:o,closed:n}={open:"",closed:""}])=>{r(e[t],{to:i?o:n},"keep")})}destroyed(){this.$refs.container.style.visibility="",this.$refs.container.style.height=""}onBtnClick(){this.$options.isOpen?this.close():this.open()}get contentId(){return`content-${this.$id}`}updateAttributes(i){this.$refs.container.style.visibility=i?"":"invisible",this.$refs.container.style.height=i?"":"0",this.$refs.content.setAttribute("aria-hidden",i?"false":"true"),this.$refs.btn.setAttribute("aria-expanded",i?"true":"false")}async open(){if(this.$options.isOpen)return;this.$log("open"),this.$emit("open"),this.$options.isOpen=!0,this.updateAttributes(this.$options.isOpen),this.$refs.container.style.visibility="";const{container:i,...h}=this.$options.styles,s=this.$refs;await Promise.all([r(s.container,{from:{height:"0"},active:i.active,to:{height:`${s.content.offsetHeight}px`}}).then(()=>(this.$options.isOpen&&(s.content.style.position=""),Promise.resolve())),...Object.entries(h).filter(([e])=>s[e]).map(([e,{open:t,active:o,closed:n}={open:"",active:"",closed:""}])=>r(s[e],{from:n,active:o,to:t},"keep"))])}async close(){if(!this.$options.isOpen)return;this.$log("close"),this.$emit("close"),this.$options.isOpen=!1;const i=this.$refs.container.offsetHeight;this.$refs.content.style.position="absolute";const{container:h,...s}=this.$options.styles,e=this.$refs;await Promise.all([r(e.container,{from:{height:`${i}px`},active:h.active,to:{height:"0"}}).then(()=>(this.$options.isOpen||(e.container.style.height="0",e.container.style.visibility="invisible",this.updateAttributes(this.$options.isOpen)),Promise.resolve())),...Object.entries(s).filter(([t])=>e[t]).map(([t,{open:o,active:n,closed:p}={open:"",active:"",closed:""}])=>r(e[t],{from:o,active:n,to:p},"keep"))])}}export{c 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 deepmerge from "deepmerge";
+import { Base } from "@studiometa/js-toolkit";
+import { transition } from "@studiometa/js-toolkit/utils";
+import { AccordionCore as Accordion } from "./AccordionCore.js";
+const _AccordionItem = class extends Base {
+  mounted() {
+    if (this.$parent && this.$parent instanceof Accordion && this.$parent.$options.item) {
+      Object.entries(this.$parent.$options.item).forEach(([key, value]) => {
+        var _a;
+        if (key in this.$options) {
+          const type = (_a = _AccordionItem.config.options[key].type) != null ? _a : _AccordionItem.config.options[key];
+          if (type === Array || type === Object) {
+            this.$options[key] = deepmerge(this.$options[key], value);
+          } else {
+            this.$options[key] = value;
+          }
+        }
+      });
+    }
+    this.$refs.btn.setAttribute("id", this.$id);
+    this.$refs.btn.setAttribute("aria-controls", this.contentId);
+    this.$refs.content.setAttribute("aria-labelledby", this.$id);
+    this.$refs.content.setAttribute("id", this.contentId);
+    const { isOpen } = this.$options;
+    this.updateAttributes(isOpen);
+    const { container, ...otherStyles } = this.$options.styles;
+    const { $refs } = this;
+    Object.entries(otherStyles).filter(([refName]) => $refs[refName]).forEach(([refName, { open, closed } = { open: "", closed: "" }]) => {
+      transition($refs[refName], { to: isOpen ? open : closed }, "keep");
+    });
+  }
+  destroyed() {
+    this.$refs.container.style.visibility = "";
+    this.$refs.container.style.height = "";
+  }
+  onBtnClick() {
+    if (this.$options.isOpen) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+  get contentId() {
+    return `content-${this.$id}`;
+  }
+  updateAttributes(isOpen) {
+    this.$refs.container.style.visibility = isOpen ? "" : "invisible";
+    this.$refs.container.style.height = isOpen ? "" : "0";
+    this.$refs.content.setAttribute("aria-hidden", isOpen ? "false" : "true");
+    this.$refs.btn.setAttribute("aria-expanded", isOpen ? "true" : "false");
+  }
+  async open() {
+    if (this.$options.isOpen) {
+      return;
+    }
+    this.$log("open");
+    this.$emit("open");
+    this.$options.isOpen = true;
+    this.updateAttributes(this.$options.isOpen);
+    this.$refs.container.style.visibility = "";
+    const { container, ...otherStyles } = this.$options.styles;
+    const { $refs } = this;
+    await Promise.all([
+      transition($refs.container, {
+        from: { height: "0" },
+        active: container.active,
+        to: { height: `${$refs.content.offsetHeight}px` }
+      }).then(() => {
+        if (this.$options.isOpen) {
+          $refs.content.style.position = "";
+        }
+        return Promise.resolve();
+      }),
+      ...Object.entries(otherStyles).filter(([refName]) => $refs[refName]).map(
+        ([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => transition(
+          $refs[refName],
+          {
+            from: closed,
+            active,
+            to: open
+          },
+          "keep"
+        )
+      )
+    ]);
+  }
+  async close() {
+    if (!this.$options.isOpen) {
+      return;
+    }
+    this.$log("close");
+    this.$emit("close");
+    this.$options.isOpen = false;
+    const height = this.$refs.container.offsetHeight;
+    this.$refs.content.style.position = "absolute";
+    const { container, ...otherStyles } = this.$options.styles;
+    const refs = this.$refs;
+    await Promise.all([
+      transition(refs.container, {
+        from: { height: `${height}px` },
+        active: container.active,
+        to: { height: "0" }
+      }).then(() => {
+        if (!this.$options.isOpen) {
+          refs.container.style.height = "0";
+          refs.container.style.visibility = "invisible";
+          this.updateAttributes(this.$options.isOpen);
+        }
+        return Promise.resolve();
+      }),
+      ...Object.entries(otherStyles).filter(([refName]) => refs[refName]).map(
+        ([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => transition(
+          refs[refName],
+          {
+            from: open,
+            active,
+            to: closed
+          },
+          "keep"
+        )
+      )
+    ]);
+  }
+};
+let AccordionItem = _AccordionItem;
+__publicField(AccordionItem, "config", {
+  name: "AccordionItem",
+  refs: ["btn", "content", "container"],
+  emits: ["open", "close"],
+  options: {
+    isOpen: Boolean,
+    styles: {
+      type: Object,
+      default: () => ({
+        container: {
+          open: "",
+          active: "",
+          closed: ""
+        }
+      }),
+      merge: true
+    }
+  }
+});
+export {
+  AccordionItem
+};

package/molecules/Accordion/index.cjs

@@ -0,0 +1,21 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+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/Accordion/index.ts
+var Accordion_exports = {};
+module.exports = __toCommonJS(Accordion_exports);
+__reExport(Accordion_exports, require("./Accordion.cjs"), module.exports);
+__reExport(Accordion_exports, require("./AccordionItem.cjs"), module.exports);
+if (module.exports.default) module.exports = module.exports.default;

package/molecules/Accordion/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Accordion.js';
+export * from './AccordionItem.js';

package/molecules/Accordion/index.js

@@ -0,0 +1,2 @@
+export * from "./Accordion.js";
+export * from "./AccordionItem.js";

package/molecules/Menu/Menu.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,23 +15,22 @@ 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/Menu.js
+// packages/ui/molecules/Menu/Menu.ts
 var Menu_exports = {};
 __export(Menu_exports, {
-  default: () => Menu
+  Menu: () => Menu
 });
 module.exports = __toCommonJS(Menu_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_utils = require("@studiometa/js-toolkit/utils");
-var import_MenuBtn = __toESM(require("./MenuBtn.cjs"), 1);
-var import_MenuList = __toESM(require("./MenuList.cjs"), 1);
+var import_MenuBtn = require("./MenuBtn.cjs");
+var import_MenuList = require("./MenuList.cjs");
 var _Menu = class extends import_js_toolkit.Base {
   get menuList() {
     return (0, import_js_toolkit.getDirectChildren)(this, "Menu", "MenuList")[0];
@@ -123,10 +120,9 @@ var _Menu = class extends import_js_toolkit.Base {
 var Menu = _Menu;
 __publicField(Menu, "config", {
   name: "Menu",
-  debug: true,
   components: {
-    MenuBtn: import_MenuBtn.default,
-    MenuList: import_MenuList.default,
+    MenuBtn: import_MenuBtn.MenuBtn,
+    MenuList: import_MenuList.MenuList,
     Menu: _Menu
   },
   options: {

package/molecules/Menu/Menu.d.ts

@@ -1,140 +1,80 @@
-/**
- * @typedef {Menu & {
- *   $children: {
- *     Menu: Menu[],
- *     MenuBtn: MenuBtn[],
- *     MenuList: MenuList[],
- *   },
- *   $options: {
- *     mode: 'click'|'hover'
- *   }
- * }} MenuInterface
- */
+import { Base } from '@studiometa/js-toolkit';
+import type { BaseConfig, BaseProps, KeyServiceProps } from '@studiometa/js-toolkit';
+import { MenuBtn } from './MenuBtn.js';
+import { MenuList } from './MenuList.js';
+export interface MenuProps extends BaseProps {
+    $children: {
+        Menu: Menu[];
+        MenutBtn: MenuBtn[];
+        MenuList: MenuList[];
+    };
+    $options: {
+        mode: 'click' | 'hover';
+    };
+}
 /**
  * Menu class.
  */
-export default class Menu extends Base {
+export declare class Menu<T extends BaseProps = BaseProps> extends Base<T & MenuProps> {
     /**
      * Config.
      */
-    static config: {
-        name: string;
-        debug: boolean;
-        components: {
-            MenuBtn: typeof MenuBtn;
-            MenuList: typeof MenuList;
-            Menu: typeof Menu;
-        };
-        options: {
-            mode: {
-                type: StringConstructor;
-                default: string;
-            };
-        };
-    };
+    static config: BaseConfig;
     /**
      * Get the first `MenuList` instance.
-     *
-     * @this    {MenuInterface}
-     * @returns {MenuList}
      */
     get menuList(): MenuList;
     /**
      * Get the first `MenuBtn` instance.
-     *
-     * @this    {MenuInterface}
-     * @returns {MenuBtn}
      */
     get menuBtn(): MenuBtn;
     /**
-     * @todo test breakpoint to switch between click and hover.
+     * Test which mode to use.
      */
     get shouldReactOnClick(): boolean;
     /**
      * Wether the button or the items are hovered.
-     *
-     * @returns {boolean}
      */
     get isHover(): boolean;
     /**
      * Set attributes on mounted, destroy the component if it is missing required
      * child components.
-     *
-     * @returns {void}
      */
     mounted(): void;
     /**
      * Keyboard management.
-     *
-     * @param   {import('@studiometa/js-toolkit/services/key').KeyServiceProps} options
-     * @returns {void}
      */
-    keyed({ ENTER, ESC, isUp }: import('@studiometa/js-toolkit/services/key').KeyServiceProps): void;
+    keyed({ ENTER, ESC, isUp }: KeyServiceProps): void;
     /**
-     * Toggle menu items on button click;
-     *
-     * @this    {MenuInterface}
-     * @param   {number} index
-     * @param   {MouseEvent} event
-     * @returns {void}
+     * Toggle menu items on button click.
      */
-    onMenuBtnClick(this: MenuInterface, index: number, event: MouseEvent): void;
+    onMenuBtnClick(index: number, event: MouseEvent): void;
     /**
      * Open menu items on button mouse enter.
-     *
-     * @this    {MenuInterface}
-     * @param   {number} index
-     * @returns {void}
      */
-    onMenuBtnMouseenter(this: MenuInterface, index: number): void;
+    onMenuBtnMouseenter(index: number): void;
     /**
      * Close menu items on button mouse leave.
-     *
-     * @this    {MenuInterface}
-     * @returns {void}
      */
-    onMenuBtnMouseleave(this: MenuInterface): void;
+    onMenuBtnMouseleave(): void;
     /**
      * Close menu items on button mouse leave.
-     *
-     * @this    {MenuInterface}
-     * @returns {void}
      */
-    onMenuListMouseleave(this: MenuInterface): void;
+    onMenuListMouseleave(): void;
     /**
      * Close other non-parent menu items on menu items open.
-     *
-     * @this    {MenuInterface}
-     * @param   {number} index
-     * @returns {void}
      */
-    onMenuListItemsOpen(this: MenuInterface, index: number): void;
+    onMenuListItemsOpen(index: number): void;
     /**
      * Close the menu.
-     * @returns {void}
      */
     close(): void;
     /**
      * Open the menu.
-     * @returns {void}
      */
     open(): void;
     /**
      * Toggle the menu.
-     * @returns {void}
      */
     toggle(): void;
 }
-export type MenuInterface = Menu & {
-    $children: {
-        Menu: Menu[];
-        MenuBtn: MenuBtn[];
-        MenuList: MenuList[];
-    };
-    $options: {
-        mode: 'click' | 'hover';
-    };
-};
-import { Base } from "@studiometa/js-toolkit";
-import MenuList from "./MenuList.js";
-import MenuBtn from "./MenuBtn.js";

package/molecules/Menu/Menu.js

@@ -1 +1,114 @@
-import{Base as h,isDirectChild as r,getDirectChildren as s}from"@studiometa/js-toolkit";import{nextTick as o}from"@studiometa/js-toolkit/utils";import l from"./MenuBtn.js";import c from"./MenuList.js";class n extends h{static config={name:"Menu",debug:!0,components:{MenuBtn:l,MenuList:c,Menu:n},options:{mode:{type:String,default:"click"}}};get menuList(){return s(this,"Menu","MenuList")[0]}get menuBtn(){return s(this,"Menu","MenuBtn")[0]}get shouldReactOnClick(){return this.$options.mode==="click"}get isHover(){return this.menuBtn.isHover||this.menuList.isHover}mounted(){if(!this.menuBtn||!this.menuList){this.$destroy();return}this.menuBtn.$el.setAttribute("aria-controls",this.$id),this.menuList.$el.setAttribute("id",this.$id),this.menuList.close()}keyed({ENTER:t,ESC:e,isUp:i}){if(!!i){if(e){this.close();return}if(!this.shouldReactOnClick){const u=document.activeElement===this.menuBtn.$el;t&&u&&this.toggle()}}}onMenuBtnClick(t,e){r(this,"Menu","MenuBtn",this.$children.MenuBtn[t])&&this.shouldReactOnClick&&(e.preventDefault(),this.toggle())}onMenuBtnMouseenter(t){this.$children.MenuBtn[t]===this.menuBtn&&!this.shouldReactOnClick&&this.open()}onMenuBtnMouseleave(){this.shouldReactOnClick||o(()=>{this.isHover||this.close()})}onMenuListMouseleave(){this.shouldReactOnClick||o(()=>{this.isHover||this.close()})}onMenuListItemsOpen(t){const e=this.$children.MenuList[t];this.$children.MenuList.forEach(i=>{i.$el.contains(e.$el)||i.close()})}close(){this.menuList.close()}open(){this.menuList.open()}toggle(){this.menuList.toggle()}}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 { Base, isDirectChild, getDirectChildren } from "@studiometa/js-toolkit";
+import { nextTick } from "@studiometa/js-toolkit/utils";
+import { MenuBtn } from "./MenuBtn.js";
+import { MenuList } from "./MenuList.js";
+const _Menu = class extends Base {
+  get menuList() {
+    return getDirectChildren(this, "Menu", "MenuList")[0];
+  }
+  get menuBtn() {
+    return getDirectChildren(this, "Menu", "MenuBtn")[0];
+  }
+  get shouldReactOnClick() {
+    return this.$options.mode === "click";
+  }
+  get isHover() {
+    return this.menuBtn.isHover || this.menuList.isHover;
+  }
+  mounted() {
+    if (!this.menuBtn || !this.menuList) {
+      this.$destroy();
+      return;
+    }
+    this.menuBtn.$el.setAttribute("aria-controls", this.$id);
+    this.menuList.$el.setAttribute("id", this.$id);
+    this.menuList.close();
+  }
+  keyed({ ENTER, ESC, isUp }) {
+    if (!isUp) {
+      return;
+    }
+    if (ESC) {
+      this.close();
+      return;
+    }
+    if (!this.shouldReactOnClick) {
+      const hasFocusElementWithin = document.activeElement === this.menuBtn.$el;
+      if (ENTER && hasFocusElementWithin) {
+        this.toggle();
+      }
+    }
+  }
+  onMenuBtnClick(index, event) {
+    if (isDirectChild(this, "Menu", "MenuBtn", this.$children.MenuBtn[index]) && this.shouldReactOnClick) {
+      event.preventDefault();
+      this.toggle();
+    }
+  }
+  onMenuBtnMouseenter(index) {
+    if (this.$children.MenuBtn[index] === this.menuBtn && !this.shouldReactOnClick) {
+      this.open();
+    }
+  }
+  onMenuBtnMouseleave() {
+    if (this.shouldReactOnClick) {
+      return;
+    }
+    nextTick(() => {
+      if (!this.isHover) {
+        this.close();
+      }
+    });
+  }
+  onMenuListMouseleave() {
+    if (this.shouldReactOnClick) {
+      return;
+    }
+    nextTick(() => {
+      if (!this.isHover) {
+        this.close();
+      }
+    });
+  }
+  onMenuListItemsOpen(index) {
+    const targetMenu = this.$children.MenuList[index];
+    this.$children.MenuList.forEach((menuItem) => {
+      if (!menuItem.$el.contains(targetMenu.$el)) {
+        menuItem.close();
+      }
+    });
+  }
+  close() {
+    this.menuList.close();
+  }
+  open() {
+    this.menuList.open();
+  }
+  toggle() {
+    this.menuList.toggle();
+  }
+};
+let Menu = _Menu;
+__publicField(Menu, "config", {
+  name: "Menu",
+  components: {
+    MenuBtn,
+    MenuList,
+    Menu: _Menu
+  },
+  options: {
+    mode: {
+      type: String,
+      default: "click"
+    }
+  }
+});
+export {
+  Menu
+};