npm - mtrl - Versions diffs - 0.3.1 → 0.3.3 - Mend

mtrl 0.3.1 → 0.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (162) hide show

package/.env +15 -0
package/CONTRIBUTING.md +62 -23
package/DOCS.md +3 -3
package/README.md +43 -20
package/TESTING.md +128 -18
package/dist/index.js +14865 -0
package/git-user-stats.js +545 -0
package/index.ts +9 -67
package/package.json +8 -3
package/src/components/badge/api.ts +15 -1
package/src/components/badge/badge.ts +43 -4
package/src/components/badge/config.ts +40 -8
package/src/components/badge/index.ts +64 -3
package/src/components/badge/types.ts +175 -33
package/src/components/button/api.ts +63 -1
package/src/components/button/button.ts +39 -3
package/src/components/button/config.ts +21 -4
package/src/components/button/index.ts +26 -1
package/src/components/button/types.ts +7 -1
package/src/components/card/api.ts +78 -9
package/src/components/card/card.ts +58 -3
package/src/components/card/config.ts +41 -11
package/src/components/card/features.ts +39 -12
package/src/components/card/index.ts +84 -19
package/src/components/card/types.ts +218 -29
package/src/components/carousel/carousel.ts +92 -28
package/src/components/carousel/constants.ts +107 -21
package/src/components/carousel/index.ts +31 -13
package/src/components/checkbox/checkbox.ts +83 -16
package/src/components/checkbox/index.ts +43 -1
package/src/components/checkbox/types.ts +219 -32
package/src/components/chips/api.ts +194 -0
package/src/components/{chip → chips/chip}/api.ts +42 -2
package/src/components/chips/chip/chip.ts +131 -0
package/src/components/{chip → chips/chip}/config.ts +3 -3
package/src/components/chips/chip/index.ts +3 -0
package/src/components/chips/chips.md +481 -0
package/src/components/chips/chips.ts +75 -0
package/src/components/chips/config.ts +109 -0
package/src/components/chips/constants.ts +61 -0
package/src/components/chips/features/chip-items.ts +33 -0
package/src/components/chips/features/container.ts +77 -0
package/src/components/chips/features/controller.ts +448 -0
package/src/components/chips/features/index.ts +5 -0
package/src/components/chips/features/label.ts +108 -0
package/src/components/chips/index.ts +11 -0
package/src/components/chips/schema.ts +61 -0
package/src/components/{chip → chips}/types.ts +203 -92
package/src/components/dialog/dialog.ts +99 -16
package/src/components/dialog/index.ts +97 -1
package/src/components/dialog/types.ts +375 -69
package/src/components/divider/config.ts +90 -6
package/src/components/divider/divider.ts +32 -2
package/src/components/divider/features.ts +26 -0
package/src/components/divider/index.ts +30 -0
package/src/components/divider/types.ts +86 -9
package/src/components/extended-fab/api.ts +53 -1
package/src/components/extended-fab/config.ts +29 -1
package/src/components/extended-fab/extended-fab.ts +28 -0
package/src/components/extended-fab/index.ts +36 -0
package/src/components/extended-fab/types.ts +458 -13
package/src/components/fab/api.ts +42 -2
package/src/components/fab/config.ts +29 -1
package/src/components/fab/fab.ts +16 -2
package/src/components/fab/index.ts +35 -0
package/src/components/fab/types.ts +374 -10
package/src/components/list/api.ts +12 -2
package/src/components/list/config.ts +21 -0
package/src/components/list/features.ts +6 -0
package/src/components/list/index.ts +56 -1
package/src/components/list/list-item.ts +46 -2
package/src/components/list/list.ts +73 -2
package/src/components/list/types.ts +172 -0
package/src/components/list/utils.ts +26 -2
package/src/components/menu/api.ts +217 -20
package/src/components/menu/config.ts +27 -0
package/src/components/menu/features/visibility.ts +55 -6
package/src/components/menu/index.ts +64 -0
package/src/components/menu/menu-item.ts +46 -3
package/src/components/menu/menu.ts +77 -1
package/src/components/menu/types.ts +404 -39
package/src/components/navigation/nav-item.ts +13 -2
package/src/components/sheet/config.ts +1 -2
package/src/components/sheet/features/gestures.ts +1 -1
package/src/components/sheet/features/position.ts +1 -2
package/src/components/sheet/features/state.ts +1 -1
package/src/components/sheet/index.ts +10 -2
package/src/components/sheet/sheet.ts +1 -2
package/src/components/sheet/types.ts +29 -1
package/src/components/slider/api.ts +1 -1
package/src/components/slider/config.ts +1 -1
package/src/components/slider/features/controller.ts +1 -1
package/src/components/slider/features/handlers.ts +1 -1
package/src/components/slider/features/states.ts +1 -1
package/src/components/slider/index.ts +12 -5
package/src/components/slider/schema.ts +1 -1
package/src/components/slider/types.ts +31 -0
package/src/components/tabs/tab-api.ts +1 -1
package/src/components/tabs/types.ts +1 -1
package/src/components/tooltip/api.ts +6 -2
package/src/components/tooltip/config.ts +9 -28
package/src/components/tooltip/index.ts +10 -1
package/src/components/tooltip/types.ts +38 -3
package/src/core/dom/create.ts +57 -51
package/src/index.ts +129 -31
package/src/styles/abstract/_mixins.scss +23 -9
package/src/styles/abstract/_variables.scss +14 -4
package/src/styles/components/_card.scss +1 -1
package/src/styles/components/_chip.scss +323 -113
package/src/styles/components/_tabs.scss +1 -1
package/src/styles/themes/_autumn.scss +3 -0
package/CLAUDE.md +0 -33
package/src/components/checkbox/constants.ts +0 -37
package/src/components/chip/chip-set.ts +0 -225
package/src/components/chip/chip.ts +0 -118
package/src/components/chip/constants.ts +0 -28
package/src/components/chip/index.ts +0 -12
package/src/components/list/constants.ts +0 -116
package/src/components/sheet/constants.ts +0 -20
package/src/components/slider/constants.ts +0 -32
package/src/components/tooltip/constants.ts +0 -27
package/test/components/badge.test.ts +0 -545
package/test/components/bottom-app-bar.test.ts +0 -303
package/test/components/button.test.ts +0 -233
package/test/components/card.test.ts +0 -560
package/test/components/carousel.test.ts +0 -951
package/test/components/checkbox.test.ts +0 -462
package/test/components/chip.test.ts +0 -692
package/test/components/datepicker.test.ts +0 -1124
package/test/components/dialog.test.ts +0 -990
package/test/components/divider.test.ts +0 -412
package/test/components/extended-fab.test.ts +0 -672
package/test/components/fab.test.ts +0 -561
package/test/components/list.test.ts +0 -365
package/test/components/menu.test.ts +0 -718
package/test/components/navigation.test.ts +0 -186
package/test/components/progress.test.ts +0 -567
package/test/components/radios.test.ts +0 -699
package/test/components/search.test.ts +0 -1135
package/test/components/segmented-button.test.ts +0 -732
package/test/components/sheet.test.ts +0 -641
package/test/components/slider.test.ts +0 -1220
package/test/components/snackbar.test.ts +0 -461
package/test/components/switch.test.ts +0 -452
package/test/components/tabs.test.ts +0 -1369
package/test/components/textfield.test.ts +0 -400
package/test/components/timepicker.test.ts +0 -592
package/test/components/tooltip.test.ts +0 -630
package/test/components/top-app-bar.test.ts +0 -566
package/test/core/dom.attributes.test.ts +0 -148
package/test/core/dom.classes.test.ts +0 -152
package/test/core/dom.events.test.ts +0 -243
package/test/core/emitter.test.ts +0 -141
package/test/core/ripple.test.ts +0 -99
package/test/core/state.store.test.ts +0 -189
package/test/core/utils.normalize.test.ts +0 -61
package/test/core/utils.object.test.ts +0 -120
package/test/setup.js +0 -371
package/test/setup.ts +0 -451
package/tsconfig.json +0 -22
package/typedoc.json +0 -28
package/typedoc.simple.json +0 -14

package/test/components/menu.test.ts DELETED Viewed

@@ -1,718 +0,0 @@
-// test/components/menu.test.ts
-import { describe, test, expect, mock, beforeEach, afterEach, beforeAll, afterAll } from 'bun:test';
-import { JSDOM } from 'jsdom';
-import type { MenuComponent, MenuConfig, MenuItemConfig, MenuPositionConfig } from '../../src/components/menu/types';
-// Import constants from utils instead of constants
-// The test was originally using constants but they're actually in utils
-import {
-  MENU_ALIGNMENT as MENU_ALIGN,
-  MENU_VERTICAL_ALIGNMENT as MENU_VERTICAL_ALIGN,
-  MENU_EVENT as MENU_EVENTS,
-  MENU_ITEM_TYPE as MENU_ITEM_TYPES
-} from '../../src/components/menu/utils';
-// IMPORTANT: Due to potential circular dependencies in the actual menu component
-// we are using a mock implementation for tests.
-// Setup jsdom environment
-let dom: JSDOM;
-let window: Window;
-let document: Document;
-let originalGlobalDocument: any;
-let originalGlobalWindow: any;
-let originalCreateElement: any;
-let globalEventListeners: Map<any, Map<string, Set<Function>>>;
-beforeAll(() => {
-  // Create a new JSDOM instance
-  dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', {
-    url: 'http://localhost/',
-    pretendToBeVisual: true
-  });
-  // Get window and document from jsdom
-  window = dom.window;
-  document = window.document;
-  // Store original globals
-  originalGlobalDocument = global.document;
-  originalGlobalWindow = global.window;
-  // Set globals to use jsdom
-  global.document = document;
-  global.window = window;
-  global.Element = window.Element;
-  global.HTMLElement = window.HTMLElement;
-  global.Event = window.Event;
-  // Store original createElement method
-  originalCreateElement = document.createElement;
-  // Initialize event listeners map
-  globalEventListeners = new Map();
-});
-afterAll(() => {
-  // Restore original globals
-  global.document = originalGlobalDocument;
-  global.window = originalGlobalWindow;
-  // Clean up jsdom
-  window.close();
-});
-// Mock DOM APIs that aren't available in the test environment
-beforeEach(() => {
-  // Mock Element.prototype methods
-  Element.prototype.getBoundingClientRect = function() {
-    return {
-      width: 100,
-      height: 100,
-      top: 0,
-      left: 0,
-      right: 100,
-      bottom: 100,
-      x: 0,
-      y: 0,
-      toJSON: () => ({})
-    };
-  };
-  Element.prototype.closest = function(selector: string) {
-    return null; // Simple mock that returns null by default
-  };
-  Element.prototype.matches = function(selector: string) {
-    return false; // Simple mock that returns false by default
-  };
-  // Replace createElement to add our custom methods
-  document.createElement = function(tag: string) {
-    const element = originalCreateElement.call(document, tag);
-    // Add closest method for our tests
-    element.closest = function(selector: string) {
-      if (selector.includes('menu-item')) {
-        return this.classList && this.classList.contains('mtrl-menu-item') ? this : null;
-      }
-      return null;
-    };
-    // Add matches method for our tests
-    element.matches = function(selector: string) {
-      if (selector === ':hover') return false;
-      return this.classList && this.classList.contains(selector.replace('.', ''));
-    };
-    // Mock the querySelectorAll method
-    element.querySelectorAll = function(selector: string) {
-      return []; // Return empty array by default
-    };
-    // Mock the querySelector method
-    element.querySelector = function(selector: string) {
-      return null; // Return null by default
-    };
-    return element;
-  };
-  // Mock window properties
-  Object.defineProperty(global.window, 'innerWidth', { value: 1024 });
-  Object.defineProperty(global.window, 'innerHeight', { value: 768 });
-  // Mock event listeners
-  globalEventListeners.clear();
-  const originalAddEventListener = Element.prototype.addEventListener;
-  Element.prototype.addEventListener = function(event: string, handler: Function) {
-    if (!globalEventListeners.has(this)) {
-      globalEventListeners.set(this, new Map());
-    }
-    if (!globalEventListeners.get(this)!.has(event)) {
-      globalEventListeners.get(this)!.set(event, new Set());
-    }
-    globalEventListeners.get(this)!.get(event)!.add(handler);
-    // Call original if it exists
-    if (originalAddEventListener) {
-      originalAddEventListener.call(this, event, handler as EventListener);
-    }
-  };
-  const originalRemoveEventListener = Element.prototype.removeEventListener;
-  Element.prototype.removeEventListener = function(event: string, handler: Function) {
-    if (globalEventListeners.has(this) &&
-        globalEventListeners.get(this)!.has(event)) {
-      globalEventListeners.get(this)!.get(event)!.delete(handler);
-    }
-    // Call original if it exists
-    if (originalRemoveEventListener) {
-      originalRemoveEventListener.call(this, event, handler as EventListener);
-    }
-  };
-  // Mock offsetHeight/offsetWidth
-  Object.defineProperty(Element.prototype, 'offsetHeight', {
-    configurable: true,
-    get: function() { return 100; }
-  });
-  Object.defineProperty(Element.prototype, 'offsetWidth', {
-    configurable: true,
-    get: function() { return 100; }
-  });
-});
-afterEach(() => {
-  // Clean up our mocks and event listeners
-  if (Element.prototype.getBoundingClientRect) {
-    // @ts-ignore - We're deliberately cleaning up a property we added
-    delete Element.prototype.getBoundingClientRect;
-  }
-  if (Element.prototype.closest) {
-    // @ts-ignore - We're deliberately cleaning up a property we added
-    delete Element.prototype.closest;
-  }
-  if (Element.prototype.matches) {
-    // @ts-ignore - We're deliberately cleaning up a property we added
-    delete Element.prototype.matches;
-  }
-  // Restore createElement
-  document.createElement = originalCreateElement;
-  // Clear event listeners
-  globalEventListeners.clear();
-});
-// Mock menu component factory
-const createMenu = (config: MenuConfig = {}): MenuComponent => {
-  // Create main element
-  const element = document.createElement('div');
-  element.className = 'mtrl-menu';
-  if (config.class) {
-    element.className += ` ${config.class}`;
-  }
-  element.setAttribute('role', 'menu');
-  // Track visibility state
-  let isVisibleState = false;
-  // Create maps for items and event handlers
-  const itemsMap = new Map<string, any>();
-  const eventHandlers: Record<string, Function[]> = {};
-  const submenus: MenuComponent[] = [];
-  // Create a menu item element
-  const createMenuItem = (item: MenuItemConfig): HTMLElement => {
-    const itemElement = document.createElement('div');
-    // Set up the item based on type
-    if (item.type === MENU_ITEM_TYPES.DIVIDER) {
-      itemElement.className = 'mtrl-menu-divider';
-      itemElement.setAttribute('role', 'separator');
-    } else {
-      itemElement.className = 'mtrl-menu-item';
-      itemElement.setAttribute('role', 'menuitem');
-      if (item.text) {
-        itemElement.textContent = item.text;
-      }
-      if (item.disabled) {
-        itemElement.setAttribute('aria-disabled', 'true');
-        itemElement.classList.add('mtrl-menu-item--disabled');
-      }
-      if (item.class) {
-        itemElement.className += ` ${item.class}`;
-      }
-      // Setup click handler for normal items
-      itemElement.addEventListener('click', () => {
-        if (!item.disabled) {
-          emit(MENU_EVENTS.SELECT, {
-            name: item.name,
-            text: item.text
-          });
-          // Hide menu after selection unless configured otherwise
-          if (!config.stayOpenOnSelect) {
-            hide();
-          }
-        }
-      });
-      // If item has children, set up submenu
-      if (item.items && item.items.length > 0) {
-        itemElement.classList.add('mtrl-menu-item--has-submenu');
-        // Create submenu for this item
-        const submenu = createMenu({
-          items: item.items,
-          parentItem: itemElement
-        });
-        submenus.push(submenu);
-        // Add hover handler to show submenu
-        itemElement.addEventListener('mouseenter', () => {
-          // Position submenu next to parent item
-          submenu.position(itemElement, {
-            align: MENU_ALIGN.RIGHT,
-            vAlign: MENU_VERTICAL_ALIGN.TOP
-          });
-          submenu.show();
-          emit(MENU_EVENTS.SUBMENU_OPEN, { name: item.name });
-        });
-        itemElement.addEventListener('mouseleave', () => {
-          submenu.hide();
-          emit(MENU_EVENTS.SUBMENU_CLOSE, { name: item.name });
-        });
-      }
-    }
-    return itemElement;
-  };
-  // Create menu list
-  const menuList = document.createElement('div');
-  menuList.className = 'mtrl-menu-list';
-  menuList.setAttribute('role', 'menu');
-  element.appendChild(menuList);
-  // Add initial items
-  if (config.items && config.items.length > 0) {
-    config.items.forEach(item => {
-      // Skip items without name (like dividers)
-      if (item.type !== MENU_ITEM_TYPES.DIVIDER) {
-        // Add to items map
-        itemsMap.set(item.name, {
-          element: createMenuItem(item),
-          config: item
-        });
-        menuList.appendChild(itemsMap.get(item.name).element);
-      } else {
-        // Just add divider directly
-        menuList.appendChild(createMenuItem(item));
-      }
-    });
-  }
-  // Show method
-  const show = (): MenuComponent => {
-    element.classList.add('mtrl-menu--visible');
-    isVisibleState = true;
-    emit(MENU_EVENTS.OPEN, {});
-    return menuComponent;
-  };
-  // Hide method
-  const hide = (): MenuComponent => {
-    element.classList.remove('mtrl-menu--visible');
-    isVisibleState = false;
-    // Hide any open submenus
-    submenus.forEach(submenu => submenu.hide());
-    emit(MENU_EVENTS.CLOSE, {});
-    return menuComponent;
-  };
-  // Position method
-  const position = (target: HTMLElement, options: MenuPositionConfig = {}): MenuComponent => {
-    const {
-      align = MENU_ALIGN.LEFT,
-      vAlign = MENU_VERTICAL_ALIGN.TOP,
-      offsetX = 0,
-      offsetY = 0
-    } = options;
-    // Get target dimensions and position
-    const targetRect = target.getBoundingClientRect();
-    // Calculate position based on alignment
-    let left = targetRect.left + offsetX;
-    let top = targetRect.top + offsetY;
-    // Adjust horizontal position based on alignment
-    if (align === MENU_ALIGN.RIGHT) {
-      left = targetRect.right - element.offsetWidth + offsetX;
-    } else if (align === MENU_ALIGN.CENTER) {
-      left = targetRect.left + (targetRect.width - element.offsetWidth) / 2 + offsetX;
-    }
-    // Adjust vertical position based on alignment
-    if (vAlign === MENU_VERTICAL_ALIGN.BOTTOM) {
-      top = targetRect.bottom - element.offsetHeight + offsetY;
-    } else if (vAlign === MENU_VERTICAL_ALIGN.MIDDLE) {
-      top = targetRect.top + (targetRect.height - element.offsetHeight) / 2 + offsetY;
-    }
-    // Set position
-    element.style.left = `${left}px`;
-    element.style.top = `${top}px`;
-    return menuComponent;
-  };
-  // Add item
-  const addItem = (item: MenuItemConfig): MenuComponent => {
-    // Skip if no name or already exists
-    if (!item.name || item.type === MENU_ITEM_TYPES.DIVIDER || itemsMap.has(item.name)) {
-      return menuComponent;
-    }
-    const itemElement = createMenuItem(item);
-    // Add to map and DOM
-    itemsMap.set(item.name, {
-      element: itemElement,
-      config: item
-    });
-    menuList.appendChild(itemElement);
-    return menuComponent;
-  };
-  // Remove item
-  const removeItem = (name: string): MenuComponent => {
-    if (itemsMap.has(name)) {
-      const itemData = itemsMap.get(name);
-      menuList.removeChild(itemData.element);
-      itemsMap.delete(name);
-    }
-    return menuComponent;
-  };
-  // Event emitter
-  const emit = (event: string, data: any): void => {
-    if (eventHandlers[event]) {
-      eventHandlers[event].forEach(handler => handler(data));
-    }
-  };
-  // Event handlers
-  const on = (event: string, handler: Function): MenuComponent => {
-    if (!eventHandlers[event]) {
-      eventHandlers[event] = [];
-    }
-    eventHandlers[event].push(handler);
-    return menuComponent;
-  };
-  const off = (event: string, handler: Function): MenuComponent => {
-    if (eventHandlers[event]) {
-      eventHandlers[event] = eventHandlers[event].filter(h => h !== handler);
-    }
-    return menuComponent;
-  };
-  // Destroy
-  const destroy = (): MenuComponent => {
-    // Clean up event handlers
-    Object.keys(eventHandlers).forEach(event => {
-      eventHandlers[event] = [];
-    });
-    // Destroy submenus
-    submenus.forEach(submenu => submenu.destroy());
-    // Remove from DOM
-    if (element.parentNode) {
-      element.parentNode.removeChild(element);
-    }
-    return menuComponent;
-  };
-  // Component interface
-  const menuComponent: MenuComponent = {
-    element,
-    show,
-    hide,
-    isVisible: () => isVisibleState,
-    position,
-    addItem,
-    removeItem,
-    getItems: () => itemsMap,
-    on,
-    off,
-    destroy
-  };
-  return menuComponent;
-};
-describe('Menu Component', () => {
-  // Sample menu items for testing
-  const testItems: MenuItemConfig[] = [
-    {
-      name: 'copy',
-      text: 'Copy'
-    },
-    {
-      name: 'paste',
-      text: 'Paste'
-    },
-    {
-      type: 'divider'
-    } as MenuItemConfig,
-    {
-      name: 'delete',
-      text: 'Delete',
-      disabled: true
-    }
-  ];
-  // Sample nested menu items
-  const nestedTestItems: MenuItemConfig[] = [
-    {
-      name: 'file',
-      text: 'File',
-      items: [
-        {
-          name: 'new',
-          text: 'New'
-        },
-        {
-          name: 'open',
-          text: 'Open'
-        }
-      ]
-    },
-    {
-      name: 'edit',
-      text: 'Edit',
-      items: [
-        {
-          name: 'copy',
-          text: 'Copy'
-        },
-        {
-          name: 'paste',
-          text: 'Paste'
-        }
-      ]
-    }
-  ];
-  test('should create a menu element', () => {
-    const menu = createMenu();
-    expect(menu.element).toBeDefined();
-    expect(menu.element.tagName).toBe('DIV');
-    expect(menu.element.className).toContain('mtrl-menu');
-    expect(menu.element.getAttribute('role')).toBe('menu');
-  });
-  test('should apply custom class', () => {
-    const customClass = 'custom-menu';
-    const menu = createMenu({
-      class: customClass
-    });
-    expect(menu.element.className).toContain(customClass);
-  });
-  test('should add initial items', () => {
-    const menu = createMenu({
-      items: testItems
-    });
-    // Check if items methods exist
-    expect(typeof menu.getItems).toBe('function');
-    // Get items and verify we have a Map
-    const items = menu.getItems();
-    expect(items instanceof Map).toBe(true);
-    // Verify item names in map
-    expect(items.has('copy')).toBe(true);
-    expect(items.has('paste')).toBe(true);
-    expect(items.has('delete')).toBe(true);
-  });
-  test('should have show/hide methods', () => {
-    const menu = createMenu();
-    // Check for API methods
-    expect(typeof menu.show).toBe('function');
-    expect(typeof menu.hide).toBe('function');
-    expect(typeof menu.isVisible).toBe('function');
-    // Test visibility state
-    expect(menu.isVisible()).toBe(false);
-    // Show menu
-    menu.show();
-    expect(menu.isVisible()).toBe(true);
-    expect(menu.element.classList.contains('mtrl-menu--visible')).toBe(true);
-    // Hide menu
-    menu.hide();
-    expect(menu.isVisible()).toBe(false);
-  });
-  test('should have positioning methods', () => {
-    const menu = createMenu();
-    const target = document.createElement('button');
-    // Check for API method
-    expect(typeof menu.position).toBe('function');
-    // Test with different alignments
-    const positionConfigs: MenuPositionConfig[] = [
-      { align: MENU_ALIGN.LEFT, vAlign: MENU_VERTICAL_ALIGN.TOP },
-      { align: MENU_ALIGN.RIGHT, vAlign: MENU_VERTICAL_ALIGN.BOTTOM },
-      { align: MENU_ALIGN.CENTER, vAlign: MENU_VERTICAL_ALIGN.MIDDLE }
-    ];
-    positionConfigs.forEach(config => {
-      try {
-        menu.position(target, config);
-        // If we reach here, no error was thrown
-        expect(true).toBe(true);
-      } catch (error) {
-        // If an error occurs, the test should fail
-        expect(error).toBeUndefined();
-      }
-    });
-  });
-  test('should add item dynamically', () => {
-    const menu = createMenu();
-    // Check for API method
-    expect(typeof menu.addItem).toBe('function');
-    // Test adding an item
-    const newItem: MenuItemConfig = {
-      name: 'newItem',
-      text: 'New Item'
-    };
-    menu.addItem(newItem);
-    // Verify item was added
-    const items = menu.getItems();
-    expect(items.has('newItem')).toBe(true);
-  });
-  test('should remove item dynamically', () => {
-    const menu = createMenu({
-      items: testItems
-    });
-    // Check for API method
-    expect(typeof menu.removeItem).toBe('function');
-    // Test removing an item
-    menu.removeItem('copy');
-    // Verify item was removed
-    const items = menu.getItems();
-    expect(items.has('copy')).toBe(false);
-  });
-  test('should register event handlers', () => {
-    const menu = createMenu();
-    // Check for API methods
-    expect(typeof menu.on).toBe('function');
-    expect(typeof menu.off).toBe('function');
-    // Create a mock handler
-    const mockHandler = mock(() => {});
-    // Register handler
-    menu.on(MENU_EVENTS.SELECT, mockHandler);
-    // We can't easily test if the handler is called in this environment
-    // But we can check that the method works without error
-    expect(mockHandler.mock.calls.length).toBe(0);
-    // Unregister handler
-    menu.off(MENU_EVENTS.SELECT, mockHandler);
-  });
-  test('should create nested menus for items with children', () => {
-    // This test would be more complex in a real environment
-    // For now, just verify the basic menu creation works with nested items
-    const menu = createMenu({
-      items: nestedTestItems
-    });
-    // Verify parent items exist
-    const items = menu.getItems();
-    expect(items.has('file')).toBe(true);
-    expect(items.has('edit')).toBe(true);
-    // We can't easily test the submenu creation here
-    // But we can check that the parent items are created without error
-  });
-  test('should properly clean up resources on destroy', () => {
-    const menu = createMenu();
-    // Check for API method
-    expect(typeof menu.destroy).toBe('function');
-    const parentElement = document.createElement('div');
-    parentElement.appendChild(menu.element);
-    // Destroy the component
-    menu.destroy();
-    // Check if element was removed
-    expect(parentElement.children.length).toBe(0);
-  });
-  test('should support keyboard navigation', () => {
-    // Skip detailed keyboard navigation tests due to test environment limitations
-    // Just verify the API methods exist
-    const menu = createMenu();
-    // Show the menu to initialize keyboard handlers
-    menu.show();
-    // In a real environment, we would dispatch keydown events and check results
-    // But here we just verify the basic setup happens without errors
-    // Hide and clean up
-    menu.hide();
-  });
-  test('should handle outside clicks', () => {
-    // This would typically close the menu
-    // We can't fully test this behavior in the current environment
-    const menu = createMenu();
-    menu.show();
-    // In a real environment, we would:
-    // 1. Create a click event outside the menu
-    // 2. Dispatch it
-    // 3. Verify menu is hidden
-    // For now, just ensure our menu API method is called without error
-    menu.hide();
-  });
-});