mtrl 0.3.5 → 0.3.7

package/src/components/menu/features/visibility.ts

@@ -1,230 +0,0 @@
-// src/components/menu/features/visibility.ts
-import { BaseComponent, MenuConfig } from '../types';
-import { MENU_EVENT, MENU_CLASSES } from '../utils';
-
-/**
- * Adds visibility management functionality to a menu component
- * 
- * This feature adds the ability to show and hide the menu with smooth transitions,
- * along with proper event handling for clicks outside the menu and keyboard shortcuts.
- * It implements the following functionality:
- * 
- * - Tracking visibility state
- * - Showing the menu with animation
- * - Hiding the menu with animation
- * - Automatic handling of clicks outside the menu
- * - Keyboard shortcut (Escape) for dismissing the menu
- * - Proper ARIA attributes for accessibility
- * - Event emission for component state changes
- * 
- * @param {MenuConfig} config - Menu configuration options
- * @returns {Function} Component enhancer function that adds visibility features
- * 
- * @internal
- * @category Components
- */
-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: BaseComponent = {
-    ...component,
-
-    /**
-     * Shows the menu
-     * 
-     * Makes the menu visible with a smooth transition animation.
-     * Handles DOM insertion, event binding, and ARIA attribute updates.
-     * Emits an 'open' event when the menu becomes visible.
-     * 
-     * @returns {BaseComponent} The component instance for method chaining
-     * @internal
-     */
-    show() {
-      if (isVisible) return this;
-
-      // First set visibility to true to prevent multiple calls
-      isVisible = true;
-
-      // Make sure the element is in the DOM
-      if (!component.element.parentNode) {
-        document.body.appendChild(component.element);
-      }
-
-      // Always clean up previous handlers before adding new ones
-      if (outsideClickHandler) {
-        document.removeEventListener('mousedown', outsideClickHandler);
-      }
-
-      // Setup outside click handler for closing
-      outsideClickHandler = handleOutsideClick;
-
-      // Use setTimeout to ensure the handler is not triggered immediately
-      setTimeout(() => {
-        document.addEventListener('mousedown', outsideClickHandler!);
-      }, 0);
-
-      // Setup keyboard navigation
-      if (!keydownHandler) {
-        keydownHandler = handleKeydown;
-        document.addEventListener('keydown', keydownHandler);
-      }
-
-      // Add display block first for transition to work
-      component.element.style.display = 'block';
-
-      // Force a reflow before adding the visible class for animation
-      // eslint-disable-next-line no-void
-      void component.element.offsetHeight;
-      component.element.classList.add(`${prefix}-${MENU_CLASSES.VISIBLE}`);
-      component.element.setAttribute('aria-hidden', 'false');
-
-      // Emit open event
-      component.emit?.(MENU_EVENT.OPEN, {});
-
-      return this;
-    },
-
-    /**
-     * Hides the menu
-     * 
-     * Makes the menu invisible with a smooth transition animation.
-     * Handles event cleanup, ARIA attribute updates, and DOM removal.
-     * Emits a 'close' event when the menu becomes hidden.
-     * Also ensures any open submenus are closed first.
-     * 
-     * @returns {BaseComponent} The component instance for method chaining
-     * @internal
-     */
-    hide() {
-      // Return early if already hidden
-      if (!isVisible) return this;
-
-      // First set the visibility flag to false
-      isVisible = false;
-
-      // Close any open submenus first
-      if (component.closeSubmenus) {
-        component.closeSubmenus();
-      }
-
-      // Remove ALL event listeners
-      if (outsideClickHandler) {
-        document.removeEventListener('mousedown', outsideClickHandler);
-        outsideClickHandler = null;
-      }
-
-      if (keydownHandler) {
-        document.removeEventListener('keydown', keydownHandler);
-        keydownHandler = null;
-      }
-
-      // Hide the menu with visual indication first
-      component.element.classList.remove(`${prefix}-${MENU_CLASSES.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';
-
-          // Remove from DOM if still attached
-          if (component.element.parentNode) {
-            component.element.remove();
-          }
-        }
-      };
-
-      // Try to use transition end for smooth animation
-      const handleTransitionEnd = (e: TransitionEvent) => {
-        if (e.propertyName === 'opacity' || e.propertyName === 'transform') {
-          component.element.removeEventListener('transitionend', handleTransitionEnd);
-          cleanupElement();
-        }
-      };
-
-      component.element.addEventListener('transitionend', handleTransitionEnd);
-
-      // Fallback timeout in case transition events don't fire
-      // This ensures the menu always gets removed
-      setTimeout(cleanupElement, 300);
-
-      // Emit close event
-      component.emit?.(MENU_EVENT.CLOSE, {});
-
-      return this;
-    },
-
-    /**
-     * Returns whether the menu is currently visible
-     * 
-     * Provides the current visibility state of the menu component.
-     * This method is used internally and exposed via the public API.
-     * 
-     * @returns {boolean} True if the menu is visible, false otherwise
-     * @internal
-     */
-    isVisible() {
-      return isVisible;
-    }
-  };
-
-  /**
-   * Handles clicks outside the menu
-   * 
-   * Event handler for detecting and responding to mouse clicks outside the menu.
-   * Checks if the click occurred outside both the menu and its origin element,
-   * and if so, hides the menu. This provides the auto-dismiss behavior expected
-   * of temporary surfaces like menus.
-   * 
-   * @param {MouseEvent} event - Mouse event containing target information
-   * @internal
-   */
-  const handleOutsideClick = (event: MouseEvent) => {
-    if (!isVisible) return;
-
-    // Store the opening button if available
-    const origin = config.origin?.element;
-
-    // Check if click is outside the menu but not on the opening button
-    const clickedElement = event.target as Node;
-
-    // Don't close if the click is inside the menu
-    if (component.element.contains(clickedElement)) {
-      return;
-    }
-
-    // Don't close if the click is on the opening button (it will handle opening/closing)
-    if (origin && (origin === clickedElement || origin.contains(clickedElement))) {
-      return;
-    }
-
-    // If we got here, close the menu
-    enhancedComponent.hide?.();
-  };
-
-  /**
-   * Handles keyboard events for the menu
-   * 
-   * Event handler for keyboard interactions with the menu.
-   * Currently implements the Escape key to dismiss the menu,
-   * following standard interaction patterns for temporary UI surfaces.
-   * 
-   * @param {KeyboardEvent} event - Keyboard event containing key information
-   * @internal
-   */
-  const handleKeydown = (event: KeyboardEvent) => {
-    if (!isVisible) return;
-
-    if (event.key === 'Escape') {
-      event.preventDefault();
-      enhancedComponent.hide?.();
-    }
-  };
-
-  return enhancedComponent;
-};

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

@@ -1,86 +0,0 @@
-// src/components/menu/menu-item.ts
-import { MenuItemConfig } from './types';
-import { MENU_ITEM_TYPE, getMenuClass } from './utils';
-
-/**
- * Creates a DOM element for a menu item
- * 
- * Generates an HTMLElement (li) based on the provided configuration.
- * Handles different types of menu items (standard, divider, submenu),
- * applies proper CSS classes, and sets appropriate ARIA attributes
- * for accessibility.
- * 
- * @param {MenuItemConfig} itemConfig - Item configuration
- * @param {string} prefix - CSS class prefix (default: 'mtrl')
- * @returns {HTMLElement} Menu item DOM element
- * 
- * @example
- * ```typescript
- * // Create a standard menu item
- * const itemElement = createMenuItem(
- *   { name: 'edit', text: 'Edit' },
- *   'mtrl'
- * );
- * 
- * // Create a disabled menu item
- * const disabledItem = createMenuItem(
- *   { name: 'print', text: 'Print', disabled: true },
- *   'mtrl'
- * );
- * 
- * // Create a divider
- * const divider = createMenuItem(
- *   { type: 'divider' },
- *   'mtrl'
- * );
- * 
- * // Create an item with submenu indicator
- * const submenuItem = createMenuItem(
- *   {
- *     name: 'share',
- *     text: 'Share',
- *     items: [
- *       { name: 'email', text: 'Email' },
- *       { name: 'link', text: 'Copy Link' }
- *     ]
- *   },
- *   'mtrl'
- * );
- * ```
- * 
- * @internal
- * @category Components
- */
-export const createMenuItem = (itemConfig: MenuItemConfig, prefix: string): HTMLElement => {
-  const item = document.createElement('li');
-  item.className = `${prefix}-${getMenuClass('ITEM')}`;
-
-  if (itemConfig.type === MENU_ITEM_TYPE.DIVIDER) {
-    item.className = `${prefix}-${getMenuClass('DIVIDER')}`;
-    return item;
-  }
-
-  if (itemConfig.class) {
-    item.className += ` ${itemConfig.class}`;
-  }
-
-  if (itemConfig.disabled) {
-    item.setAttribute('aria-disabled', 'true');
-    item.className += ` ${prefix}-${getMenuClass('ITEM')}--disabled`;
-  }
-
-  if (itemConfig.name) {
-    item.setAttribute('data-name', itemConfig.name);
-  }
-
-  item.textContent = itemConfig.text || '';
-
-  if (itemConfig.items?.length) {
-    item.className += ` ${prefix}-${getMenuClass('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/utils.ts

@@ -1,67 +0,0 @@
-// src/components/menu/utils.ts
-
-/**
- * Menu alignment constants for internal use
- * @internal
- */
-export const MENU_ALIGNMENT = {
-  LEFT: 'left',
-  RIGHT: 'right',
-  CENTER: 'center'
-};
-
-/**
- * Menu vertical alignment constants for internal use
- * @internal
- */
-export const MENU_VERTICAL_ALIGNMENT = {
-  TOP: 'top',
-  BOTTOM: 'bottom',
-  MIDDLE: 'middle'
-};
-
-/**
- * Menu item types for internal use
- * @internal
- */
-export const MENU_ITEM_TYPE = {
-  ITEM: 'item',
-  DIVIDER: 'divider'
-};
-
-/**
- * Menu events for internal use
- * @internal
- */
-export const MENU_EVENT = {
-  SELECT: 'select',
-  OPEN: 'open',
-  CLOSE: 'close',
-  SUBMENU_OPEN: 'submenuOpen',
-  SUBMENU_CLOSE: 'submenuClose'
-};
-
-/**
- * Menu CSS classes for internal use
- * @internal
- */
-export const MENU_CLASSES = {
-  ROOT: 'menu',
-  ITEM: 'menu-item',
-  ITEM_CONTAINER: 'menu-item-container',
-  LIST: 'menu-list',
-  DIVIDER: 'menu-divider',
-  SUBMENU: 'menu--submenu',
-  VISIBLE: 'menu--visible',
-  DISABLED: 'menu--disabled'
-};
-
-/**
- * Gets a class name for menu elements
- * @param {string} element - Element name from MENU_CLASSES
- * @returns {string} The class name
- * @internal
- */
-export const getMenuClass = (element: keyof typeof MENU_CLASSES): string => {
-  return MENU_CLASSES[element];
-};

package/src/components/textfield/features.ts

@@ -1,322 +0,0 @@
-// src/components/textfield/features.ts
-import { BaseComponent, ElementComponent } from '../../core/compose/component';
-
-/**
- * Configuration for leading icon feature
- */
-export interface LeadingIconConfig {
-  /**
-   * Leading icon HTML content
-   */
-  leadingIcon?: string;
-  
-  /**
-   * CSS class prefix
-   */
-  prefix?: string;
-  
-  /**
-   * Component name
-   */
-  componentName?: string;
-  
-  [key: string]: any;
-}
-
-/**
- * Configuration for trailing icon feature
- */
-export interface TrailingIconConfig {
-  /**
-   * Trailing icon HTML content
-   */
-  trailingIcon?: string;
-  
-  /**
-   * CSS class prefix
-   */
-  prefix?: string;
-  
-  /**
-   * Component name
-   */
-  componentName?: string;
-  
-  [key: string]: any;
-}
-
-/**
- * Configuration for supporting text feature
- */
-export interface SupportingTextConfig {
-  /**
-   * Supporting text content
-   */
-  supportingText?: string;
-  
-  /**
-   * Whether supporting text indicates an error
-   */
-  error?: boolean;
-  
-  /**
-   * CSS class prefix
-   */
-  prefix?: string;
-  
-  /**
-   * Component name
-   */
-  componentName?: string;
-  
-  [key: string]: any;
-}
-
-/**
- * Component with leading icon capabilities
- */
-export interface LeadingIconComponent extends BaseComponent {
-  /**
-   * Leading icon element
-   */
-  leadingIcon: HTMLElement | null;
-  
-  /**
-   * Sets leading icon content
-   * @param html - HTML content for the icon
-   * @returns Component instance for chaining
-   */
-  setLeadingIcon: (html: string) => LeadingIconComponent;
-  
-  /**
-   * Removes leading icon
-   * @returns Component instance for chaining
-   */
-  removeLeadingIcon: () => LeadingIconComponent;
-}
-
-/**
- * Component with trailing icon capabilities
- */
-export interface TrailingIconComponent extends BaseComponent {
-  /**
-   * Trailing icon element
-   */
-  trailingIcon: HTMLElement | null;
-  
-  /**
-   * Sets trailing icon content
-   * @param html - HTML content for the icon
-   * @returns Component instance for chaining
-   */
-  setTrailingIcon: (html: string) => TrailingIconComponent;
-  
-  /**
-   * Removes trailing icon
-   * @returns Component instance for chaining
-   */
-  removeTrailingIcon: () => TrailingIconComponent;
-}
-
-/**
- * Component with supporting text capabilities
- */
-export interface SupportingTextComponent extends BaseComponent {
-  /**
-   * Supporting text element
-   */
-  supportingTextElement: HTMLElement | null;
-  
-  /**
-   * Sets supporting text content
-   * @param text - Text content
-   * @param isError - Whether text represents an error
-   * @returns Component instance for chaining
-   */
-  setSupportingText: (text: string, isError?: boolean) => SupportingTextComponent;
-  
-  /**
-   * Removes supporting text
-   * @returns Component instance for chaining
-   */
-  removeSupportingText: () => SupportingTextComponent;
-}
-
-/**
- * Creates and manages a leading icon for a component
- * @param config - Configuration object with leading icon settings
- * @returns Function that enhances a component with leading icon functionality
- */
-export const withLeadingIcon = <T extends LeadingIconConfig>(config: T) => 
-  <C extends ElementComponent>(component: C): C & LeadingIconComponent => {
-    if (!config.leadingIcon) {
-      return component as C & LeadingIconComponent;
-    }
-    
-    // Create icon element
-    const PREFIX = config.prefix || 'mtrl';
-    const iconElement = document.createElement('span');
-    iconElement.className = `${PREFIX}-${config.componentName || 'textfield'}-leading-icon`;
-    iconElement.innerHTML = config.leadingIcon;
-    
-    // Add leading icon to the component
-    component.element.appendChild(iconElement);
-    
-    // Add leading-icon class to the component
-    component.element.classList.add(`${PREFIX}-${config.componentName || 'textfield'}--with-leading-icon`);
-    
-    // When there's a leading icon, adjust input padding
-    if (component.input) {
-      component.input.classList.add(`${PREFIX}-${config.componentName || 'textfield'}-input--with-leading-icon`);
-    }
-    
-    // Add lifecycle integration if available
-    if ('lifecycle' in component && component.lifecycle?.destroy) {
-      const originalDestroy = component.lifecycle.destroy;
-      component.lifecycle.destroy = () => {
-        iconElement.remove();
-        originalDestroy.call(component.lifecycle);
-      };
-    }
-
-    return {
-      ...component,
-      leadingIcon: iconElement,
-      
-      setLeadingIcon(html: string) {
-        iconElement.innerHTML = html;
-        return this;
-      },
-      
-      removeLeadingIcon() {
-        if (iconElement.parentNode) {
-          iconElement.remove();
-          component.element.classList.remove(`${PREFIX}-${config.componentName || 'textfield'}--with-leading-icon`);
-          if (component.input) {
-            component.input.classList.remove(`${PREFIX}-${config.componentName || 'textfield'}-input--with-leading-icon`);
-          }
-          this.leadingIcon = null;
-        }
-        return this;
-      }
-    };
-  };
-
-/**
- * Creates and manages a trailing icon for a component
- * @param config - Configuration object with trailing icon settings
- * @returns Function that enhances a component with trailing icon functionality
- */
-export const withTrailingIcon = <T extends TrailingIconConfig>(config: T) => 
-  <C extends ElementComponent>(component: C): C & TrailingIconComponent => {
-    if (!config.trailingIcon) {
-      return component as C & TrailingIconComponent;
-    }
-    
-    // Create icon element
-    const PREFIX = config.prefix || 'mtrl';
-    const iconElement = document.createElement('span');
-    iconElement.className = `${PREFIX}-${config.componentName || 'textfield'}-trailing-icon`;
-    iconElement.innerHTML = config.trailingIcon;
-    
-    // Add trailing icon to the component
-    component.element.appendChild(iconElement);
-    
-    // Add trailing-icon class to the component
-    component.element.classList.add(`${PREFIX}-${config.componentName || 'textfield'}--with-trailing-icon`);
-    
-    // When there's a trailing icon, adjust input padding
-    if (component.input) {
-      component.input.classList.add(`${PREFIX}-${config.componentName || 'textfield'}-input--with-trailing-icon`);
-    }
-    
-    // Add lifecycle integration if available
-    if ('lifecycle' in component && component.lifecycle?.destroy) {
-      const originalDestroy = component.lifecycle.destroy;
-      component.lifecycle.destroy = () => {
-        iconElement.remove();
-        originalDestroy.call(component.lifecycle);
-      };
-    }
-
-    return {
-      ...component,
-      trailingIcon: iconElement,
-      
-      setTrailingIcon(html: string) {
-        iconElement.innerHTML = html;
-        return this;
-      },
-      
-      removeTrailingIcon() {
-        if (iconElement.parentNode) {
-          iconElement.remove();
-          component.element.classList.remove(`${PREFIX}-${config.componentName || 'textfield'}--with-trailing-icon`);
-          if (component.input) {
-            component.input.classList.remove(`${PREFIX}-${config.componentName || 'textfield'}-input--with-trailing-icon`);
-          }
-          this.trailingIcon = null;
-        }
-        return this;
-      }
-    };
-  };
-
-/**
- * Creates and manages supporting text for a component
- * @param config - Configuration object with supporting text settings
- * @returns Function that enhances a component with supporting text functionality
- */
-export const withSupportingText = <T extends SupportingTextConfig>(config: T) => 
-  <C extends ElementComponent>(component: C): C & SupportingTextComponent => {
-    if (!config.supportingText) {
-      return component as C & SupportingTextComponent;
-    }
-    
-    // Create supporting text element
-    const PREFIX = config.prefix || 'mtrl';
-    const supportingElement = document.createElement('div');
-    supportingElement.className = `${PREFIX}-${config.componentName || 'textfield'}-helper`;
-    supportingElement.textContent = config.supportingText;
-    
-    if (config.error) {
-      supportingElement.classList.add(`${PREFIX}-${config.componentName || 'textfield'}-helper--error`);
-      component.element.classList.add(`${PREFIX}-${config.componentName || 'textfield'}--error`);
-    }
-    
-    // Add supporting text to the component
-    component.element.appendChild(supportingElement);
-    
-    // Add lifecycle integration if available
-    if ('lifecycle' in component && component.lifecycle?.destroy) {
-      const originalDestroy = component.lifecycle.destroy;
-      component.lifecycle.destroy = () => {
-        supportingElement.remove();
-        originalDestroy.call(component.lifecycle);
-      };
-    }
-
-    return {
-      ...component,
-      supportingTextElement: supportingElement,
-      
-      setSupportingText(text: string, isError = false) {
-        supportingElement.textContent = text;
-        
-        // Handle error state
-        supportingElement.classList.toggle(`${PREFIX}-${config.componentName || 'textfield'}-helper--error`, isError);
-        component.element.classList.toggle(`${PREFIX}-${config.componentName || 'textfield'}--error`, isError);
-        
-        return this;
-      },
-      
-      removeSupportingText() {
-        if (supportingElement.parentNode) {
-          supportingElement.remove();
-          this.supportingTextElement = null;
-          component.element.classList.remove(`${PREFIX}-${config.componentName || 'textfield'}--error`);
-        }
-        return this;
-      }
-    };
-  };