mtrl 0.2.7 → 0.2.9

package/src/components/navigation/index.ts

@@ -1,11 +1,5 @@
 // src/components/navigation/index.ts
 export { default } from './navigation'
-export {
-  NAV_VARIANTS,
-  NAV_POSITIONS,
-  NAV_BEHAVIORS,
-  NAV_STATES
-} from './constants'
 export {
   NavigationConfig,
   NavigationComponent,

package/src/components/navigation/nav-item.ts

@@ -1,17 +1,5 @@
 // src/components/navigation/nav-item.ts
-
-// Simple interface for NavItemConfig if not imported
-interface NavItemConfig {
-  id: string;
-  icon?: string;
-  label?: string;
-  badge?: string;
-  disabled?: boolean;
-  active?: boolean;
-  expanded?: boolean;
-  items?: NavItemConfig[];
-  [key: string]: any;
-}
+import { NavItemConfig, NavClass } from './types';
 
 /**
  * Creates an expand/collapse icon element
@@ -20,7 +8,7 @@ interface NavItemConfig {
  */
 export const createExpandIcon = (prefix: string): HTMLElement => {
   const icon = document.createElement('span');
-  icon.className = `${prefix}-nav-expand-icon`;
+  icon.className = `${prefix}-${NavClass.EXPAND_ICON}`;
   icon.innerHTML = `
     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
       <polyline points="9 18 15 12 9 6"></polyline>
@@ -42,7 +30,7 @@ export const createNestedContainer = (
   createItem: (config: NavItemConfig, container: HTMLElement, prefix: string) => HTMLElement
 ): HTMLElement => {
   const container = document.createElement('div');
-  container.className = `${prefix}-nav-nested-container`;
+  container.className = `${prefix}-${NavClass.NESTED_CONTAINER}`;
   
   // Use appropriate role for nested menu
   container.setAttribute('role', 'menu');
@@ -68,7 +56,7 @@ export const createNavItem = (
   prefix: string
 ): HTMLElement => {
   const itemContainer = document.createElement('div');
-  itemContainer.className = `${prefix}-nav-item-container`;
+  itemContainer.className = `${prefix}-${NavClass.ITEM_CONTAINER}`;
 
   // Determine if parent container uses tabs or menu role pattern
   const isMenuContext = container.getAttribute('role') === 'menu';
@@ -77,7 +65,7 @@ export const createNavItem = (
   
   // Create the item element
   const itemElement = document.createElement('button');
-  itemElement.className = `${prefix}-nav-item`;
+  itemElement.className = `${prefix}-${NavClass.ITEM}`;
   itemElement.type = 'button'; // Ensure it's a button type for proper behavior
   
   // Set appropriate role based on context and items
@@ -114,7 +102,7 @@ export const createNavItem = (
   // Add icon if provided
   if (config.icon) {
     const icon = document.createElement('span');
-    icon.className = `${prefix}-nav-item-icon`;
+    icon.className = `${prefix}-${NavClass.ICON}`;
     icon.innerHTML = config.icon;
     itemElement.appendChild(icon);
   }
@@ -122,7 +110,7 @@ export const createNavItem = (
   // Add label if provided
   if (config.label) {
     const label = document.createElement('span');
-    label.className = `${prefix}-nav-item-label`;
+    label.className = `${prefix}-${NavClass.LABEL}`;
     label.textContent = config.label;
     itemElement.appendChild(label);
     itemElement.setAttribute('aria-label', config.label);
@@ -131,7 +119,7 @@ export const createNavItem = (
   // Add badge if provided
   if (config.badge) {
     const badge = document.createElement('span');
-    badge.className = `${prefix}-nav-item-badge`;
+    badge.className = `${prefix}-${NavClass.BADGE}`;
     badge.textContent = config.badge;
     // Use appropriate aria labeling
     badge.setAttribute('aria-label', `${config.badge} notifications`);
@@ -140,7 +128,7 @@ export const createNavItem = (
 
   // Mark active state with appropriate semantics
   if (config.active && !config.items?.length) {
-    itemElement.classList.add(`${prefix}-nav-item--active`);
+    itemElement.classList.add(`${prefix}-${NavClass.ITEM}--active`);
     
     // Use aria-current for standard navigation
     if (!isTabContext) {
@@ -184,13 +172,13 @@ export const createNavItem = (
  * @returns {Array<HTMLElement>} Array of all nested items
  */
 export const getAllNestedItems = (item: HTMLElement, prefix: string): HTMLElement[] => {
-  const container = item.closest(`.${prefix}-nav-item-container`);
+  const container = item.closest(`.${prefix}-${NavClass.ITEM_CONTAINER}`);
   if (!container) return [];
 
-  const nestedContainer = container.querySelector(`.${prefix}-nav-nested-container`);
+  const nestedContainer = container.querySelector(`.${prefix}-${NavClass.NESTED_CONTAINER}`);
   if (!nestedContainer) return [];
 
-  const items = Array.from(nestedContainer.querySelectorAll(`.${prefix}-nav-item`)) as HTMLElement[];
+  const items = Array.from(nestedContainer.querySelectorAll(`.${prefix}-${NavClass.ITEM}`)) as HTMLElement[];
   return items.reduce((acc: HTMLElement[], nestedItem: HTMLElement) => {
     return [...acc, nestedItem, ...getAllNestedItems(nestedItem, prefix)];
   }, []);

package/src/components/navigation/navigation.ts

@@ -10,13 +10,13 @@ import {
 } from '../../core/compose/features';
 import { withAPI } from './api';
 import { withNavItems } from './features/items';
-import { NavigationConfig, NavigationComponent } from './types';
+import { withController } from './features/controller';
+import { NavigationConfig, NavigationComponent, NavVariant } from './types';
 import { 
   createBaseConfig, 
   getElementConfig,
   getApiConfig
 } from './config';
-import { NAV_VARIANTS } from './constants';
 
 /**
  * Sets up proper ARIA roles based on navigation variant
@@ -32,7 +32,7 @@ const setupAccessibility = (nav: NavigationComponent, config: NavigationConfig):
   element.setAttribute('aria-label', config.ariaLabel || 'Main Navigation');
 
   // For bar navigation (bottom or top nav)
-  if (variant === NAV_VARIANTS.BAR) {
+  if (variant === 'bar') {
     // If bar navigation is acting as tabs
     const hasNestedItems = config.items?.some(item => item.items?.length) || false;
     
@@ -51,9 +51,8 @@ const setupAccessibility = (nav: NavigationComponent, config: NavigationConfig):
   }
 
   // Set hidden state for modal drawers if needed
-  if ((variant === NAV_VARIANTS.DRAWER_MODAL || 
-       variant === 'modal' || 
-       (variant === NAV_VARIANTS.DRAWER && config.behavior === 'dismissible')) && 
+  if ((variant === 'modal' || 
+       (variant === 'drawer' && config.behavior === 'dismissible')) && 
       !config.expanded) {
     element.classList.add(`${prefix}-nav--hidden`);
   }
@@ -70,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);
 
@@ -91,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;
+}