mtrl 0.2.6 → 0.2.8

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

@@ -0,0 +1,284 @@
+// src/components/navigation/features/items.ts
+import { createNavItem, getAllNestedItems } from '../nav-item';
+import { NavItemConfig, NavItemData, BaseComponent, NavClass } from '../types';
+
+/**
+ * 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;
+  getItem: (id: string) => NavItemData | undefined;
+  getAllItems: () => NavItemData[];
+  getActive: () => NavItemData | null;
+  getItemPath: (id: string) => string[];
+  setActive: (id: string) => ItemsComponent;
+}
+
+/**
+ * Interface for navigation configuration
+ * @internal
+ */
+interface NavigationConfig {
+  prefix?: string;
+  items?: NavItemConfig[];
+  [key: string]: any;
+}
+
+/**
+ * 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
+   * @param {NavItemConfig} itemConfig - Item configuration
+   * @param {HTMLElement} item - Created item element
+   */
+  const storeItem = (itemConfig: NavItemConfig, item: HTMLElement): void => {
+    items.set(itemConfig.id, { element: item, config: itemConfig });
+
+    if (itemConfig.items?.length) {
+      itemConfig.items.forEach(nestedConfig => {
+        const container = item.closest(`.${prefix}-${NavClass.ITEM_CONTAINER}`);
+        if (container) {
+          const nestedContainer = container.querySelector(`.${prefix}-${NavClass.NESTED_CONTAINER}`);
+          if (nestedContainer) {
+            const nestedItem = nestedContainer.querySelector(`[data-id="${nestedConfig.id}"]`) as HTMLElement;
+            if (nestedItem) {
+              storeItem(nestedConfig, nestedItem);
+            }
+          }
+        }
+      });
+    }
+  };
+
+  /**
+   * Updates the active state for an item
+   * @param {HTMLElement} item - Item element to activate
+   * @param {NavItemData} itemData - Item data
+   * @param {boolean} active - Whether to make active or inactive
+   */
+  const updateActiveState = (item: HTMLElement, itemData: NavItemData, active: boolean): void => {
+    // 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');
+      }
+    }
+  };
+
+  // Create initial items
+  if (config.items) {
+    config.items.forEach(itemConfig => {
+      const item = createNavItem(itemConfig, component.element, prefix);
+      storeItem(itemConfig, item);
+
+      if (itemConfig.active) {
+        activeItem = { element: item, config: itemConfig };
+        updateActiveState(item, activeItem, true);
+      }
+    });
+  }
+
+  // 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;
+
+    // Emit change event with item data
+    if (component.emit) {
+      component.emit('change', {
+        id,
+        item: itemData,
+        previousItem,
+        path: getItemPath(id)
+      });
+    }
+  });
+
+  /**
+   * 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;
+
+      const parentItem = parentItemContainer.querySelector(`.${prefix}-${NavClass.ITEM}`);
+      if (!parentItem) break;
+
+      const parentId = parentItem.getAttribute('data-id');
+      if (!parentId) break;
+
+      path.unshift(parentId);
+      
+      // Move up to next level
+      parentContainer = parentItemContainer.closest(`.${prefix}-${NavClass.NESTED_CONTAINER}`);
+    }
+
+    return path;
+  };
+
+  // Clean up when component is destroyed
+  if (component.lifecycle) {
+    const originalDestroy = component.lifecycle.destroy;
+    component.lifecycle.destroy = () => {
+      items.clear();
+      if (originalDestroy) {
+        originalDestroy();
+      }
+    };
+  }
+
+  return {
+    ...component,
+    items,
+
+    addItem(itemConfig: NavItemConfig) {
+      if (items.has(itemConfig.id)) return this;
+
+      const item = createNavItem(itemConfig, component.element, prefix);
+      storeItem(itemConfig, item);
+
+      if (itemConfig.active) {
+        this.setActive(itemConfig.id);
+      }
+
+      if (component.emit) {
+        component.emit('itemAdded', {
+          id: itemConfig.id,
+          item: { element: item, config: itemConfig }
+        });
+      }
+      return this;
+    },
+
+    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 => {
+        const nestedId = nestedItem.dataset.id;
+        if (nestedId) items.delete(nestedId);
+      });
+
+      if (activeItem?.config.id === id) {
+        activeItem = null;
+      }
+
+      // Remove the entire item container
+      const container = item.element.closest(`.${prefix}-${NavClass.ITEM_CONTAINER}`);
+      if (container) {
+        container.remove();
+      }
+      items.delete(id);
+
+      if (component.emit) {
+        component.emit('itemRemoved', { id, item });
+      }
+      return this;
+    },
+
+    getItem: (id: string) => items.get(id),
+    getAllItems: () => Array.from(items.values()),
+    getActive: () => activeItem,
+    getItemPath: (id: string) => getItemPath(id),
+
+    setActive(id: string) {
+      const item = items.get(id);
+      if (!item || item.config.disabled) return this;
+
+      if (activeItem) {
+        updateActiveState(activeItem.element, activeItem, false);
+      }
+
+      updateActiveState(item.element, item, true);
+      activeItem = item;
+
+      // Ensure all parent items are expanded
+      const path = getItemPath(id);
+      path.forEach(parentId => {
+        const parentItem = items.get(parentId);
+        if (parentItem) {
+          const parentButton = parentItem.element;
+          const container = parentButton.closest(`.${prefix}-${NavClass.ITEM_CONTAINER}`);
+          if (container) {
+            const nestedContainer = container.querySelector(`.${prefix}-${NavClass.NESTED_CONTAINER}`);
+            if (nestedContainer) {
+              parentButton.setAttribute('aria-expanded', 'true');
+              nestedContainer.hidden = false;
+            }
+          }
+        }
+      });
+
+      if (component.emit) {
+        component.emit('activeChanged', {
+          id,
+          item,
+          previousItem: activeItem,
+          path: getItemPath(id)
+        });
+      }
+      return this;
+    }
+  };
+};

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,5 +1,5 @@
 // src/components/navigation/nav-item.ts
-import { NavItemConfig } from './types';
+import { NavItemConfig, NavClass } from './types';
 
 /**
  * Creates an expand/collapse icon element
@@ -8,7 +8,7 @@ import { NavItemConfig } from './types';
  */
 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>
@@ -30,8 +30,10 @@ export const createNestedContainer = (
   createItem: (config: NavItemConfig, container: HTMLElement, prefix: string) => HTMLElement
 ): HTMLElement => {
   const container = document.createElement('div');
-  container.className = `${prefix}-nav-nested-container`;
-  container.setAttribute('role', 'group');
+  container.className = `${prefix}-${NavClass.NESTED_CONTAINER}`;
+  
+  // Use appropriate role for nested menu
+  container.setAttribute('role', 'menu');
   container.hidden = true;
 
   items.forEach(itemConfig => {
@@ -54,67 +56,102 @@ export const createNavItem = (
   prefix: string
 ): HTMLElement => {
   const itemContainer = document.createElement('div');
-  itemContainer.className = `${prefix}-nav-item-container`;
-
-  const item = document.createElement('button');
-  item.className = `${prefix}-nav-item`;
-  item.setAttribute('role', config.items?.length ? 'button' : 'menuitem');
-  item.setAttribute('aria-selected', 'false');
+  itemContainer.className = `${prefix}-${NavClass.ITEM_CONTAINER}`;
+
+  // Determine if parent container uses tabs or menu role pattern
+  const isMenuContext = container.getAttribute('role') === 'menu';
+  const isTabContext = container.getAttribute('role') === 'tablist';
+  const isDrawerVariant = container.closest(`.${prefix}-nav--drawer, .${prefix}-nav--drawer-modal, .${prefix}-nav--drawer-standard`) !== null;
+  
+  // Create the item element
+  const itemElement = document.createElement('button');
+  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
+  if (config.items?.length) {
+    if (isDrawerVariant) {
+      // For expandable drawer items with nested items
+      itemElement.setAttribute('role', 'button');
+      itemElement.setAttribute('aria-expanded', config.expanded ? 'true' : 'false');
+      itemElement.setAttribute('aria-haspopup', 'menu');
+    } else {
+      // For non-drawer variants with nested items
+      itemElement.setAttribute('role', 'button');
+    }
+  } else if (isMenuContext) {
+    // For menu items
+    itemElement.setAttribute('role', 'menuitem');
+  } else if (isTabContext) {
+    // For tab items
+    itemElement.setAttribute('role', 'tab');
+    itemElement.setAttribute('aria-selected', config.active ? 'true' : 'false');
+    itemElement.setAttribute('tabindex', config.active ? '0' : '-1');
+  } 
+  // For plain navigation buttons, we don't need to set the role since buttons have inherent semantics
 
   if (config.id) {
-    item.dataset.id = config.id;
+    itemElement.dataset.id = config.id;
   }
 
   if (config.disabled) {
-    item.disabled = true;
-    item.setAttribute('aria-disabled', 'true');
+    itemElement.disabled = true;
+    itemElement.setAttribute('aria-disabled', 'true');
   }
 
   // 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;
-    item.appendChild(icon);
+    itemElement.appendChild(icon);
   }
 
   // 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;
-    item.appendChild(label);
-    item.setAttribute('aria-label', config.label);
+    itemElement.appendChild(label);
+    itemElement.setAttribute('aria-label', config.label);
   }
 
   // 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`);
-    item.appendChild(badge);
+    itemElement.appendChild(badge);
+  }
+
+  // Mark active state with appropriate semantics
+  if (config.active && !config.items?.length) {
+    itemElement.classList.add(`${prefix}-${NavClass.ITEM}--active`);
+    
+    // Use aria-current for standard navigation
+    if (!isTabContext) {
+      itemElement.setAttribute('aria-current', 'page');
+    }
   }
 
-  itemContainer.appendChild(item);
+  itemContainer.appendChild(itemElement);
 
   // Handle nested items - only for drawer variant
-  if (config.items?.length && container.closest('.mtrl-nav--drawer, .mtrl-nav--drawer-modal, .mtrl-nav--drawer-standard')) {
+  if (config.items?.length && isDrawerVariant) {
     const expandIcon = createExpandIcon(prefix);
-    item.appendChild(expandIcon);
-
-    item.setAttribute('aria-expanded', config.expanded ? 'true' : 'false');
-    item.setAttribute('aria-haspopup', 'true');
+    itemElement.appendChild(expandIcon);
 
     const nestedContainer = createNestedContainer(config.items, prefix, createNavItem);
     nestedContainer.hidden = !config.expanded;
     itemContainer.appendChild(nestedContainer);
 
     // Handle expand/collapse
-    item.addEventListener('click', (event) => {
+    itemElement.addEventListener('click', (event) => {
       event.stopPropagation();
-      const isExpanded = item.getAttribute('aria-expanded') === 'true';
-      item.setAttribute('aria-expanded', (!isExpanded).toString());
+      const isExpanded = itemElement.getAttribute('aria-expanded') === 'true';
+      itemElement.setAttribute('aria-expanded', (!isExpanded).toString());
       nestedContainer.hidden = isExpanded;
 
       // Toggle expand icon rotation
@@ -125,7 +162,7 @@ export const createNavItem = (
   }
 
   container.appendChild(itemContainer);
-  return item;
+  return itemElement;
 };
 
 /**
@@ -135,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

@@ -6,17 +6,57 @@ import {
   withDisabled,
   withLifecycle,
   withVariant,
-  withPosition // Import core position feature
+  withPosition
 } from '../../core/compose/features';
 import { withAPI } from './api';
 import { withNavItems } from './features/items';
-import { NavigationConfig, NavigationComponent } from './types';
+import { NavigationConfig, NavigationComponent, NavVariant } from './types';
 import { 
   createBaseConfig, 
   getElementConfig,
   getApiConfig
 } from './config';
 
+/**
+ * Sets up proper ARIA roles based on navigation variant
+ * @param {NavigationComponent} nav - Navigation component
+ * @param {NavigationConfig} config - Navigation configuration  
+ */
+const setupAccessibility = (nav: NavigationComponent, config: NavigationConfig): void => {
+  const { element } = nav;
+  const variant = config.variant || 'rail';
+  const prefix = config.prefix || 'mtrl';
+  
+  // Set appropriate aria-label
+  element.setAttribute('aria-label', config.ariaLabel || 'Main Navigation');
+
+  // For bar navigation (bottom or top nav)
+  if (variant === 'bar') {
+    // If bar navigation is acting as tabs
+    const hasNestedItems = config.items?.some(item => item.items?.length) || false;
+    
+    if (!hasNestedItems) {
+      element.setAttribute('role', 'tablist');
+      element.setAttribute('aria-orientation', 'horizontal');
+    } else {
+      element.setAttribute('role', 'menubar');
+      element.setAttribute('aria-orientation', 'horizontal');
+    }
+  } 
+  // For rail and drawer navigation
+  else {
+    // Use standard navigation landmark
+    element.setAttribute('role', 'navigation'); 
+  }
+
+  // Set hidden state for modal drawers if needed
+  if ((variant === 'modal' || 
+       (variant === 'drawer' && config.behavior === 'dismissible')) && 
+      !config.expanded) {
+    element.classList.add(`${prefix}-nav--hidden`);
+  }
+};
+
 /**
  * Creates a new Navigation component
  * @param {NavigationConfig} config - Navigation configuration
@@ -40,7 +80,17 @@ const createNavigation = (config: NavigationConfig = {}): NavigationComponent =>
       comp => withAPI(getApiConfig(comp))(comp)
     )(baseConfig);
 
-    return navigation as NavigationComponent;
+    const nav = navigation as NavigationComponent;
+    
+    // Set up proper ARIA roles and relationships
+    setupAccessibility(nav, baseConfig);
+
+    // Implement any initialization logic
+    if (baseConfig.disabled) {
+      nav.disable();
+    }
+
+    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)}`);