mtrl 0.3.8 → 0.4.0

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

@@ -1,196 +0,0 @@
-// src/components/navigation/nav-item.ts
-import { NavItemConfig, NavClass } from './types';
-
-/**
- * Creates an expand/collapse icon element
- * @param {string} prefix - CSS class prefix
- * @returns {HTMLElement} Expand icon element
- */
-export const createExpandIcon = (prefix: string): HTMLElement => {
-  const icon = document.createElement('span');
-  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>
-    </svg>
-  `;
-  return icon;
-};
-
-/**
- * Creates a nested items container
- * @param {NavItemConfig[]} items - Nested items configuration
- * @param {string} prefix - CSS class prefix
- * @param {Function} createItem - Item creation function
- * @returns {HTMLElement} Nested items container
- */
-export const createNestedContainer = (
-  items: NavItemConfig[], 
-  prefix: string, 
-  createItem: (config: NavItemConfig, container: HTMLElement, prefix: string) => HTMLElement
-): HTMLElement => {
-  const container = document.createElement('div');
-  container.className = `${prefix}-${NavClass.NESTED_CONTAINER}`;
-  
-  // Use appropriate role for nested menu
-  container.setAttribute('role', 'menu');
-  container.hidden = true;
-
-  items.forEach(itemConfig => {
-    createItem(itemConfig, container, prefix);
-  });
-
-  return container;
-};
-
-/**
- * Creates a navigation item element
- * @param {NavItemConfig} config - Item configuration
- * @param {HTMLElement} container - Container element
- * @param {string} prefix - CSS class prefix
- * @returns {HTMLElement} Created navigation item
- */
-export const createNavItem = (
-  config: NavItemConfig, 
-  container: HTMLElement, 
-  prefix: string
-): HTMLElement => {
-  const itemContainer = document.createElement('div');
-  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) {
-    itemElement.dataset.id = config.id;
-  }
-
-  if (config.disabled) {
-    itemElement.disabled = true;
-    itemElement.setAttribute('aria-disabled', 'true');
-  }
-
-  // Add icon if provided
-  if (config.icon) {
-    const icon = document.createElement('span');
-    icon.className = `${prefix}-${NavClass.ICON}`;
-    icon.innerHTML = config.icon;
-    itemElement.appendChild(icon);
-  }
-
-  // Add label if provided - CONVERTED TO ANCHOR FOR SEO
-  if (config.label) {
-    // Create anchor instead of span for the label
-    const label = document.createElement('a');
-    label.className = `${prefix}-${NavClass.LABEL}`;
-    label.textContent = config.label;
-    label.href = `/${config.id}`; // Create path based on ID
-    
-    // Ensure the anchor looks the same as a span would
-    label.style.textDecoration = 'none';
-    label.style.color = 'inherit';
-    label.style.pointerEvents = 'none'; // Let the button handle click events
-    
-    // Add SEO attributes
-    label.setAttribute('title', 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}-${NavClass.BADGE}`;
-    badge.textContent = config.badge;
-    // Use appropriate aria labeling
-    badge.setAttribute('aria-label', `${config.badge} notifications`);
-    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(itemElement);
-
-  // Handle nested items - only for drawer variant
-  if (config.items?.length && isDrawerVariant) {
-    const expandIcon = createExpandIcon(prefix);
-    itemElement.appendChild(expandIcon);
-
-    const nestedContainer = createNestedContainer(config.items, prefix, createNavItem);
-    nestedContainer.hidden = !config.expanded;
-    itemContainer.appendChild(nestedContainer);
-
-    // Handle expand/collapse
-    itemElement.addEventListener('click', (event) => {
-      event.stopPropagation();
-      const isExpanded = itemElement.getAttribute('aria-expanded') === 'true';
-      itemElement.setAttribute('aria-expanded', (!isExpanded).toString());
-      nestedContainer.hidden = isExpanded;
-
-      // Toggle expand icon rotation
-      if (expandIcon.style) {
-        expandIcon.style.transform = isExpanded ? '' : 'rotate(90deg)';
-      }
-    });
-  }
-
-  container.appendChild(itemContainer);
-  return itemElement;
-};
-
-/**
- * Recursively gets all nested items from a navigation item
- * @param {HTMLElement} item - Navigation item element
- * @param {string} prefix - CSS class prefix
- * @returns {Array<HTMLElement>} Array of all nested items
- */
-export const getAllNestedItems = (item: HTMLElement, prefix: string): HTMLElement[] => {
-  const container = item.closest(`.${prefix}-${NavClass.ITEM_CONTAINER}`);
-  if (!container) return [];
-
-  const nestedContainer = container.querySelector(`.${prefix}-${NavClass.NESTED_CONTAINER}`);
-  if (!nestedContainer) return [];
-
-  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

@@ -1,115 +0,0 @@
-// src/components/navigation/navigation.ts
-import { pipe } from '../../core/compose';
-import { createBase, withElement } from '../../core/compose/component';
-import {
-  withEvents,
-  withDisabled,
-  withLifecycle,
-  withVariant,
-  withPosition
-} 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, 
-  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
- * @returns {NavigationComponent} Navigation component instance
- */
-const createNavigation = (config: NavigationConfig = {}): NavigationComponent => {
-  const baseConfig = createBaseConfig(config);
-
-  try {
-    const navigation = pipe(
-      createBase,
-      // 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);
-
-    const nav = navigation as NavigationComponent;
-    
-    // Set up proper ARIA roles and relationships
-    setupAccessibility(nav, baseConfig);
-
-    // Implement any initialization logic
-    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) {
-    throw new Error(`Failed to create navigation: ${error instanceof Error ? error.message : String(error)}`);
-  }
-};
-
-export default createNavigation;

package/src/components/navigation/system/core.ts

@@ -1,302 +0,0 @@
-// 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);
-  }
-};