mtrl 0.2.7 → 0.2.9

package/src/components/menu/features/items-manager.ts

@@ -1,6 +1,6 @@
 // src/components/menu/features/items-manager.ts
 import { createMenuItem } from '../menu-item';
-import { MENU_EVENTS } from '../constants';
+import { MENU_EVENT } from '../utils';
 import { BaseComponent, MenuConfig, MenuItemConfig, MenuItemData } from '../types';
 
 interface SubmenuMap {
@@ -63,8 +63,8 @@ export const withItemsManager = (config: MenuConfig) => (component: BaseComponen
     });
 
     // Handle submenu selection
-    submenu.on?.(MENU_EVENTS.SELECT, (detail: any) => {
-      component.emit?.(MENU_EVENTS.SELECT, {
+    submenu.on?.(MENU_EVENT.SELECT, (detail: any) => {
+      component.emit?.(MENU_EVENT.SELECT, {
         name: `${name}:${detail.name}`,
         text: detail.text,
         path: [name, detail.name]
@@ -116,7 +116,7 @@ export const withItemsManager = (config: MenuConfig) => (component: BaseComponen
       });
 
       // Emit submenu open event
-      component.emit?.(MENU_EVENTS.SUBMENU_OPEN, { name });
+      component.emit?.(MENU_EVENT.SUBMENU_OPEN, { name });
     }
   };
 
@@ -143,7 +143,7 @@ export const withItemsManager = (config: MenuConfig) => (component: BaseComponen
     activeSubmenu = null;
 
     // Emit submenu close event
-    component.emit?.(MENU_EVENTS.SUBMENU_CLOSE, { name });
+    component.emit?.(MENU_EVENT.SUBMENU_CLOSE, { name });
   };
 
   /**
@@ -160,7 +160,7 @@ export const withItemsManager = (config: MenuConfig) => (component: BaseComponen
     
     // Cancel any pending close timer for this item
     if (closeTimers.has(name)) {
-      window.clearTimeout(closeTimers.get(name));
+      window.clearTimeout(closeTimers.get(name)!);
       closeTimers.delete(name);
     }
     
@@ -194,7 +194,7 @@ export const withItemsManager = (config: MenuConfig) => (component: BaseComponen
     if (submenu && submenu.element) {
       // Cancel any existing close timer for this item
       if (closeTimers.has(name)) {
-        window.clearTimeout(closeTimers.get(name));
+        window.clearTimeout(closeTimers.get(name)!);
       }
 
       // Set a new close timer
@@ -254,7 +254,7 @@ export const withItemsManager = (config: MenuConfig) => (component: BaseComponen
     // For regular items, emit select event
     const name = item.getAttribute('data-name');
     if (name) {
-      component.emit?.(MENU_EVENTS.SELECT, { name, text: item.textContent });
+      component.emit?.(MENU_EVENT.SELECT, { name, text: item.textContent });
       // Hide menu after selection unless configured otherwise
       if (!config.stayOpenOnSelect) {
         component.hide?.();
@@ -430,7 +430,7 @@ export const withItemsManager = (config: MenuConfig) => (component: BaseComponen
 
     /**
      * Gets all registered items
-     * @returns {Map<string, MenuItemConfig>} Map of item names to configurations
+     * @returns {Map<string, MenuItemData>} Map of item names to data
      */
     getItems(): Map<string, MenuItemData> {
       const result = new Map<string, MenuItemData>();

package/src/components/menu/features/positioning.ts

@@ -1,6 +1,6 @@
 // src/components/menu/features/positioning.ts
 import { BaseComponent, MenuPositionConfig, MenuPosition } from '../types';
-import { MENU_ALIGN, MENU_VERTICAL_ALIGN } from '../constants';
+import { MENU_ALIGNMENT, MENU_VERTICAL_ALIGNMENT } from '../utils';
 
 /**
  * Positions a menu element relative to a target element
@@ -34,8 +34,8 @@ export const positionMenu = (
   menuElement.style.opacity = originalOpacity;
 
   const {
-    align = MENU_ALIGN.LEFT,
-    vAlign = MENU_VERTICAL_ALIGN.BOTTOM,
+    align = MENU_ALIGNMENT.LEFT,
+    vAlign = MENU_VERTICAL_ALIGNMENT.BOTTOM,
     offsetX = 0,
     offsetY = 0
   } = options;
@@ -44,16 +44,16 @@ export const positionMenu = (
   let top = targetRect.bottom + offsetY;
 
   // Handle horizontal alignment
-  if (align === MENU_ALIGN.RIGHT) {
+  if (align === MENU_ALIGNMENT.RIGHT) {
     left = targetRect.right - menuRect.width + offsetX;
-  } else if (align === MENU_ALIGN.CENTER) {
+  } else if (align === MENU_ALIGNMENT.CENTER) {
     left = targetRect.left + (targetRect.width - menuRect.width) / 2 + offsetX;
   }
 
   // Handle vertical alignment
-  if (vAlign === MENU_VERTICAL_ALIGN.TOP) {
+  if (vAlign === MENU_VERTICAL_ALIGNMENT.TOP) {
     top = targetRect.top - menuRect.height + offsetY;
-  } else if (vAlign === MENU_VERTICAL_ALIGN.MIDDLE) {
+  } else if (vAlign === MENU_VERTICAL_ALIGNMENT.MIDDLE) {
     top = targetRect.top + (targetRect.height - menuRect.height) / 2 + offsetY;
   }
 

package/src/components/menu/features/visibility.ts

@@ -1,6 +1,6 @@
 // src/components/menu/features/visibility.ts
 import { BaseComponent, MenuConfig } from '../types';
-import { MENU_EVENTS } from '../constants';
+import { MENU_EVENT, MENU_CLASSES } from '../utils';
 
 /**
  * Adds visibility management functionality to a menu component
@@ -56,11 +56,11 @@ export const withVisibility = (config: MenuConfig) => (component: BaseComponent)
       // Force a reflow before adding the visible class for animation
       // eslint-disable-next-line no-void
       void component.element.offsetHeight;
-      component.element.classList.add(`${prefix}-menu--visible`);
+      component.element.classList.add(`${prefix}-${MENU_CLASSES.VISIBLE}`);
       component.element.setAttribute('aria-hidden', 'false');
 
       // Emit open event
-      component.emit?.(MENU_EVENTS.OPEN, {});
+      component.emit?.(MENU_EVENT.OPEN, {});
 
       return this;
     },
@@ -92,7 +92,7 @@ export const withVisibility = (config: MenuConfig) => (component: BaseComponent)
       }
 
       // Hide the menu with visual indication first
-      component.element.classList.remove(`${prefix}-menu--visible`);
+      component.element.classList.remove(`${prefix}-${MENU_CLASSES.VISIBLE}`);
       component.element.setAttribute('aria-hidden', 'true');
 
       // Define a reliable cleanup function
@@ -123,7 +123,7 @@ export const withVisibility = (config: MenuConfig) => (component: BaseComponent)
       setTimeout(cleanupElement, 300);
 
       // Emit close event
-      component.emit?.(MENU_EVENTS.CLOSE, {});
+      component.emit?.(MENU_EVENT.CLOSE, {});
 
       return this;
     },
@@ -145,7 +145,7 @@ export const withVisibility = (config: MenuConfig) => (component: BaseComponent)
     if (!isVisible) return;
 
     // Store the opening button if available
-    const openingButton = config.openingButton?.element;
+    const origin = config.origin?.element;
 
     // Check if click is outside the menu but not on the opening button
     const clickedElement = event.target as Node;
@@ -156,7 +156,7 @@ export const withVisibility = (config: MenuConfig) => (component: BaseComponent)
     }
 
     // Don't close if the click is on the opening button (it will handle opening/closing)
-    if (openingButton && (openingButton === clickedElement || openingButton.contains(clickedElement))) {
+    if (origin && (origin === clickedElement || origin.contains(clickedElement))) {
       return;
     }
 

package/src/components/menu/index.ts

@@ -1,14 +1,12 @@
 // src/components/menu/index.ts
-export { default } from './menu'
-export {
-  MENU_ALIGN,
-  MENU_VERTICAL_ALIGN,
-  MENU_ITEM_TYPES,
-  MENU_EVENTS
-} from './constants'
+export { default } from './menu';
 export {
   MenuConfig,
   MenuComponent,
   MenuItemConfig,
-  MenuPositionConfig
-} from './types'
+  MenuPositionConfig,
+  MenuAlign,
+  MenuVerticalAlign,
+  MenuItemType,
+  MenuEvent
+} from './types';

package/src/components/menu/menu-item.ts

@@ -1,6 +1,6 @@
 // src/components/menu/menu-item.ts
 import { MenuItemConfig } from './types';
-import { MENU_ITEM_TYPES } from './constants';
+import { MENU_ITEM_TYPE, getMenuClass } from './utils';
 
 /**
  * Creates a menu item element
@@ -10,10 +10,10 @@ import { MENU_ITEM_TYPES } from './constants';
  */
 export const createMenuItem = (itemConfig: MenuItemConfig, prefix: string): HTMLElement => {
   const item = document.createElement('li');
-  item.className = `${prefix}-menu-item`;
+  item.className = `${prefix}-${getMenuClass('ITEM')}`;
 
-  if (itemConfig.type === MENU_ITEM_TYPES.DIVIDER) {
-    item.className = `${prefix}-menu-divider`;
+  if (itemConfig.type === MENU_ITEM_TYPE.DIVIDER) {
+    item.className = `${prefix}-${getMenuClass('DIVIDER')}`;
     return item;
   }
 
@@ -23,7 +23,7 @@ export const createMenuItem = (itemConfig: MenuItemConfig, prefix: string): HTML
 
   if (itemConfig.disabled) {
     item.setAttribute('aria-disabled', 'true');
-    item.className += ` ${prefix}-menu-item--disabled`;
+    item.className += ` ${prefix}-${getMenuClass('ITEM')}--disabled`;
   }
 
   if (itemConfig.name) {
@@ -33,7 +33,7 @@ export const createMenuItem = (itemConfig: MenuItemConfig, prefix: string): HTML
   item.textContent = itemConfig.text || '';
 
   if (itemConfig.items?.length) {
-    item.className += ` ${prefix}-menu-item--submenu`;
+    item.className += ` ${prefix}-${getMenuClass('ITEM')}--submenu`;
     item.setAttribute('aria-haspopup', 'true');
     item.setAttribute('aria-expanded', 'false');
     // We don't need to add a submenu indicator as it's handled by CSS ::after

package/src/components/menu/menu.ts

@@ -18,6 +18,28 @@ import {
  * Creates a new Menu component
  * @param {MenuConfig} config - Menu configuration
  * @returns {MenuComponent} Menu component instance
+ * 
+ * @example
+ * ```typescript
+ * // Create a basic menu with items
+ * const menu = createMenu({
+ *   items: [
+ *     { name: 'item1', text: 'Option 1' },
+ *     { name: 'item2', text: 'Option 2' },
+ *     { type: 'divider' },
+ *     { name: 'item3', text: 'Option 3' }
+ *   ]
+ * });
+ * 
+ * // Show the menu positioned relative to a button
+ * const button = document.getElementById('menuButton');
+ * menu.position(button).show();
+ * 
+ * // Listen for item selection
+ * menu.on('select', (event) => {
+ *   console.log(`Selected: ${event.name}`);
+ * });
+ * ```
  */
 const createMenu = (config: MenuConfig = {}): MenuComponent => {
   const baseConfig = createBaseConfig(config);

package/src/components/menu/types.ts

@@ -1,9 +1,28 @@
 // src/components/menu/types.ts
-import { 
-  MENU_ALIGN, 
-  MENU_VERTICAL_ALIGN, 
-  MENU_ITEM_TYPES 
-} from './constants';
+
+/**
+ * Menu alignment options
+ * @category Components
+ */
+export type MenuAlign = 'left' | 'right' | 'center';
+
+/**
+ * Menu vertical alignment options
+ * @category Components
+ */
+export type MenuVerticalAlign = 'top' | 'bottom' | 'middle';
+
+/**
+ * Menu item types
+ * @category Components
+ */
+export type MenuItemType = 'item' | 'divider';
+
+/**
+ * Menu events
+ * @category Components
+ */
+export type MenuEvent = 'select' | 'open' | 'close' | 'submenuOpen' | 'submenuClose';
 
 /**
  * Menu item configuration
@@ -16,7 +35,7 @@ export interface MenuItemConfig {
   text: string;
   
   /** Type of menu item */
-  type?: keyof typeof MENU_ITEM_TYPES | string;
+  type?: MenuItemType | string;
   
   /** Whether the item is disabled */
   disabled?: boolean;
@@ -33,10 +52,10 @@ export interface MenuItemConfig {
  */
 export interface MenuPositionConfig {
   /** Horizontal alignment */
-  align?: keyof typeof MENU_ALIGN | string;
+  align?: MenuAlign | string;
   
   /** Vertical alignment */
-  vAlign?: keyof typeof MENU_VERTICAL_ALIGN | string;
+  vAlign?: MenuVerticalAlign | string;
   
   /** Horizontal offset in pixels */
   offsetX?: number;
@@ -94,8 +113,8 @@ export interface MenuConfig {
   /** Whether to keep menu open after selection */
   stayOpenOnSelect?: boolean;
   
-  /** Button element that opens the menu */
-  openingButton?: HTMLElement | { element: HTMLElement };
+  /** Orgin element that opens the menu */
+  origin?: HTMLElement | { element: HTMLElement };
   
   /** Parent item element (for submenus) */
   parentItem?: HTMLElement;

package/src/components/menu/utils.ts

@@ -0,0 +1,67 @@
+// src/components/menu/utils.ts
+
+/**
+ * Menu alignment constants for internal use
+ * @internal
+ */
+export const MENU_ALIGNMENT = {
+  LEFT: 'left',
+  RIGHT: 'right',
+  CENTER: 'center'
+};
+
+/**
+ * Menu vertical alignment constants for internal use
+ * @internal
+ */
+export const MENU_VERTICAL_ALIGNMENT = {
+  TOP: 'top',
+  BOTTOM: 'bottom',
+  MIDDLE: 'middle'
+};
+
+/**
+ * Menu item types for internal use
+ * @internal
+ */
+export const MENU_ITEM_TYPE = {
+  ITEM: 'item',
+  DIVIDER: 'divider'
+};
+
+/**
+ * Menu events for internal use
+ * @internal
+ */
+export const MENU_EVENT = {
+  SELECT: 'select',
+  OPEN: 'open',
+  CLOSE: 'close',
+  SUBMENU_OPEN: 'submenuOpen',
+  SUBMENU_CLOSE: 'submenuClose'
+};
+
+/**
+ * Menu CSS classes for internal use
+ * @internal
+ */
+export const MENU_CLASSES = {
+  ROOT: 'menu',
+  ITEM: 'menu-item',
+  ITEM_CONTAINER: 'menu-item-container',
+  LIST: 'menu-list',
+  DIVIDER: 'menu-divider',
+  SUBMENU: 'menu--submenu',
+  VISIBLE: 'menu--visible',
+  DISABLED: 'menu--disabled'
+};
+
+/**
+ * Gets a class name for menu elements
+ * @param {string} element - Element name from MENU_CLASSES
+ * @returns {string} The class name
+ * @internal
+ */
+export const getMenuClass = (element: keyof typeof MENU_CLASSES): string => {
+  return MENU_CLASSES[element];
+};

package/src/components/navigation/api.ts

@@ -1,107 +1,142 @@
-// src/components/button/api.ts
-import { ButtonComponent } from './types';
-
-interface ApiOptions {
-  disabled: {
-    enable: () => void;
-    disable: () => void;
-  };
-  lifecycle: {
-    destroy: () => void;
-  };
-}
-
-interface ComponentWithElements {
-  element: HTMLElement;
-  text: {
-    setText: (content: string) => any;
-    getText: () => string;
-    getElement: () => HTMLElement | null;
-  };
-  icon: {
-    setIcon: (html: string) => any;
-    getIcon: () => string;
-    getElement: () => HTMLElement | null;
-  };
-  getClass: (name: string) => string;
-}
+// src/components/navigation/api.ts
+import { NavigationComponent, NavItemConfig, NavItemData, BaseComponent, ApiOptions } from './types';
 
 /**
- * Enhances a button component with API methods
+ * Enhances a component with navigation-specific API methods
  * @param {ApiOptions} options - API configuration options
  * @returns {Function} Higher-order function that adds API methods to component
- * @internal This is an internal utility for the Button component
  */
-export const withAPI = ({ disabled, lifecycle }: ApiOptions) => 
-  (component: ComponentWithElements): ButtonComponent => ({
-    ...component as any,
-    element: component.element as HTMLButtonElement,
+export const withAPI = (options: ApiOptions) => 
+  (component: BaseComponent): NavigationComponent => {
     
-    getValue: () => component.element.value,
-    
-    setValue(value: string) {
-      component.element.value = value;
-      return this;
-    },
-    
-    enable() {
-      disabled.enable();
-      return this;
-    },
-    
-    disable() {
-      disabled.disable();
-      return this;
-    },
-    
-    setText(content: string) {
-      component.text.setText(content);
-      this.updateCircularStyle();
+    const navComponent = {
+      ...component,
+      element: component.element,
+      items: component.items || new Map(),
+      
+      // Basic item operations
+      addItem(config: NavItemConfig): NavigationComponent {
+        if (typeof component.addItem === 'function') {
+          component.addItem(config);
+        }
+        return this;
+      },
+      
+      removeItem(id: string): NavigationComponent {
+        if (typeof component.removeItem === 'function') {
+          component.removeItem(id);
+        }
+        return this;
+      },
+      
+      getItem(id: string): NavItemData | undefined {
+        if (typeof component.getItem === 'function') {
+          return component.getItem(id);
+        }
+        return this.items.get(id);
+      },
+      
+      getAllItems(): NavItemData[] {
+        if (typeof component.getAllItems === 'function') {
+          return component.getAllItems();
+        }
+        return Array.from(this.items.values());
+      },
+      
+      // Path and active item management
+      getActive(): NavItemData | null {
+        if (typeof component.getActive === 'function') {
+          return component.getActive();
+        }
+        return null;
+      },
+      
+      getItemPath(id: string): string[] {
+        if (typeof component.getItemPath === 'function') {
+          return component.getItemPath(id);
+        }
+        return [];
+      },
       
-      // If removing text from a button with an icon, ensure it has an accessible name
-      if (!content && component.icon.getElement()) {
-        if (!this.element.getAttribute('aria-label')) {
-          const className = this.element.className.split(' ')
-            .find(cls => !cls.startsWith(`${component.getClass('button')}`));
-          
-          if (className) {
-            this.element.setAttribute('aria-label', className);
+      setActive(id: string, silent): NavigationComponent {
+        // Use the controller if available for consistent handling
+        if (typeof component.handleItemClick === 'function') {
+          component.handleItemClick(id);
+        } else if (typeof component.setActive === 'function') {
+          component.setActive(id);
+        } else {
+          // Fallback if setActive is not available
+          const item = this.items.get(id);
+          if (item && item.element) {
+            // Emit a change event to propagate the state change
+            if (component.emit) {
+              component.emit('change', {
+                id,
+                item,
+                source: 'api'
+              });
+            }
           }
         }
-      }
+        return this;
+      },
       
-      return this;
-    },
-    
-    getText() {
-      return component.text.getText();
-    },
-    
-    setIcon(icon: string) {
-      component.icon.setIcon(icon);
-      this.updateCircularStyle();
-      return this;
-    },
-    
-    getIcon() {
-      return component.icon.getIcon();
-    },
-    
-    setAriaLabel(label: string) {
-      component.element.setAttribute('aria-label', label);
-      return this;
-    },
-    
-    destroy() {
-      lifecycle.destroy();
-    },
-    
-    updateCircularStyle() {
-      const hasText = component.text.getText();
-      if (!hasText && component.icon.getElement()) {
-        component.element.classList.add(`${component.getClass('button')}--circular`);
-      } else {
-        component.element.classList.remove(`${component.getClass('button')}--circular`);
+      // Navigation state management
+      enable(): NavigationComponent {
+        if (options.disabled.enable) {
+          options.disabled.enable();
+        }
+        return this;
+      },
+      
+      disable(): NavigationComponent {
+        if (options.disabled.disable) {
+          options.disabled.disable();
+        }
+        return this;
+      },
+      
+      expand(): NavigationComponent {
+        this.element.classList.remove(`${this.element.className.split(' ')[0]}--hidden`);
+        this.element.setAttribute('aria-hidden', 'false');
+        
+        if (component.emit) {
+          component.emit('expanded', { source: 'api' });
+        }
+        return this;
+      },
+      
+      collapse(): NavigationComponent {
+        this.element.classList.add(`${this.element.className.split(' ')[0]}--hidden`);
+        this.element.setAttribute('aria-hidden', 'true');
+        
+        if (component.emit) {
+          component.emit('collapsed', { source: 'api' });
+        }
+        return this;
+      },
+      
+      isExpanded(): boolean {
+        return !this.element.classList.contains(`${this.element.className.split(' ')[0]}--hidden`);
+      },
+      
+      toggle(): NavigationComponent {
+        return this.isExpanded() ? this.collapse() : this.expand();
+      },
+      // on: component.on,
+      // off: component.off,
+      // emit: component.emit,
+      
+      // Destruction
+      destroy(): void {
+        if (options.lifecycle.destroy) {
+          options.lifecycle.destroy();
+        }
       }
-    }
-  });
+    };
+    
+    // Return the enhanced component
+    return navComponent;
+  };
+
+export default withAPI;