mtrl 0.3.6 → 0.3.8

package/src/components/select/api.ts

@@ -0,0 +1,78 @@
+// src/components/select/api.ts
+import { SelectComponent, ApiOptions, SelectOption } from './types';
+
+/**
+ * Enhances a select component with API methods
+ * @param options - API configuration options
+ * @returns Higher-order function that adds API methods to component
+ * @internal
+ */
+export const withAPI = (options: ApiOptions) => 
+  (component: any): SelectComponent => ({
+    ...component,
+    element: component.element,
+    textfield: component.textfield,
+    menu: component.menu,
+    
+    getValue: options.select.getValue,
+    
+    setValue(value: string): SelectComponent {
+      options.select.setValue(value);
+      return this;
+    },
+    
+    getText: options.select.getText,
+    
+    getSelectedOption: options.select.getSelectedOption,
+    
+    getOptions: options.select.getOptions,
+    
+    setOptions(options: SelectOption[]): SelectComponent {
+      options.select.setOptions(options);
+      return this;
+    },
+    
+    open(interactionType: 'mouse' | 'keyboard' = 'mouse'): SelectComponent {
+      options.select.open(undefined, interactionType);
+      return this;
+    },
+    
+    close(): SelectComponent {
+      options.select.close();
+      return this;
+    },
+    
+    isOpen: options.select.isOpen,
+    
+    on(event, handler) {
+      if (options.events?.on) {
+        options.events.on(event, handler);
+      } else if (component.on) {
+        component.on(event, handler);
+      }
+      return this;
+    },
+    
+    off(event, handler) {
+      if (options.events?.off) {
+        options.events.off(event, handler);
+      } else if (component.off) {
+        component.off(event, handler);
+      }
+      return this;
+    },
+    
+    enable(): SelectComponent {
+      options.disabled.enable();
+      return this;
+    },
+    
+    disable(): SelectComponent {
+      options.disabled.disable();
+      return this;
+    },
+    
+    destroy() {
+      options.lifecycle.destroy();
+    }
+  });

package/src/components/select/config.ts

@@ -0,0 +1,76 @@
+// src/components/select/config.ts
+
+import { 
+  createComponentConfig, 
+  createElementConfig
+} from '../../core/config/component-config';
+import { SelectConfig, BaseComponent, ApiOptions } from './types';
+
+/**
+ * Default configuration for the Select component
+ */
+export const defaultConfig: SelectConfig = {
+  options: [],
+  variant: 'filled',
+  placement: 'bottom-start'
+};
+
+/**
+ * Creates the base configuration for Select component
+ * @param {SelectConfig} config - User provided configuration
+ * @returns {SelectConfig} Complete configuration with defaults applied
+ */
+export const createBaseConfig = (config: SelectConfig = {}): SelectConfig => 
+  createComponentConfig(defaultConfig, config, 'select') as SelectConfig;
+
+/**
+ * Creates API configuration for the Select component
+ * @param {BaseComponent} comp - Component with select features
+ * @returns {ApiOptions} API configuration object
+ */
+export const getApiConfig = (comp: BaseComponent): ApiOptions => ({
+  select: {
+    getValue: comp.select?.getValue || (() => null),
+    setValue: comp.select?.setValue || (() => comp),
+    getText: comp.select?.getText || (() => ''),
+    getSelectedOption: comp.select?.getSelectedOption || (() => null),
+    getOptions: comp.select?.getOptions || (() => []),
+    setOptions: comp.select?.setOptions || (() => comp),
+    open: comp.select?.open || (() => comp),
+    close: comp.select?.close || (() => comp),
+    isOpen: comp.select?.isOpen || (() => false)
+  },
+  events: {
+    on: comp.on || (() => comp),
+    off: comp.off || (() => comp)
+  },
+  disabled: {
+    enable: () => {
+      if (comp.textfield?.enable) {
+        comp.textfield.enable();
+      }
+      return comp;
+    },
+    disable: () => {
+      if (comp.textfield?.disable) {
+        comp.textfield.disable();
+      }
+      return comp;
+    }
+  },
+  lifecycle: {
+    destroy: () => {
+      if (comp.textfield?.destroy) {
+        comp.textfield.destroy();
+      }
+      if (comp.menu?.destroy) {
+        comp.menu.destroy();
+      }
+      if (comp.lifecycle?.destroy) {
+        comp.lifecycle.destroy();
+      }
+    }
+  }
+});
+
+export default defaultConfig;

package/src/components/select/features.ts

@@ -0,0 +1,331 @@
+// 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/index.ts

@@ -0,0 +1,38 @@
+// src/components/select/index.ts
+
+/**
+ * Select Component Module
+ * 
+ * The Select component provides a dropdown select control,
+ * combining a textfield and menu for a complete selection interface.
+ * 
+ * @module components/select
+ * @category Components
+ */
+
+// Export main component factory
+export { default } from './select';
+
+// Export types and interfaces
+export type { 
+  SelectConfig, 
+  SelectComponent,
+  SelectOption,
+  SelectEvent,
+  SelectChangeEvent
+} from './types';
+
+/**
+ * Constants for select configuration
+ * 
+ * @example
+ * import { createSelect, SELECT_VARIANTS } from 'mtrl';
+ * 
+ * const select = createSelect({
+ *   variant: SELECT_VARIANTS.OUTLINED,
+ *   options: [...]
+ * });
+ * 
+ * @category Components
+ */
+export { SELECT_VARIANTS } from './types';

package/src/components/select/select.ts

@@ -0,0 +1,73 @@
+// 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;