mtrl 0.1.2 → 0.2.0

package/src/components/menu/features/{visibility.js → visibility.ts}

@@ -1,179 +1,181 @@
-// src/components/menu/features/visibility.js
-import { MENU_EVENTS } from '../constants'
+// src/components/menu/features/visibility.ts
+import { BaseComponent, MenuConfig } from '../types';
+import { MENU_EVENTS } from '../constants';
 
 /**
  * Adds visibility management functionality to a menu component
- * @param {Object} config - Menu configuration
- * @param {string} config.prefix - CSS class prefix
+ * @param {MenuConfig} config - Menu configuration
  * @returns {Function} Component enhancer
  */
-export const withVisibility = (config) => (component) => {
-  let isVisible = false
-  let outsideClickHandler = null
-  let keydownHandler = null
+export const withVisibility = (config: MenuConfig) => (component: BaseComponent): BaseComponent => {
+  let isVisible = false;
+  let outsideClickHandler: ((event: MouseEvent) => void) | null = null;
+  let keydownHandler: ((event: KeyboardEvent) => void) | null = null;
+  const prefix = config.prefix || 'mtrl';
 
   // Create the component interface with hide/show methods first
-  const enhancedComponent = {
+  const enhancedComponent: BaseComponent = {
     ...component,
 
     /**
      * Shows the menu
      */
-    show () {
-      if (isVisible) return this
+    show() {
+      if (isVisible) return this;
 
       // First set visibility to true to prevent multiple calls
-      isVisible = true
+      isVisible = true;
 
       // Make sure the element is in the DOM
       if (!component.element.parentNode) {
-        document.body.appendChild(component.element)
+        document.body.appendChild(component.element);
       }
 
       // Always clean up previous handlers before adding new ones
       if (outsideClickHandler) {
-        document.removeEventListener('mousedown', outsideClickHandler)
+        document.removeEventListener('mousedown', outsideClickHandler);
       }
 
       // Setup outside click handler for closing
-      outsideClickHandler = handleOutsideClick
+      outsideClickHandler = handleOutsideClick;
 
       // Use setTimeout to ensure the handler is not triggered immediately
       setTimeout(() => {
-        document.addEventListener('mousedown', outsideClickHandler)
-      }, 0)
+        document.addEventListener('mousedown', outsideClickHandler!);
+      }, 0);
 
       // Setup keyboard navigation
       if (!keydownHandler) {
-        keydownHandler = handleKeydown
-        document.addEventListener('keydown', keydownHandler)
+        keydownHandler = handleKeydown;
+        document.addEventListener('keydown', keydownHandler);
       }
 
       // Add display block first for transition to work
-      component.element.style.display = 'block'
+      component.element.style.display = 'block';
 
       // Force a reflow before adding the visible class for animation
-      component.element.offsetHeight
-      component.element.classList.add(`${config.prefix}-menu--visible`)
-      component.element.setAttribute('aria-hidden', 'false')
+      // eslint-disable-next-line no-void
+      void component.element.offsetHeight;
+      component.element.classList.add(`${prefix}-menu--visible`);
+      component.element.setAttribute('aria-hidden', 'false');
 
       // Emit open event
-      component.emit(MENU_EVENTS.OPEN)
+      component.emit?.(MENU_EVENTS.OPEN, {});
 
-      return this
+      return this;
     },
 
     /**
      * Hides the menu
      */
-    hide () {
+    hide() {
       // Return early if already hidden
-      if (!isVisible) return this
+      if (!isVisible) return this;
 
       // First set the visibility flag to false
-      isVisible = false
+      isVisible = false;
 
       // Close any open submenus first
       if (component.closeSubmenus) {
-        component.closeSubmenus()
+        component.closeSubmenus();
       }
 
       // Remove ALL event listeners
       if (outsideClickHandler) {
-        document.removeEventListener('mousedown', outsideClickHandler)
-        outsideClickHandler = null
+        document.removeEventListener('mousedown', outsideClickHandler);
+        outsideClickHandler = null;
       }
 
       if (keydownHandler) {
-        document.removeEventListener('keydown', keydownHandler)
-        keydownHandler = null
+        document.removeEventListener('keydown', keydownHandler);
+        keydownHandler = null;
       }
 
       // Hide the menu with visual indication first
-      component.element.classList.remove(`${config.prefix}-menu--visible`)
-      component.element.setAttribute('aria-hidden', 'true')
+      component.element.classList.remove(`${prefix}-menu--visible`);
+      component.element.setAttribute('aria-hidden', 'true');
 
       // Define a reliable cleanup function
       const cleanupElement = () => {
         // Safety check to prevent errors
         if (component.element) {
-          component.element.style.display = 'none'
+          component.element.style.display = 'none';
 
           // Remove from DOM if still attached
           if (component.element.parentNode) {
-            component.element.remove()
+            component.element.remove();
           }
         }
-      }
+      };
 
       // Try to use transition end for smooth animation
-      const handleTransitionEnd = (e) => {
+      const handleTransitionEnd = (e: TransitionEvent) => {
         if (e.propertyName === 'opacity' || e.propertyName === 'transform') {
-          component.element.removeEventListener('transitionend', handleTransitionEnd)
-          cleanupElement()
+          component.element.removeEventListener('transitionend', handleTransitionEnd);
+          cleanupElement();
         }
-      }
+      };
 
-      component.element.addEventListener('transitionend', handleTransitionEnd)
+      component.element.addEventListener('transitionend', handleTransitionEnd);
 
       // Fallback timeout in case transition events don't fire
       // This ensures the menu always gets removed
-      setTimeout(cleanupElement, 300)
+      setTimeout(cleanupElement, 300);
 
       // Emit close event
-      component.emit(MENU_EVENTS.CLOSE)
+      component.emit?.(MENU_EVENTS.CLOSE, {});
 
-      return this
+      return this;
     },
 
     /**
      * Returns whether the menu is currently visible
      * @returns {boolean} Visibility state
      */
-    isVisible () {
-      return isVisible
+    isVisible() {
+      return isVisible;
     }
-  }
+  };
 
   /**
    * Handles clicks outside the menu
    * @param {MouseEvent} event - Mouse event
    */
-  const handleOutsideClick = (event) => {
-    if (!isVisible) return
+  const handleOutsideClick = (event: MouseEvent) => {
+    if (!isVisible) return;
 
     // Store the opening button if available
-    const openingButton = config.openingButton?.element
+    const openingButton = config.openingButton?.element;
 
     // Check if click is outside the menu but not on the opening button
-    const clickedElement = event.target
+    const clickedElement = event.target as Node;
 
     // Don't close if the click is inside the menu
     if (component.element.contains(clickedElement)) {
-      return
+      return;
     }
 
     // Don't close if the click is on the opening button (it will handle opening/closing)
     if (openingButton && (openingButton === clickedElement || openingButton.contains(clickedElement))) {
-      return
+      return;
     }
 
     // If we got here, close the menu
-    enhancedComponent.hide()
-  }
+    enhancedComponent.hide?.();
+  };
 
   /**
    * Handles keyboard events
    * @param {KeyboardEvent} event - Keyboard event
    */
-  const handleKeydown = (event) => {
-    if (!isVisible) return
+  const handleKeydown = (event: KeyboardEvent) => {
+    if (!isVisible) return;
 
     if (event.key === 'Escape') {
-      event.preventDefault()
-      enhancedComponent.hide()
+      event.preventDefault();
+      enhancedComponent.hide?.();
     }
-  }
+  };
 
-  return enhancedComponent
-}
+  return enhancedComponent;
+};

package/src/components/menu/index.ts

@@ -0,0 +1,14 @@
+// src/components/menu/index.ts
+export { default } from './menu'
+export {
+  MENU_ALIGN,
+  MENU_VERTICAL_ALIGN,
+  MENU_ITEM_TYPES,
+  MENU_EVENTS
+} from './constants'
+export {
+  MenuConfig,
+  MenuComponent,
+  MenuItemConfig,
+  MenuPositionConfig
+} from './types'

package/src/components/menu/menu-item.ts

@@ -0,0 +1,43 @@
+// src/components/menu/menu-item.ts
+import { MenuItemConfig } from './types';
+import { MENU_ITEM_TYPES } from './constants';
+
+/**
+ * Creates a menu item element
+ * @param {MenuItemConfig} itemConfig - Item configuration
+ * @param {string} prefix - CSS class prefix
+ * @returns {HTMLElement} Menu item element
+ */
+export const createMenuItem = (itemConfig: MenuItemConfig, prefix: string): HTMLElement => {
+  const item = document.createElement('li');
+  item.className = `${prefix}-menu-item`;
+
+  if (itemConfig.type === MENU_ITEM_TYPES.DIVIDER) {
+    item.className = `${prefix}-menu-divider`;
+    return item;
+  }
+
+  if (itemConfig.class) {
+    item.className += ` ${itemConfig.class}`;
+  }
+
+  if (itemConfig.disabled) {
+    item.setAttribute('aria-disabled', 'true');
+    item.className += ` ${prefix}-menu-item--disabled`;
+  }
+
+  if (itemConfig.name) {
+    item.setAttribute('data-name', itemConfig.name);
+  }
+
+  item.textContent = itemConfig.text || '';
+
+  if (itemConfig.items?.length) {
+    item.className += ` ${prefix}-menu-item--submenu`;
+    item.setAttribute('aria-haspopup', 'true');
+    item.setAttribute('aria-expanded', 'false');
+    // We don't need to add a submenu indicator as it's handled by CSS ::after
+  }
+
+  return item;
+}

package/src/components/menu/menu.ts

@@ -0,0 +1,53 @@
+// src/components/menu/menu.ts
+import { pipe } from '../../core/compose';
+import { createBase, withElement } from '../../core/compose/component';
+import { withEvents, withLifecycle } from '../../core/compose/features';
+import { withAPI } from './api';
+import { withVisibility } from './features/visibility';
+import { withItemsManager } from './features/items-manager';
+import { withPositioning } from './features/positioning';
+import { withKeyboardNavigation } from './features/keyboard-navigation';
+import { MenuConfig, MenuComponent } from './types';
+import { 
+  createBaseConfig, 
+  getElementConfig,
+  getApiConfig
+} from './config';
+
+/**
+ * Creates a new Menu component
+ * @param {MenuConfig} config - Menu configuration
+ * @returns {MenuComponent} Menu component instance
+ */
+const createMenu = (config: MenuConfig = {}): MenuComponent => {
+  const baseConfig = createBaseConfig(config);
+
+  try {
+    // Create menu component
+    const menu = pipe(
+      createBase,
+      withEvents(),
+      withElement(getElementConfig(baseConfig)),
+      withLifecycle(),
+      withItemsManager(baseConfig),
+      withVisibility(baseConfig),
+      withPositioning,
+      withKeyboardNavigation(baseConfig),
+      comp => withAPI(getApiConfig(comp))(comp)
+    )(baseConfig);
+
+    // Handle circular dependency for submenus
+    // This is needed because we need the complete menu factory function
+    // to create submenus, but we can't import it directly in items-manager
+    if (menu.setCreateSubmenuFunction) {
+      menu.setCreateSubmenuFunction(createMenu);
+    }
+
+    return menu as MenuComponent;
+  } catch (error) {
+    console.error('Menu creation error:', error instanceof Error ? error.message : String(error));
+    throw new Error(`Failed to create menu: ${error instanceof Error ? error.message : String(error)}`);
+  }
+};
+
+export default createMenu;

package/src/components/menu/types.ts

@@ -0,0 +1,178 @@
+// src/components/menu/types.ts
+import { 
+  MENU_ALIGN, 
+  MENU_VERTICAL_ALIGN, 
+  MENU_ITEM_TYPES 
+} from './constants';
+
+/**
+ * Menu item configuration
+ */
+export interface MenuItemConfig {
+  /** Unique identifier for the item */
+  name: string;
+  
+  /** Text content for the item */
+  text: string;
+  
+  /** Type of menu item */
+  type?: keyof typeof MENU_ITEM_TYPES | string;
+  
+  /** Whether the item is disabled */
+  disabled?: boolean;
+  
+  /** Additional CSS classes */
+  class?: string;
+  
+  /** Submenu items */
+  items?: MenuItemConfig[];
+}
+
+/**
+ * Position configuration
+ */
+export interface MenuPositionConfig {
+  /** Horizontal alignment */
+  align?: keyof typeof MENU_ALIGN | string;
+  
+  /** Vertical alignment */
+  vAlign?: keyof typeof MENU_VERTICAL_ALIGN | string;
+  
+  /** Horizontal offset in pixels */
+  offsetX?: number;
+  
+  /** Vertical offset in pixels */
+  offsetY?: number;
+}
+
+/**
+ * Position result
+ */
+export interface MenuPosition {
+  /** Left position in pixels */
+  left: number;
+  
+  /** Top position in pixels */
+  top: number;
+}
+
+/**
+ * Stored item data
+ */
+export interface MenuItemData {
+  /** DOM element for the item */
+  element: HTMLElement;
+  
+  /** Item configuration */
+  config: MenuItemConfig;
+}
+
+/**
+ * Menu selection event data
+ */
+export interface MenuSelectEvent {
+  /** Name of the selected item */
+  name: string;
+  
+  /** Text content of the selected item */
+  text: string;
+  
+  /** Path of parent item names (for submenus) */
+  path?: string[];
+}
+
+/**
+ * Configuration interface for the Menu component
+ */
+export interface MenuConfig {
+  /** Initial menu items */
+  items?: MenuItemConfig[];
+  
+  /** Additional CSS classes */
+  class?: string;
+  
+  /** Whether to keep menu open after selection */
+  stayOpenOnSelect?: boolean;
+  
+  /** Button element that opens the menu */
+  openingButton?: HTMLElement | { element: HTMLElement };
+  
+  /** Parent item element (for submenus) */
+  parentItem?: HTMLElement;
+  
+  /** Prefix for class names */
+  prefix?: string;
+  
+  /** Component name */
+  componentName?: string;
+}
+
+/**
+ * Menu component interface
+ */
+export interface MenuComponent {
+  /** The root element of the menu */
+  element: HTMLElement;
+  
+  /** Shows the menu */
+  show: () => MenuComponent;
+  
+  /** Hides the menu */
+  hide: () => MenuComponent;
+  
+  /** Checks if the menu is visible */
+  isVisible: () => boolean;
+  
+  /** Positions the menu relative to a target */
+  position: (target: HTMLElement, options?: MenuPositionConfig) => MenuComponent;
+  
+  /** Adds a menu item */
+  addItem: (config: MenuItemConfig) => MenuComponent;
+  
+  /** Removes a menu item by name */
+  removeItem: (name: string) => MenuComponent;
+  
+  /** Gets all menu items */
+  getItems: () => Map<string, MenuItemData>;
+  
+  /** Adds event listener */
+  on: (event: string, handler: Function) => MenuComponent;
+  
+  /** Removes event listener */
+  off: (event: string, handler: Function) => MenuComponent;
+  
+  /** Destroys the menu component and cleans up resources */
+  destroy: () => MenuComponent;
+}
+
+/**
+ * Base component interface
+ */
+export interface BaseComponent {
+  element: HTMLElement;
+  emit?: (event: string, data: any) => void;
+  on?: (event: string, handler: Function) => any;
+  off?: (event: string, handler: Function) => any;
+  show?: () => any;
+  hide?: () => any;
+  isVisible?: () => boolean;
+  position?: (target: HTMLElement, options?: MenuPositionConfig) => any;
+  addItem?: (config: MenuItemConfig) => any;
+  removeItem?: (name: string) => any;
+  getItems?: () => Map<string, MenuItemData>;
+  closeSubmenus?: () => any;
+  refreshHoverHandlers?: () => any;
+  lifecycle?: {
+    destroy: () => void;
+  };
+  [key: string]: any;
+}
+
+/**
+ * API options interface
+ */
+export interface ApiOptions {
+  lifecycle: {
+    destroy: () => void;
+  };
+}

package/src/components/navigation/api.ts

@@ -0,0 +1,79 @@
+// src/components/navigation/api.ts
+import { 
+  BaseComponent, 
+  NavigationComponent, 
+  ApiOptions, 
+  NavItemConfig,
+  NavItemData
+} from './types';
+
+/**
+ * Enhances navigation component with API methods
+ * @param {ApiOptions} options - API configuration
+ * @returns {Function} Higher-order function that adds API methods to component
+ */
+export const withAPI = ({ disabled, lifecycle }: ApiOptions) => 
+  (component: BaseComponent): NavigationComponent => ({
+    ...component as any,
+    element: component.element,
+    items: component.items as Map<string, NavItemData>,
+
+    // Item management
+    addItem(config: NavItemConfig): NavigationComponent {
+      component.addItem?.(config);
+      return this;
+    },
+    
+    removeItem(id: string): NavigationComponent {
+      component.removeItem?.(id);
+      return this;
+    },
+    
+    getItem(id: string): NavItemData | undefined {
+      return component.getItem?.(id);
+    },
+    
+    getAllItems(): NavItemData[] {
+      return component.getAllItems?.() || [];
+    },
+    
+    getItemPath(id: string): string[] {
+      return component.getItemPath?.(id) || [];
+    },
+
+    // Active state management
+    setActive(id: string): NavigationComponent {
+      component.setActive?.(id);
+      return this;
+    },
+    
+    getActive(): NavItemData | null {
+      return component.getActive?.() || null;
+    },
+
+    // Event handling
+    on(event: string, handler: Function): NavigationComponent {
+      component.on?.(event, handler);
+      return this;
+    },
+    
+    off(event: string, handler: Function): NavigationComponent {
+      component.off?.(event, handler);
+      return this;
+    },
+
+    // State management
+    enable(): NavigationComponent {
+      disabled.enable();
+      return this;
+    },
+    
+    disable(): NavigationComponent {
+      disabled.disable();
+      return this;
+    },
+    
+    destroy(): void {
+      lifecycle.destroy();
+    }
+  });

package/src/components/navigation/config.ts

@@ -0,0 +1,61 @@
+// src/components/navigation/config.ts
+import { 
+  createComponentConfig, 
+  createElementConfig,
+  BaseComponentConfig 
+} from '../../core/config/component-config';
+import { NavigationConfig, BaseComponent, ApiOptions } from './types';
+import { NAV_VARIANTS, NAV_POSITIONS, NAV_BEHAVIORS } from './constants';
+
+/**
+ * Default configuration for the Navigation component
+ */
+export const defaultConfig: NavigationConfig = {
+  variant: NAV_VARIANTS.RAIL,
+  position: NAV_POSITIONS.LEFT,
+  behavior: NAV_BEHAVIORS.FIXED,
+  items: [],
+  showLabels: true,
+  scrimEnabled: false
+};
+
+/**
+ * Creates the base configuration for Navigation component
+ * @param {NavigationConfig} config - User provided configuration
+ * @returns {NavigationConfig} Complete configuration with defaults applied
+ */
+export const createBaseConfig = (config: NavigationConfig = {}): NavigationConfig => 
+  createComponentConfig(defaultConfig, config, 'nav') as NavigationConfig;
+
+/**
+ * Generates element configuration for the Navigation component
+ * @param {NavigationConfig} config - Navigation configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export const getElementConfig = (config: NavigationConfig) => 
+  createElementConfig(config, {
+    tag: 'nav',
+    componentName: 'nav',
+    attrs: {
+      role: 'navigation',
+      'aria-label': config.ariaLabel || 'Main Navigation'
+    },
+    className: config.class
+  });
+
+/**
+ * Creates API configuration for the Navigation component
+ * @param {BaseComponent} comp - Component with disabled and lifecycle features
+ * @returns {ApiOptions} API configuration object
+ */
+export const getApiConfig = (comp: BaseComponent): ApiOptions => ({
+  disabled: {
+    enable: comp.disabled?.enable,
+    disable: comp.disabled?.disable
+  },
+  lifecycle: {
+    destroy: comp.lifecycle?.destroy
+  }
+});
+
+export default defaultConfig;