mtrl 0.2.8 → 0.3.0

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/core.ts

@@ -0,0 +1,302 @@
+// src/components/navigation/system/core.ts
+
+import { NavigationSystemState, NavigationSystemConfig, NavigationItem } from './types';
+import { isMobileDevice } from '../../../core/utils/mobile';
+import createNavigation from '../navigation';
+
+/**
+ * Update drawer content for a specific section WITHOUT changing visibility
+ * 
+ * @param state - System state
+ * @param sectionId - Section ID to display
+ * @param showDrawer - Function to show the drawer
+ * @param hideDrawer - Function to hide the drawer
+ */
+export const updateDrawerContent = (
+  state: NavigationSystemState,
+  sectionId: string,
+  showDrawer: () => void,
+  hideDrawer: () => void
+): void => {
+  if (!state.drawer || !sectionId || !state.items[sectionId]) {
+    return;
+  }
+  
+  // Get section items
+  const sectionData = state.items[sectionId];
+  const items = sectionData.items || [];
+  
+  // If no items, hide drawer and exit
+  if (items.length === 0) {
+    hideDrawer();
+    return;
+  }
+  
+  // Clear existing drawer items first using the API
+  const currentItems = state.drawer.getAllItems();
+  if (currentItems?.length > 0) {
+    currentItems.forEach((item: any) => {
+      state.drawer.removeItem(item.config.id);
+    });
+  }
+  
+  // Add new items to drawer through the API
+  items.forEach((item: NavigationItem) => {
+    state.drawer.addItem(item);
+  });
+  
+  // Show the drawer
+  showDrawer();
+};
+
+/**
+ * Creates the rail navigation component
+ * 
+ * @param state - System state
+ * @param config - System configuration
+ * @returns Rail navigation component
+ */
+export const createRailNavigation = (
+  state: NavigationSystemState,
+  config: any
+): any => {
+  // Build rail items from sections
+  const railItems = Object.keys(state.items || {}).map(sectionId => ({
+    id: sectionId,
+    label: state.items[sectionId]?.label || sectionId,
+    icon: state.items[sectionId]?.icon || '',
+    active: sectionId === state.activeSection
+  }));
+  
+  // Create the rail component
+  const rail = createNavigation({
+    variant: 'rail',
+    position: 'left',
+    showLabels: config.showLabelsOnRail,
+    items: railItems,
+    ...config.railOptions
+  });
+
+  document.body.appendChild(rail.element);
+  return rail;
+};
+
+/**
+ * Creates the drawer navigation component
+ * 
+ * @param state - System state
+ * @param config - System configuration
+ * @returns Drawer navigation component
+ */
+export const createDrawerNavigation = (
+  state: NavigationSystemState,
+  config: any
+): any => {
+  // Create the drawer component (initially empty)
+  const drawer = createNavigation({
+    variant: 'drawer',
+    position: 'left',
+    items: [], // Start empty
+    ...config.drawerOptions
+  });
+  
+  document.body.appendChild(drawer.element);
+
+  // Mark drawer with identifier
+  drawer.element.dataset.id = 'drawer';
+  
+  // IMPORTANT: Make drawer initially hidden unless explicitly expanded
+  if (!config.expanded) {
+    drawer.element.classList.add('mtrl-nav--hidden');
+    drawer.element.setAttribute('aria-hidden', 'true');
+  }
+  
+  return drawer;
+};
+
+/**
+ * Shows the drawer with mobile-specific behaviors
+ * 
+ * @param state - System state
+ * @param mobileConfig - Mobile configuration
+ */
+export const showDrawer = (
+  state: NavigationSystemState,
+  mobileConfig: any
+): void => {
+  if (!state.drawer) return;
+  
+  state.drawer.element.classList.remove('mtrl-nav--hidden');
+  state.drawer.element.setAttribute('aria-hidden', 'false');
+  
+  // Apply mobile-specific behaviors
+  if (state.isMobile) {
+    if (state.overlayElement) {
+      state.overlayElement.classList.add('active');
+      state.overlayElement.setAttribute('aria-hidden', 'false');
+    }
+    
+    // Lock body scroll if enabled
+    if (mobileConfig.lockBodyScroll) {
+      document.body.classList.add(mobileConfig.bodyLockClass);
+    }
+    
+    // Ensure close button is visible
+    if (state.closeButtonElement) {
+      state.closeButtonElement.style.display = 'flex';
+    }
+  }
+};
+
+/**
+ * Hides the drawer with mobile-specific behaviors
+ * 
+ * @param state - System state
+ * @param mobileConfig - Mobile configuration
+ */
+export const hideDrawer = (
+  state: NavigationSystemState,
+  mobileConfig: any
+): void => {
+  if (!state.drawer) return;
+  
+  state.drawer.element.classList.add('mtrl-nav--hidden');
+  state.drawer.element.setAttribute('aria-hidden', 'true');
+  
+  // Remove mobile-specific effects
+  if (state.overlayElement) {
+    state.overlayElement.classList.remove('active');
+    state.overlayElement.setAttribute('aria-hidden', 'true');
+  }
+  
+  // Unlock body scroll
+  if (mobileConfig.lockBodyScroll) {
+    document.body.classList.remove(mobileConfig.bodyLockClass);
+  }
+};
+
+/**
+ * Checks if drawer is visible
+ * 
+ * @param state - System state
+ * @returns true if drawer is visible
+ */
+export const isDrawerVisible = (
+  state: NavigationSystemState
+): boolean => {
+  if (!state.drawer) return false;
+  return !state.drawer.element.classList.contains('mtrl-nav--hidden');
+};
+
+/**
+ * Checks and updates the mobile state
+ * 
+ * @param state - System state
+ * @param mobileConfig - Mobile configuration
+ * @param setupMobileMode - Function to set up mobile mode
+ * @param teardownMobileMode - Function to tear down mobile mode
+ * @param systemApi - Reference to the public system API
+ */
+export const checkMobileState = (
+  state: NavigationSystemState,
+  mobileConfig: any,
+  setupMobileMode: () => void,
+  teardownMobileMode: () => void,
+  systemApi: any
+): void => {
+  const prevState = state.isMobile;
+  state.isMobile = window.innerWidth <= mobileConfig.breakpoint || isMobileDevice();
+  
+  // If state changed, adjust UI
+  if (prevState !== state.isMobile) {
+    if (state.isMobile) {
+      // Switched to mobile mode
+      setupMobileMode();
+    } else {
+      // Switched to desktop mode
+      teardownMobileMode();
+    }
+    
+    // Emit a view change event
+    if (systemApi.onViewChange) {
+      systemApi.onViewChange({
+        mobile: state.isMobile,
+        previousMobile: prevState,
+        width: window.innerWidth
+      });
+    }
+  }
+};
+
+/**
+ * Clean up resources when the system is destroyed
+ * 
+ * @param state - System state
+ */
+export const cleanupResources = (
+  state: NavigationSystemState
+): void => {
+  // Clean up overlay
+  if (state.overlayElement && state.overlayElement.parentNode) {
+    state.overlayElement.parentNode.removeChild(state.overlayElement);
+    state.overlayElement = null;
+  }
+  
+  // Destroy components
+  if (state.rail) {
+    state.rail.destroy();
+    state.rail = null;
+  }
+  
+  if (state.drawer) {
+    state.drawer.destroy();
+    state.drawer = null;
+  }
+  
+  // Reset state
+  state.activeSection = null;
+  state.activeSubsection = null;
+  state.mouseInDrawer = false;
+  state.mouseInRail = false;
+  state.processingChange = false;
+  state.isMobile = false;
+};
+
+/**
+ * Navigate to a specific section and subsection
+ * 
+ * @param state - System state
+ * @param section - Section ID
+ * @param subsection - Subsection ID (optional)
+ * @param silent - Whether to suppress change events
+ */
+export const navigateTo = (
+  state: NavigationSystemState,
+  section: string,
+  subsection?: string,
+  silent?: boolean
+): void => {
+  // Skip if section doesn't exist
+  if (!section || !state.items[section]) {
+    return;
+  }
+  
+  // Check if we're already on this section and subsection
+  if (state.activeSection === section && state.activeSubsection === subsection) {
+    return;
+  }
+  
+  // Update active section
+  state.activeSection = section;
+  
+  // Update rail if it exists
+  if (state.rail) {
+    state.rail.setActive(section, silent);
+  }
+  
+  // Update active subsection if specified
+  if (subsection && state.drawer) {
+    state.activeSubsection = subsection;
+    state.drawer.setActive(subsection, silent);
+  }
+};