mtrl 0.2.8 → 0.2.9

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

@@ -24,9 +24,28 @@ interface ItemsComponent extends BaseComponent {
 interface NavigationConfig {
   prefix?: string;
   items?: NavItemConfig[];
+  debug?: boolean;
   [key: string]: any;
 }
 
+/**
+ * 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
@@ -108,72 +127,52 @@ export const withNavItems = (config: NavigationConfig) => (component: BaseCompon
     });
   }
 
-  // Handle item clicks
-  component.element.addEventListener('click', (event: Event) => {
-    const item = (event.target as HTMLElement).closest(`.${prefix}-${NavClass.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(`.${prefix}-${NavClass.NESTED_CONTAINER}`);
-    while (parentContainer) {
-      const parentItemContainer = parentContainer.parentElement;
-      if (!parentItemContainer) break;
+    }, { passive: true });
 
-      const parentItem = parentItemContainer.querySelector(`.${prefix}-${NavClass.ITEM}`);
-      if (!parentItem) break;
-
-      const parentId = parentItem.getAttribute('data-id');
-      if (!parentId) break;
-
-      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(`.${prefix}-${NavClass.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) {
@@ -186,6 +185,76 @@ export const withNavItems = (config: NavigationConfig) => (component: BaseCompon
     };
   }
 
+  /**
+   * 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,
@@ -212,7 +281,7 @@ export const withNavItems = (config: NavigationConfig) => (component: BaseCompon
     removeItem(id: string) {
       const item = items.get(id);
       if (!item) return this;
-
+      
       // Remove all nested items first
       const nestedItems = getAllNestedItems(item.element, prefix);
       nestedItems.forEach(nestedItem => {
@@ -245,7 +314,7 @@ export const withNavItems = (config: NavigationConfig) => (component: BaseCompon
     setActive(id: string) {
       const item = items.get(id);
       if (!item || item.config.disabled) return this;
-
+      
       if (activeItem) {
         updateActiveState(activeItem.element, activeItem, false);
       }

package/src/components/navigation/navigation.ts

@@ -10,6 +10,7 @@ import {
 } from '../../core/compose/features';
 import { withAPI } from './api';
 import { withNavItems } from './features/items';
+import { withController } from './features/controller';
 import { NavigationConfig, NavigationComponent, NavVariant } from './types';
 import { 
   createBaseConfig, 
@@ -68,15 +69,21 @@ const createNavigation = (config: NavigationConfig = {}): NavigationComponent =>
   try {
     const navigation = pipe(
       createBase,
-      // First add events system
+      // First add events system - MUST be before other features that use events
       withEvents(),
       // Then add the element and other features
       withElement(getElementConfig(baseConfig)),
+      // Add core features
       withVariant(baseConfig),
       withPosition(baseConfig),
+      // Add navigation-specific features
       withNavItems(baseConfig),
+      // Add controller for event delegation AFTER items are set up
+      withController(baseConfig),
+      // Add standard component features
       withDisabled(baseConfig),
       withLifecycle(),
+      // Finally add the API - this must be last to include all features
       comp => withAPI(getApiConfig(comp))(comp)
     )(baseConfig);
 
@@ -89,10 +96,18 @@ const createNavigation = (config: NavigationConfig = {}): NavigationComponent =>
     if (baseConfig.disabled) {
       nav.disable();
     }
+    
+    // Set component variant property for component identification
+    nav.variant = baseConfig.variant;
+    
+    // Add explicit component identifier for debugging
+    nav.element.dataset.componentType = 'navigation';
+    if (baseConfig.variant) {
+      nav.element.dataset.variant = baseConfig.variant;
+    }
 
     return nav;
   } catch (error) {
-    console.error('Navigation creation error:', error instanceof Error ? error.message : String(error));
     throw new Error(`Failed to create navigation: ${error instanceof Error ? error.message : String(error)}`);
   }
 };

package/src/components/navigation/system-types.ts

@@ -0,0 +1,124 @@
+// src/components/navigation/system-types.ts
+
+import { NavigationComponent, NavItemConfig } from './types';
+
+/**
+ * Structure for navigation section with its items
+ */
+export interface NavigationSection {
+  /** Section label */
+  label: string;
+  
+  /** Section icon HTML */
+  icon?: string;
+  
+  /** Navigation items within this section */
+  items: NavItemConfig[];
+}
+
+/**
+ * Configuration for the navigation system
+ */
+export interface NavigationSystemConfig {
+  /** Item structure by section ID */
+  items: Record<string, NavigationSection>;
+  
+  /** Initial active section */
+  activeSection?: string;
+  
+  /** Initial active subsection */
+  activeSubsection?: string;
+  
+  /** Whether to animate drawer opening/closing */
+  animateDrawer?: boolean;
+  
+  /** Whether to show labels on rail */
+  showLabelsOnRail?: boolean;
+  
+  /** Whether to hide drawer when an item is clicked */
+  hideDrawerOnClick?: boolean;
+  
+  /** Delay before showing drawer on hover (ms) */
+  hoverDelay?: number;
+  
+  /** Delay before hiding drawer on mouse leave (ms) */
+  closeDelay?: number;
+  
+  /** Configuration options passed to rail component */
+  railOptions?: Record<string, any>;
+  
+  /** Configuration options passed to drawer component */
+  drawerOptions?: Record<string, any>;
+  
+  /** Enable debug logging */
+  debug?: boolean;
+}
+
+/**
+ * Event data for section change events
+ */
+export interface SectionChangeEvent {
+  /** ID of the selected section */
+  section: string;
+  
+  /** Section data */
+  sectionData: NavigationSection;
+}
+
+/**
+ * Event data for item selection events
+ */
+export interface ItemSelectEvent {
+  /** ID of the parent section */
+  section: string;
+  
+  /** ID of the selected subsection */
+  subsection: string;
+  
+  /** Selected item data */
+  item: any;
+}
+
+/**
+ * Navigation system API
+ */
+export interface NavigationSystem {
+  /** Initialize the navigation system */
+  initialize(): NavigationSystem;
+  
+  /** Clean up resources */
+  cleanup(): void;
+  
+  /** Navigate to a specific section and subsection */
+  navigateTo(section: string, subsection?: string): void;
+  
+  /** Get the rail component */
+  getRail(): NavigationComponent | null;
+  
+  /** Get the drawer component */
+  getDrawer(): NavigationComponent | null;
+  
+  /** Get the active section */
+  getActiveSection(): string | null;
+  
+  /** Get the active subsection */
+  getActiveSubsection(): string | null;
+  
+  /** Show the drawer */
+  showDrawer(): void;
+  
+  /** Hide the drawer */
+  hideDrawer(): void;
+  
+  /** Check if drawer is visible */
+  isDrawerVisible(): boolean;
+  
+  /** Configure the navigation system */
+  configure(config: Partial<NavigationSystemConfig>): NavigationSystem;
+  
+  /** Event handler for section changes */
+  onSectionChange: ((section: string, subsection?: string) => void) | null;
+  
+  /** Event handler for item selection */
+  onItemSelect: ((event: ItemSelectEvent) => void) | null;
+}