mtrl 0.3.8 → 0.4.0

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

@@ -1,273 +0,0 @@
-// 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,353 +0,0 @@
-// 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[];
-  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
- * @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);
-      }
-    });
-  }
-
-  // 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 });
-
-    // 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
-      });
-    }, { passive: true });
-
-    // 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';
-      
-      component.emit('mouseleave', {
-        clientX: event.clientX,
-        clientY: event.clientY,
-        relatedTargetId,
-        id: componentId
-      });
-    });
-  }
-
-  // Clean up when component is destroyed
-  if (component.lifecycle) {
-    const originalDestroy = component.lifecycle.destroy;
-    component.lifecycle.destroy = () => {
-      items.clear();
-      if (originalDestroy) {
-        originalDestroy();
-      }
-    };
-  }
-
-  /**
-   * 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,
-
-    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 +0,0 @@
-// src/components/navigation/index.ts
-export { default } from './navigation'
-export {
-  NavigationConfig,
-  NavigationComponent,
-  NavItemConfig,
-  NavGroupConfig,
-  NAV_VARIANTS,
-  NAV_POSITIONS,
-  NAV_BEHAVIORS
-} from './types'