mtrl 0.3.8 → 0.4.0

package/src/components/select/features.ts

@@ -1,331 +0,0 @@
-// src/components/select/features.ts
-import createTextfield from '../textfield';
-import createMenu from '../menu';
-import { SelectOption, SelectConfig, BaseComponent } from './types';
-
-/**
- * Creates a textfield for the select component
- * @param config - Select configuration
- * @returns Function that enhances a component with textfield functionality
- */
-export const withTextfield = (config: SelectConfig) => 
-  (component: BaseComponent): BaseComponent => {
-    // Get option text from value if provided
-    let initialText = '';
-    if (config.value) {
-      const option = (config.options || []).find(opt => opt.id === config.value);
-      if (option) {
-        initialText = option.text;
-      }
-    }
-    
-    // Create dropdown icon for the textfield
-    const dropdownIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 10l5 5 5-5H7z"/></svg>';
-    
-    // Create textfield component
-    const textfield = createTextfield({
-      label: config.label,
-      variant: config.variant || 'filled',
-      value: initialText,
-      name: config.name,
-      disabled: config.disabled,
-      required: config.required,
-      supportingText: config.supportingText,
-      error: config.error,
-      trailingIcon: dropdownIcon,
-      readonly: true // Make readonly since selection happens via menu
-    });
-    
-    // Add select-specific class
-    textfield.element.classList.add(`${config.prefix || 'mtrl'}-select`);
-    
-    return {
-      ...component,
-      element: textfield.element,
-      textfield
-    };
-  };
-
-/**
- * Recursively processes select options to create menu items
- * Ensures all items have proper data structure
- * @param options The options to process
- * @returns Properly structured menu items
- */
-const processMenuItems = (options) => {
-  return options.map(option => {
-    if ('type' in option && option.type === 'divider') {
-      return option; // Just pass dividers through
-    }
-    
-    // Create a basic menu item
-    const menuItem = {
-      id: option.id,
-      text: option.text,
-      icon: option.icon,
-      disabled: option.disabled,
-      hasSubmenu: false,
-      data: option
-    };
-    
-    // If this option has a submenu, process those items recursively
-    if (option.hasSubmenu && Array.isArray(option.submenu)) {
-      menuItem.hasSubmenu = true;
-      menuItem.submenu = processMenuItems(option.submenu);
-    }
-    
-    return menuItem;
-  });
-};
-
-/**
- * Creates a menu for the select component with improved keyboard navigation
- * @param config - Select configuration
- * @returns Function that enhances a component with menu functionality
- */
-export const withMenu = (config: SelectConfig) => 
-  (component: BaseComponent): BaseComponent => {
-    if (!component.textfield) {
-      console.warn('Cannot add menu: textfield not found');
-      return component;
-    }
-    
-    // Initialize state
-    const state = {
-      options: config.options || [],
-      selectedOption: null as SelectOption
-    };
-    
-    // Find initial selected option
-    if (config.value) {
-      state.selectedOption = state.options.find(opt => opt.id === config.value);
-    }
-    
-    // Convert options to menu items with proper recursive processing
-    const menuItems = processMenuItems(state.options);
-    
-    // Create menu component
-    const menu = createMenu({
-      anchor: component.textfield.element,
-      items: menuItems,
-      placement: config.placement || 'bottom-start',
-      width: '100%', // Match width of textfield
-      closeOnSelect: true,
-      closeOnClickOutside: true,
-      closeOnEscape: true,
-      offset: 0 // Set offset to 0 to eliminate gap between textfield and menu
-    });
-    
-    // This flag helps us know if we need to restore focus after menu closes
-    let needsFocusRestore = false;
-    
-    // Handle menu selection
-    menu.on('select', (event) => {
-      // Safely access data properties with proper type checking
-      if (!event.item || event.item.hasSubmenu) {
-        return; // Skip processing for submenu items
-      }
-      
-      // Safely extract the option data and validate it
-      const option = event.item.data;
-      if (!option || !('id' in option) || !('text' in option)) {
-        console.warn('Invalid menu selection: missing required data properties');
-        return;
-      }
-      
-      state.selectedOption = option;
-      
-      // Update textfield
-      component.textfield.setValue(option.text);
-      
-      // Update the selected state in the menu
-      menu.setSelected(option.id);
-      
-      // Set flag to restore focus after menu closes
-      needsFocusRestore = true;
-      
-      // Emit change event
-      if (component.emit) {
-        component.emit('change', {
-          select: component,
-          value: option.id,
-          text: option.text,
-          option,
-          originalEvent: event.originalEvent,
-          preventDefault: () => { event.defaultPrevented = true; },
-          defaultPrevented: false
-        });
-      }
-    });
-    
-    // Add keyboard event listener for textfield
-    component.textfield.element.addEventListener('keydown', (e) => {
-      if (component.textfield.input.disabled) return;
-      
-      // Handle keyboard-based open
-      if ((e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') && !menu.isOpen()) {
-        e.preventDefault();
-        
-        // Set flag to restore focus
-        needsFocusRestore = true;
-        
-        // Open menu with keyboard interaction
-        menu.open(e, 'keyboard');
-        
-        // Ensure textfield keeps focus
-        setTimeout(() => {
-          // Focus on the textfield to ensure we can capture further keyboard events
-          component.textfield.input.focus();
-        }, 50);
-        
-        // Emit open event
-        if (component.emit) {
-          component.emit('open', {
-            select: component,
-            originalEvent: e,
-            preventDefault: () => {},
-            defaultPrevented: false
-          });
-        }
-      } else if (e.key === 'Escape' && menu.isOpen()) {
-        e.preventDefault();
-        needsFocusRestore = true;
-        menu.close(e);
-      }
-    });
-    
-    // Update textfield styling when menu opens/closes
-    menu.on('open', () => {
-      // Add open class to the select component
-      component.textfield.element.classList.add(`${config.prefix || 'mtrl'}-select--open`);
-      
-      // Add focused class to the textfield
-      const PREFIX = config.prefix || 'mtrl';
-      component.textfield.element.classList.add(`${PREFIX}-textfield--focused`);
-      
-      // If using the filled variant, we need to add focus styles to ensure the label changes color
-      if (component.textfield.element.classList.contains(`${PREFIX}-textfield--filled`)) {
-        component.textfield.element.classList.add(`${PREFIX}-textfield--filled-focused`);
-      }
-    });
-    
-    menu.on('close', (event) => {
-      // Remove open class from the select component
-      component.textfield.element.classList.remove(`${config.prefix || 'mtrl'}-select--open`);
-      
-      // Restore focus to textfield if needed
-      if (needsFocusRestore) {
-        // Small delay to ensure menu is fully closed
-        setTimeout(() => {
-          // Explicitly focus the textfield input
-          component.textfield.input.focus();
-          
-          // Keep focused styling
-          const PREFIX = config.prefix || 'mtrl';
-          component.textfield.element.classList.add(`${PREFIX}-textfield--focused`);
-          
-          if (component.textfield.element.classList.contains(`${PREFIX}-textfield--filled`)) {
-            component.textfield.element.classList.add(`${PREFIX}-textfield--filled-focused`);
-          }
-          
-          // Reset the flag
-          needsFocusRestore = false;
-        }, 50);
-      } else {
-        // Only remove focus styling if we're not restoring focus
-        const PREFIX = config.prefix || 'mtrl';
-        component.textfield.element.classList.remove(`${PREFIX}-textfield--focused`);
-        
-        if (component.textfield.element.classList.contains(`${PREFIX}-textfield--filled`)) {
-          component.textfield.element.classList.remove(`${PREFIX}-textfield--filled-focused`);
-        }
-      }
-      
-      // Emit close event
-      if (component.emit) {
-        component.emit('close', {
-          select: component,
-          originalEvent: event.originalEvent,
-          preventDefault: () => {},
-          defaultPrevented: false
-        });
-      }
-    });
-    
-    // Handle special case for showing selected item in menu
-    const markSelectedMenuItem = () => {
-      if (!state.selectedOption) return;
-      
-      // Use menu's setSelected method to update the selected state
-      menu.setSelected(state.selectedOption.id);
-    };
-    
-    // Mark selected item when menu opens
-    menu.on('open', () => {
-      setTimeout(markSelectedMenuItem, 50); // Small delay to ensure DOM is ready
-    });
-    
-    // Expose select API
-    return {
-      ...component,
-      menu,
-
-      // Select controller
-      select: {
-        getValue: () => state.selectedOption?.id || null,
-        
-        setValue: (value) => {
-          const option = state.options.find(opt => 'id' in opt && opt.id === value);
-          if (option && 'text' in option) {
-            state.selectedOption = option;
-            component.textfield.setValue(option.text);
-            
-            // Update selected state using menu's setSelected
-            menu.setSelected(option.id);
-          }
-          return component;
-        },
-        
-        getText: () => state.selectedOption?.text || '',
-        
-        getSelectedOption: () => state.selectedOption,
-        
-        getOptions: () => [...state.options],
-        
-        setOptions: (options) => {
-          state.options = options;
-          
-          // Process options to menu items with proper handling for submenus
-          const menuItems = processMenuItems(options);
-          menu.setItems(menuItems);
-          
-          // If previously selected option is no longer available, clear selection
-          if (state.selectedOption && !options.find(opt => 
-            'id' in opt && opt.id === state.selectedOption.id)
-          ) {
-            state.selectedOption = null;
-            component.textfield.setValue('');
-          }
-          
-          return component;
-        },
-        
-        open: (event?: Event, interactionType: 'mouse' | 'keyboard' = 'mouse') => {
-          // Set focus restore flag for keyboard interactions
-          if (interactionType === 'keyboard') {
-            needsFocusRestore = true;
-          }
-          
-          menu.open(event, interactionType);
-          return component;
-        },
-        
-        close: () => {
-          menu.close();
-          return component;
-        },
-        
-        isOpen: () => menu.isOpen()
-      }
-    };
-  };

package/src/components/select/select.ts

@@ -1,73 +0,0 @@
-// src/components/select/select.ts
-
-import { pipe } from '../../core/compose';
-import { createBase } from '../../core/compose/component';
-import { withEvents, withLifecycle } from '../../core/compose/features';
-import { withTextfield, withMenu } from './features';
-import { withAPI } from './api';
-import { SelectConfig, SelectComponent } from './types';
-import { createBaseConfig, getApiConfig } from './config';
-
-/**
- * Creates a new Select component with the specified configuration.
- * 
- * The Select component implements a Material Design dropdown select control,
- * combining a textfield and menu to provide a user-friendly selection interface.
- * 
- * @param {SelectConfig} config - Configuration options for the select
- *  This must include an array of selection options. See {@link SelectConfig} for all available options.
- * 
- * @returns {SelectComponent} A fully configured select component
- * 
- * @throws {Error} Throws an error if select creation fails
- * 
- * @example
- * // Create a simple country select
- * const countrySelect = createSelect({
- *   label: 'Country',
- *   options: [
- *     { id: 'us', text: 'United States' },
- *     { id: 'ca', text: 'Canada' },
- *     { id: 'mx', text: 'Mexico' }
- *   ],
- *   value: 'us' // Pre-select United States
- * });
- * 
- * // Add to the DOM
- * document.body.appendChild(countrySelect.element);
- * 
- * // Listen for changes
- * countrySelect.on('change', (event) => {
- *   console.log(`Selected: ${event.value} (${event.text})`);
- * });
- */
-const createSelect = (config: SelectConfig): SelectComponent => {
-  try {
-    // Validate and create the base configuration
-    const baseConfig = createBaseConfig(config);
-    
-    // Create the component through functional composition
-    const select = pipe(
-      createBase,
-      withEvents(),
-      withTextfield(baseConfig),
-      withMenu(baseConfig),
-      withLifecycle(),
-      comp => withAPI(getApiConfig(comp))(comp)
-    )(baseConfig);
-    
-    // Set up initial event handlers if provided
-    if (config.on) {
-      if (config.on.change) select.on('change', config.on.change);
-      if (config.on.open) select.on('open', config.on.open);
-      if (config.on.close) select.on('close', config.on.close);
-    }
-    
-    return select;
-  } catch (error) {
-    console.error('Select creation error:', error);
-    throw new Error(`Failed to create select: ${(error as Error).message}`);
-  }
-};
-
-export default createSelect;