mtrl 0.2.7 → 0.2.9

package/src/components/navigation/config.ts

@@ -5,15 +5,14 @@ import {
   BaseComponentConfig 
 } from '../../core/config/component-config';
 import { NavigationConfig, BaseComponent, ApiOptions } from './types';
-import { NAV_VARIANTS, NAV_POSITIONS, NAV_BEHAVIORS } from './constants';
 
 /**
  * Default configuration for the Navigation component
  */
 export const defaultConfig: NavigationConfig = {
-  variant: NAV_VARIANTS.RAIL,
-  position: NAV_POSITIONS.LEFT,
-  behavior: NAV_BEHAVIORS.FIXED,
+  variant: 'rail',
+  position: 'left',
+  behavior: 'fixed',
   items: [],
   showLabels: true,
   scrimEnabled: false
@@ -32,16 +31,29 @@ export const createBaseConfig = (config: NavigationConfig = {}): NavigationConfi
  * @param {NavigationConfig} config - Navigation configuration
  * @returns {Object} Element configuration object for withElement
  */
-export const getElementConfig = (config: NavigationConfig) => 
-  createElementConfig(config, {
+export const getElementConfig = (config: NavigationConfig) => {
+  // Build class list - start with the variant class
+  const variantClass = config.variant ? `${config.prefix}-nav--${config.variant}` : '';
+  
+  // Add position class if specified
+  const positionClass = config.position ? `${config.prefix}-nav--${config.position}` : '';
+  
+  // Add user-provided classes
+  const userClass = config.class || '';
+  
+  // Combine all classes
+  const classNames = [variantClass, positionClass, userClass].filter(Boolean);
+  
+  return createElementConfig(config, {
     tag: 'nav',
     componentName: 'nav',
     attrs: {
       role: 'navigation',
       'aria-label': config.ariaLabel || 'Main Navigation'
     },
-    className: config.class
+    className: classNames
   });
+};
 
 /**
  * Creates API configuration for the Navigation component
@@ -50,11 +62,11 @@ export const getElementConfig = (config: NavigationConfig) =>
  */
 export const getApiConfig = (comp: BaseComponent): ApiOptions => ({
   disabled: {
-    enable: comp.disabled?.enable,
-    disable: comp.disabled?.disable
+    enable: comp.disabled?.enable || (() => {}),
+    disable: comp.disabled?.disable || (() => {})
   },
   lifecycle: {
-    destroy: comp.lifecycle?.destroy
+    destroy: comp.lifecycle?.destroy || (() => {})
   }
 });
 

package/src/components/navigation/features/controller.ts

@@ -0,0 +1,273 @@
+// src/components/navigation/features/controller.ts
+import { BaseComponent, NavClass, NavItemData } from '../types';
+
+/**
+ * Configuration interface for controller feature
+ */
+interface ControllerConfig {
+  /** Component prefix for class names */
+  prefix?: string;
+  
+  /** Debug mode flag */
+  debug?: boolean;
+  
+  /** Component name */
+  componentName?: string;
+  
+  /** Additional configuration options */
+  [key: string]: any;
+}
+
+/**
+ * Enhanced component with controller capabilities
+ */
+interface ControllerComponent extends BaseComponent {
+  /** Handler method for item click events */
+  handleItemClick: (id: string) => void;
+}
+
+/**
+ * Adds event delegation controller to a navigation component
+ * This centralizes event handling for all navigation items
+ * 
+ * @param {ControllerConfig} config - Controller configuration
+ * @returns {Function} Component enhancer function
+ */
+export const withController = (config: ControllerConfig) => (component: BaseComponent): ControllerComponent => {
+  const prefix = config.prefix || 'mtrl';
+  
+  /**
+   * Updates the active state for an item
+   * @param {HTMLElement} item - Item element to activate
+   * @param {boolean} active - Whether to make active or inactive
+   */
+  const updateItemState = (item: HTMLElement, active: boolean): void => {
+    // Safety check - ensure item exists
+    if (!item) return;
+    
+    // Determine the correct active attribute based on role
+    const role = item.getAttribute('role');
+    
+    if (active) {
+      item.classList.add(`${prefix}-${NavClass.ITEM}--active`);
+      
+      // Set appropriate attribute based on role
+      if (role === 'tab') {
+        item.setAttribute('aria-selected', 'true');
+        item.setAttribute('tabindex', '0');
+      } else if (!item.getAttribute('aria-haspopup')) {
+        // Use aria-current for navigation items that aren't expandable
+        item.setAttribute('aria-current', 'page');
+      }
+    } else {
+      item.classList.remove(`${prefix}-${NavClass.ITEM}--active`);
+      
+      // Remove appropriate attribute based on role
+      if (role === 'tab') {
+        item.setAttribute('aria-selected', 'false');
+        item.setAttribute('tabindex', '-1');
+      } else if (item.hasAttribute('aria-current')) {
+        item.removeAttribute('aria-current');
+      }
+    }
+  };
+  
+  /**
+   * Handle expandable item toggle
+   * @param {HTMLElement} item - Expandable item element
+   * @returns {boolean} Whether the item was expandable and handled
+   */
+  const handleExpandableItem = (item: HTMLElement): boolean => {
+    const isExpandable = item.getAttribute('aria-expanded') !== null;
+    if (!isExpandable) return false;
+    
+    // Toggle expanded state
+    const isExpanded = item.getAttribute('aria-expanded') === 'true';
+    item.setAttribute('aria-expanded', (!isExpanded).toString());
+    
+    // Find and toggle nested container - use flexible selectors
+    const container = item.closest(`.${prefix}-${NavClass.ITEM_CONTAINER}, .mtrl-nav-item-container`);
+    if (container) {
+      const nestedContainer = container.querySelector(
+        `.${prefix}-${NavClass.NESTED_CONTAINER}, .mtrl-nav-nested-container`
+      );
+      if (nestedContainer) {
+        nestedContainer.hidden = isExpanded;
+        
+        // Also toggle expand icon rotation if present
+        const expandIcon = item.querySelector(
+          `.${prefix}-${NavClass.EXPAND_ICON}, .mtrl-nav-expand-icon`
+        );
+        if (expandIcon && expandIcon.style) {
+          expandIcon.style.transform = isExpanded ? '' : 'rotate(90deg)';
+        }
+      }
+    }
+    
+    // For expandable items, we still emit a change event
+    const id = item.dataset.id;
+    if (id && component.emit) {
+      component.emit('expandToggle', {
+        id,
+        expanded: !isExpanded
+      });
+    }
+    
+    return true;
+  };
+  
+  // Create the enhanced component with handleItemClick method
+  const enhancedComponent: ControllerComponent = {
+    ...component,
+    
+    /**
+     * Handler method for item click events
+     * @param {string} id - ID of the clicked item
+     */
+    handleItemClick(id: string) {
+      if (!component.items) {
+        return;
+      }
+      
+      const itemData = component.items.get(id);
+      if (!itemData) {
+        return;
+      }
+      
+      // Find the currently active item by DOM query instead of relying on getActive
+      const activeElement = component.element.querySelector(`.${prefix}-${NavClass.ITEM}--active, .mtrl-nav-item--active`);
+      
+      // Check if this item is already active - prevent infinite loops
+      // if (activeElement && activeElement === itemData.element) {
+      //   return;
+      // }
+      
+      // Deactivate previous active item if found
+      if (activeElement) {
+        updateItemState(activeElement as HTMLElement, false);
+      }
+      
+      // Make sure itemData.element exists before updating
+      if (itemData.element) {
+        updateItemState(itemData.element, true);
+      }
+      
+      // Emit change event
+      if (component.emit) {
+        // Get the path to the item (for nested items)
+        const path = component.getItemPath ? component.getItemPath(id) : [];
+        
+        component.emit('change', {
+          id,
+          item: itemData,
+          previousItem: activeElement ? { 
+            element: activeElement as HTMLElement,
+            config: { id: activeElement.dataset.id } 
+          } : null,
+          path,
+          source: 'userAction'
+        });
+      }
+    }
+  };
+  
+  // Set up click event delegation for all navigation items
+  component.element.addEventListener('click', (event: Event) => {
+    const target = event.target as HTMLElement;
+    
+    // Use more flexible selectors that match actual DOM structure
+    const item = target.closest(`.${prefix}-${NavClass.ITEM}, .mtrl-nav-item`) as HTMLElement;
+    
+    if (!item) {
+      // Fallback to elements with data-id attribute
+      const itemByDataId = target.closest('[data-id]') as HTMLElement;
+      if (!itemByDataId) {
+        return;
+      }
+    }
+    
+    // Use the found item or fallback
+    const navItem = item || target.closest('[data-id]') as HTMLElement;
+    
+    if (navItem.hasAttribute('disabled') || navItem.getAttribute('aria-disabled') === 'true') {
+      return;
+    }
+    
+    // Get the ID from the data attribute
+    const id = navItem.dataset.id;
+    if (!id) {
+      return;
+    }
+    
+    // Handle expandable items first
+    if (handleExpandableItem(navItem)) {
+      return;
+    }
+    
+    // Let the enhanced component handle normal item activation
+    enhancedComponent.handleItemClick(id);
+  });
+  
+  // Add keyboard support for navigation
+  component.element.addEventListener('keydown', (event: KeyboardEvent) => {
+    // Only handle specific keys
+    if (!['Enter', ' ', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {
+      return;
+    }
+    
+    const isVertical = ['rail', 'drawer'].includes(component.variant || '');
+    const isHorizontal = ['bar'].includes(component.variant || '');
+    
+    // Handle Enter/Space for activation
+    if (event.key === 'Enter' || event.key === ' ') {
+      const item = document.activeElement as HTMLElement;
+      if (item && item.classList.contains(`${prefix}-${NavClass.ITEM}`)) {
+        event.preventDefault();
+        
+        const id = item.dataset.id;
+        if (id) {
+          item.click(); // Trigger a click event for the item
+        }
+      }
+      return;
+    }
+    
+    // Get all focusable navigation items - use flexible selector
+    const items = Array.from(
+      component.element.querySelectorAll(
+        `.${prefix}-${NavClass.ITEM}:not([disabled]):not([aria-disabled="true"]), 
+         .mtrl-nav-item:not([disabled]):not([aria-disabled="true"])`
+      )
+    ) as HTMLElement[];
+    
+    if (items.length === 0) return;
+    
+    // Find the currently focused item
+    const focusedItem = document.activeElement as HTMLElement;
+    const focusedIndex = items.indexOf(focusedItem);
+    
+    // Handle navigation keys
+    let newIndex = -1;
+    
+    if ((isVertical && (event.key === 'ArrowDown' || event.key === 'ArrowRight')) || 
+        (isHorizontal && event.key === 'ArrowRight')) {
+      newIndex = focusedIndex < 0 ? 0 : (focusedIndex + 1) % items.length;
+    } else if ((isVertical && (event.key === 'ArrowUp' || event.key === 'ArrowLeft')) || 
+               (isHorizontal && event.key === 'ArrowLeft')) {
+      newIndex = focusedIndex < 0 ? items.length - 1 : (focusedIndex - 1 + items.length) % items.length;
+    } else if (event.key === 'Home') {
+      newIndex = 0;
+    } else if (event.key === 'End') {
+      newIndex = items.length - 1;
+    }
+    
+    if (newIndex >= 0) {
+      event.preventDefault();
+      items[newIndex].focus();
+    }
+  });
+  
+  return enhancedComponent;
+};
+
+export default withController;

package/src/components/navigation/features/items.ts

@@ -1,18 +1,12 @@
 // src/components/navigation/features/items.ts
 import { createNavItem, getAllNestedItems } from '../nav-item';
-import { NavItemConfig, NavItemData } from '../types';
+import { NavItemConfig, NavItemData, BaseComponent, NavClass } from '../types';
 
-// Type definitions to help with TypeScript conversion
-interface Component {
-  element: HTMLElement;
-  emit?: (event: string, data: any) => void;
-  lifecycle?: {
-    destroy: () => void;
-  };
-  [key: string]: any;
-}
-
-interface ItemsComponent extends Component {
+/**
+ * Interface for a component with items management capabilities
+ * @internal
+ */
+interface ItemsComponent extends BaseComponent {
   items: Map<string, NavItemData>;
   addItem: (config: NavItemConfig) => ItemsComponent;
   removeItem: (id: string) => ItemsComponent;
@@ -23,15 +17,44 @@ interface ItemsComponent extends Component {
   setActive: (id: string) => ItemsComponent;
 }
 
+/**
+ * Interface for navigation configuration
+ * @internal
+ */
 interface NavigationConfig {
   prefix?: string;
   items?: NavItemConfig[];
+  debug?: boolean;
   [key: string]: any;
 }
 
-export const withNavItems = (config: NavigationConfig) => (component: Component): ItemsComponent => {
+/**
+ * Helper to get element ID or component type
+ * @internal
+ */
+function getElementId(element: HTMLElement | null, prefix: string): string | null {
+  if (!element) return null;
+  
+  // Try to get data-id
+  const id = element.getAttribute('data-id');
+  if (id) return id;
+  
+  // Try to identify by component class
+  if (element.classList.contains(`${prefix}-nav--rail`)) return 'rail';
+  if (element.classList.contains(`${prefix}-nav--drawer`)) return 'drawer';
+  
+  return null;
+}
+
+/**
+ * Adds navigation items management to a component
+ * @param {NavigationConfig} config - Navigation configuration
+ * @returns {Function} Component enhancer function
+ */
+export const withNavItems = (config: NavigationConfig) => (component: BaseComponent): ItemsComponent => {
   const items = new Map<string, NavItemData>();
   let activeItem: NavItemData | null = null;
+  const prefix = config.prefix || 'mtrl';
 
   /**
    * Recursively stores items in the items Map
@@ -43,9 +66,9 @@ export const withNavItems = (config: NavigationConfig) => (component: Component)
 
     if (itemConfig.items?.length) {
       itemConfig.items.forEach(nestedConfig => {
-        const container = item.closest(`.${config.prefix}-nav-item-container`);
+        const container = item.closest(`.${prefix}-${NavClass.ITEM_CONTAINER}`);
         if (container) {
-          const nestedContainer = container.querySelector(`.${config.prefix}-nav-nested-container`);
+          const nestedContainer = container.querySelector(`.${prefix}-${NavClass.NESTED_CONTAINER}`);
           if (nestedContainer) {
             const nestedItem = nestedContainer.querySelector(`[data-id="${nestedConfig.id}"]`) as HTMLElement;
             if (nestedItem) {
@@ -68,7 +91,7 @@ export const withNavItems = (config: NavigationConfig) => (component: Component)
     const role = item.getAttribute('role');
     
     if (active) {
-      item.classList.add(`${config.prefix}-nav-item--active`);
+      item.classList.add(`${prefix}-${NavClass.ITEM}--active`);
       
       // Set appropriate attribute based on role
       if (role === 'tab') {
@@ -79,7 +102,7 @@ export const withNavItems = (config: NavigationConfig) => (component: Component)
         item.setAttribute('aria-current', 'page');
       }
     } else {
-      item.classList.remove(`${config.prefix}-nav-item--active`);
+      item.classList.remove(`${prefix}-${NavClass.ITEM}--active`);
       
       // Remove appropriate attribute based on role
       if (role === 'tab') {
@@ -94,7 +117,7 @@ export const withNavItems = (config: NavigationConfig) => (component: Component)
   // Create initial items
   if (config.items) {
     config.items.forEach(itemConfig => {
-      const item = createNavItem(itemConfig, component.element, config.prefix || 'mtrl');
+      const item = createNavItem(itemConfig, component.element, prefix);
       storeItem(itemConfig, item);
 
       if (itemConfig.active) {
@@ -104,72 +127,52 @@ export const withNavItems = (config: NavigationConfig) => (component: Component)
     });
   }
 
-  // Handle item clicks
-  component.element.addEventListener('click', (event: Event) => {
-    const item = (event.target as HTMLElement).closest(`.${config.prefix}-nav-item`) as HTMLElement;
-    if (!item || (item as any).disabled || item.getAttribute('aria-haspopup') === 'menu') return;
-
-    const id = item.dataset.id;
-    if (!id) return;
-    
-    const itemData = items.get(id);
-    if (!itemData) return;
-
-    // Skip if this is an expandable item
-    if (item.getAttribute('aria-expanded') !== null) return;
-
-    // Store previous item before updating
-    const previousItem = activeItem;
-
-    // Update active state
-    if (activeItem) {
-      updateActiveState(activeItem.element, activeItem, false);
-    }
-
-    updateActiveState(item, itemData, true);
-    activeItem = itemData;
+  // Set up enhanced event handling for mouse events
+  if (component.emit) {
+    // Mouse over event handler
+    component.element.addEventListener('mouseover', (event: MouseEvent) => {
+      // Find the closest item with data-id
+      const target = event.target as HTMLElement;
+      const item = target.closest(`[data-id]`) as HTMLElement;
+      if (item) {
+        const id = item.dataset.id;
+        if (id) {
+          component.emit('mouseover', {
+            id,
+            clientX: event.clientX,
+            clientY: event.clientY,
+            target: item,
+            item: items.get(id)
+          });
+        }
+      }
+    }, { passive: true });
 
-    // Emit change event with item data
-    if (component.emit) {
-      component.emit('change', {
-        id,
-        item: itemData,
-        previousItem,
-        path: getItemPath(id)
+    // Mouse enter event
+    component.element.addEventListener('mouseenter', (event: MouseEvent) => {
+      const componentId = component.element.dataset.id || component.componentName || 'nav';
+      
+      component.emit('mouseenter', {
+        clientX: event.clientX,
+        clientY: event.clientY,
+        id: componentId
       });
-    }
-  });
-
-  /**
-   * Gets the path to an item (parent IDs)
-   * @param {string} id - Item ID to get path for
-   * @returns {Array<string>} Array of parent item IDs
-   */
-  const getItemPath = (id: string): string[] => {
-    const path: string[] = [];
-    let currentItem = items.get(id);
-
-    if (!currentItem) return path;
-
-    let parentContainer = currentItem.element.closest(`.${config.prefix}-nav-nested-container`);
-    while (parentContainer) {
-      const parentItemContainer = parentContainer.parentElement;
-      if (!parentItemContainer) break;
-
-      const parentItem = parentItemContainer.querySelector(`.${config.prefix}-nav-item`);
-      if (!parentItem) break;
-
-      const parentId = parentItem.getAttribute('data-id');
-      if (!parentId) break;
+    }, { passive: true });
 
-      path.unshift(parentId);
+    // Mouse leave event
+    component.element.addEventListener('mouseleave', (event: MouseEvent) => {
+      const relatedTarget = event.relatedTarget as HTMLElement;
+      const relatedTargetId = getElementId(relatedTarget, prefix);
+      const componentId = component.element.dataset.id || component.componentName || 'nav';
       
-      // Move up to next level
-      parentContainer = parentItemContainer.closest(`.${config.prefix}-nav-nested-container`);
-    }
-
-    return path;
-  };
+      component.emit('mouseleave', {
+        clientX: event.clientX,
+        clientY: event.clientY,
+        relatedTargetId,
+        id: componentId
+      });
+    });
+  }
 
   // Clean up when component is destroyed
   if (component.lifecycle) {
@@ -182,6 +185,76 @@ export const withNavItems = (config: NavigationConfig) => (component: Component)
     };
   }
 
+  /**
+   * Gets the path to an item (parent IDs and the item's own ID)
+   * @param {string} id - Item ID to get path for
+   * @returns {Array<string>} Array of parent item IDs including the item's own ID
+   */
+  const getItemPath = (id: string): string[] => {
+    // Always include the item's own ID in the path
+    const path: string[] = [id];
+    const currentItem = items.get(id);
+    
+    if (!currentItem) {
+      return path; // Still return [id] even if item not found in map
+    }
+    
+    // First, find the item container that contains this element
+    const itemContainer = currentItem.element.closest(`.${prefix}-${NavClass.ITEM_CONTAINER}`);
+    if (!itemContainer) {
+      return path;
+    }
+    
+    // Then find the parent element of the item container
+    const parentElement = itemContainer.parentElement;
+    
+    // If parent element is not a nested container, this is a root-level item
+    // Just return the item's own ID
+    if (!parentElement || !parentElement.classList.contains(`${prefix}-${NavClass.NESTED_CONTAINER}`)) {
+      return path;
+    }
+    
+    // We're dealing with a nested item - find its ancestors
+    let currentNestedContainer = parentElement;
+    
+    while (currentNestedContainer) {
+      // Find the parent item container
+      const parentItemContainer = currentNestedContainer.parentElement;
+      
+      if (!parentItemContainer || !parentItemContainer.classList.contains(`${prefix}-${NavClass.ITEM_CONTAINER}`)) {
+        break;
+      }
+      
+      // Find the parent item button/element
+      const parentItem = parentItemContainer.querySelector(`.${prefix}-${NavClass.ITEM}[data-id]`);
+      
+      if (!parentItem) {
+        break;
+      }
+      
+      const parentId = parentItem.getAttribute('data-id');
+      
+      if (!parentId) {
+        break;
+      }
+      
+      // Add to the beginning of path (since we're going up the tree)
+      // This puts ancestors before the item's own ID
+      path.unshift(parentId);
+      
+      // Move up to the next level - find the container of this parent's container
+      const grandparentElement = parentItemContainer.parentElement;
+      
+      if (!grandparentElement || !grandparentElement.classList.contains(`${prefix}-${NavClass.NESTED_CONTAINER}`)) {
+        break;
+      }
+      
+      currentNestedContainer = grandparentElement;
+    }
+    
+    return path;
+  };
+
   return {
     ...component,
     items,
@@ -189,7 +262,7 @@ export const withNavItems = (config: NavigationConfig) => (component: Component)
     addItem(itemConfig: NavItemConfig) {
       if (items.has(itemConfig.id)) return this;
 
-      const item = createNavItem(itemConfig, component.element, config.prefix || 'mtrl');
+      const item = createNavItem(itemConfig, component.element, prefix);
       storeItem(itemConfig, item);
 
       if (itemConfig.active) {
@@ -208,9 +281,9 @@ export const withNavItems = (config: NavigationConfig) => (component: Component)
     removeItem(id: string) {
       const item = items.get(id);
       if (!item) return this;
-
+      
       // Remove all nested items first
-      const nestedItems = getAllNestedItems(item.element, config.prefix || 'mtrl');
+      const nestedItems = getAllNestedItems(item.element, prefix);
       nestedItems.forEach(nestedItem => {
         const nestedId = nestedItem.dataset.id;
         if (nestedId) items.delete(nestedId);
@@ -221,7 +294,7 @@ export const withNavItems = (config: NavigationConfig) => (component: Component)
       }
 
       // Remove the entire item container
-      const container = item.element.closest(`.${config.prefix}-nav-item-container`);
+      const container = item.element.closest(`.${prefix}-${NavClass.ITEM_CONTAINER}`);
       if (container) {
         container.remove();
       }
@@ -241,7 +314,7 @@ export const withNavItems = (config: NavigationConfig) => (component: Component)
     setActive(id: string) {
       const item = items.get(id);
       if (!item || item.config.disabled) return this;
-
+      
       if (activeItem) {
         updateActiveState(activeItem.element, activeItem, false);
       }
@@ -255,9 +328,9 @@ export const withNavItems = (config: NavigationConfig) => (component: Component)
         const parentItem = items.get(parentId);
         if (parentItem) {
           const parentButton = parentItem.element;
-          const container = parentButton.closest(`.${config.prefix}-nav-item-container`);
+          const container = parentButton.closest(`.${prefix}-${NavClass.ITEM_CONTAINER}`);
           if (container) {
-            const nestedContainer = container.querySelector(`.${config.prefix}-nav-nested-container`);
+            const nestedContainer = container.querySelector(`.${prefix}-${NavClass.NESTED_CONTAINER}`);
             if (nestedContainer) {
               parentButton.setAttribute('aria-expanded', 'true');
               nestedContainer.hidden = false;