@tachui/core 0.7.0-alpha1 → 0.8.0-alpha

package/src/components/Menu.ts

@@ -1,807 +0,0 @@
-/**
- * Menu Component
- *
- * SwiftUI-inspired Menu component with dropdowns, context menus,
- * positioning, and keyboard navigation support.
- */
-
-import type { ModifiableComponent, ModifierBuilder } from '../modifiers/types'
-import { createEffect, createSignal, isSignal } from '../reactive'
-import type { Signal } from '../reactive/types'
-import { h } from '../runtime'
-import type { ComponentInstance, ComponentProps, DOMNode } from '../runtime/types'
-import { withModifiers } from './wrapper'
-import { useLifecycle, AnimationManager, FocusManager, setupPositioning } from '../lifecycle/hooks'
-
-/**
- * Menu item configuration
- */
-export interface MenuItem {
-  id?: string
-  title: string | Signal<string>
-  systemImage?: string
-  shortcut?: string
-  disabled?: boolean | Signal<boolean>
-  destructive?: boolean
-  role?: 'default' | 'destructive' | 'cancel'
-  action?: () => void | Promise<void>
-  submenu?: MenuItem[]
-}
-
-/**
- * Menu positioning options
- */
-export type MenuPlacement =
-  | 'bottom'
-  | 'bottom-start'
-  | 'bottom-end'
-  | 'top'
-  | 'top-start'
-  | 'top-end'
-  | 'right'
-  | 'right-start'
-  | 'right-end'
-  | 'left'
-  | 'left-start'
-  | 'left-end'
-
-/**
- * Menu component properties
- */
-export interface MenuProps extends ComponentProps {
-  // Content
-  items: MenuItem[]
-
-  // Trigger
-  trigger: ComponentInstance | HTMLElement | (() => ComponentInstance | HTMLElement)
-
-  // Visibility
-  isOpen?: Signal<boolean>
-
-  // Behavior
-  placement?: MenuPlacement
-  closeOnSelect?: boolean
-  closeOnClickOutside?: boolean
-  escapeKeyCloses?: boolean
-
-  // Positioning
-  offset?: { x: number; y: number }
-  flip?: boolean
-  shift?: boolean
-
-  // Animation
-  animationDuration?: number
-
-  // Accessibility
-  accessibilityLabel?: string
-}
-
-/**
- * Menu theme configuration
- */
-export interface MenuTheme {
-  colors: {
-    background: string
-    surface: string
-    text: string
-    textSecondary: string
-    textDisabled: string
-    textDestructive: string
-    border: string
-    hover: string
-    active: string
-    separator: string
-    shortcut: string
-    backdrop: string
-  }
-  spacing: {
-    padding: number
-    itemPadding: number
-    gap: number
-  }
-  borderRadius: number
-  minWidth: number
-  maxWidth: number
-  itemHeight: number
-  shadow: string
-  backdropBlur: string
-}
-
-/**
- * Default menu theme
- */
-export const defaultMenuTheme: MenuTheme = {
-  colors: {
-    background: '#FFFFFF',
-    surface: '#F8F9FA',
-    text: '#1A1A1A',
-    textSecondary: '#6B7280',
-    textDisabled: '#A0A0A0',
-    textDestructive: '#FF3B30',
-    border: '#E5E5E5',
-    hover: '#F0F0F0',
-    active: '#E3F2FD',
-    separator: '#E5E5E5',
-    shortcut: '#8E8E93',
-    backdrop: 'rgba(0, 0, 0, 0.1)',
-  },
-  spacing: {
-    padding: 8,
-    itemPadding: 12,
-    gap: 4,
-  },
-  borderRadius: 8,
-  minWidth: 200,
-  maxWidth: 320,
-  itemHeight: 36,
-  shadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
-  backdropBlur: 'blur(2px)',
-}
-
-/**
- * Menu component implementation
- */
-export class MenuComponent implements ComponentInstance<MenuProps> {
-  public readonly type = 'component' as const
-  public readonly id: string
-  public readonly props: MenuProps
-  public cleanup: (() => void)[] = []
-  private theme: MenuTheme = defaultMenuTheme
-  private isOpenSignal = createSignal(false)
-  private get isOpen() {
-    return this.isOpenSignal[0]
-  }
-  private get setIsOpen() {
-    return this.isOpenSignal[1]
-  }
-  private focusedIndex = -1
-  private menuElement: HTMLElement | null = null
-  private triggerElement: HTMLElement | null = null
-
-  constructor(props: MenuProps) {
-    this.props = props
-    this.id = `menu-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
-
-    // Use provided isOpen signal or internal one
-    if (this.props.isOpen) {
-      this.isOpenSignal = [
-        this.props.isOpen,
-        ((value: boolean | ((prev: boolean) => boolean)) => {
-          if (typeof this.props.isOpen === 'function') {
-            ;(this.props.isOpen as any)(
-              typeof value === 'function' ? value((this.props.isOpen as any)()) : value
-            )
-          }
-        }) as any,
-      ]
-    }
-
-    // ENHANCED: Set up lifecycle hooks for menu positioning and animations
-    useLifecycle(this, {
-      onDOMReady: (_elements, primaryElement) => {
-        if (primaryElement) {
-          // Set up menu positioning when DOM is ready
-          this.setupMenuPositioning(primaryElement)
-          
-          // Set up animation and focus management
-          this.setupMenuAnimations(primaryElement)
-        }
-      }
-    })
-  }
-
-  private resolveValue<T>(value: T | Signal<T>): T {
-    return isSignal(value) ? value() : value
-  }
-
-  /**
-   * Set up menu positioning using enhanced lifecycle (ENHANCED Phase 3)
-   */
-  private setupMenuPositioning(_containerElement: Element): void {
-    // Positioning is now handled via onDOMReady hooks when menu elements are guaranteed to exist
-    // No more setTimeout positioning hacks needed
-    if (!this.cleanup) this.cleanup = []
-    
-    // Set up positioning calculation that runs when both trigger and menu exist
-    setupPositioning(
-      this,
-      `[data-menu-trigger="${this.id}"]`,
-      `[data-menu-content="${this.id}"]`,
-      (trigger, menu) => this.calculatePosition(trigger as HTMLElement, menu as HTMLElement)
-    )
-  }
-
-  /**
-   * Set up menu animations using enhanced lifecycle (ENHANCED Phase 3)
-   */
-  private setupMenuAnimations(_containerElement: Element): void {
-    // Animation coordination now handled by AnimationManager instead of setTimeout
-    // Focus management handled by FocusManager instead of setTimeout
-    if (!this.cleanup) this.cleanup = []
-  }
-
-  private getVisibleItems(): MenuItem[] {
-    return this.props.items.filter((item) => item.title !== '---') // Exclude separators
-  }
-
-  private createMenuItem(item: MenuItem, index: number): DOMNode {
-    if (item.title === '---') {
-      // Separator
-      return h('div', {
-        role: 'separator',
-        style: {
-          height: '1px',
-          backgroundColor: this.theme.colors.separator,
-          margin: `${this.theme.spacing.gap}px 0`,
-        },
-      })
-    }
-
-    const isDisabled = this.resolveValue(item.disabled ?? false)
-    const title = this.resolveValue(item.title)
-
-    const menuItem = h('div', {
-      role: 'menuitem',
-      tabindex: isDisabled ? '-1' : '0',
-      'aria-disabled': isDisabled,
-      'data-menu-item-index': index,
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        padding: `${this.theme.spacing.itemPadding}px`,
-        minHeight: `${this.theme.itemHeight}px`,
-        fontSize: '14px',
-        fontWeight: '400',
-        color: isDisabled
-          ? this.theme.colors.textDisabled
-          : item.destructive || item.role === 'destructive'
-            ? this.theme.colors.textDestructive
-            : this.theme.colors.text,
-        cursor: isDisabled ? 'default' : 'pointer',
-        borderRadius: `${this.theme.borderRadius / 2}px`,
-        transition: 'all 150ms ease-out',
-        userSelect: 'none',
-      },
-      onclick: async (e: Event) => {
-        if (isDisabled) return
-
-        e.preventDefault()
-        e.stopPropagation()
-
-        if (item.action) {
-          try {
-            await item.action()
-          } catch (error) {
-            console.error('Menu item action failed:', error)
-          }
-        }
-
-        if (this.props.closeOnSelect ?? true) {
-          this.setIsOpenValue(false)
-        }
-      },
-      onmouseenter: () => {
-        if (!isDisabled) {
-          this.focusedIndex = index
-          this.updateItemFocus()
-          const element = menuItem.element as HTMLElement
-          if (element) element.style.backgroundColor = this.theme.colors.hover
-        }
-      },
-      onmouseleave: () => {
-        if (!isDisabled) {
-          const element = menuItem.element as HTMLElement
-          if (element) element.style.backgroundColor = 'transparent'
-        }
-      },
-    })
-
-    // Content container
-    const content = h('div', {
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: `${this.theme.spacing.gap * 2}px`,
-      },
-    })
-
-    // System image/icon
-    if (item.systemImage) {
-      const icon = h('span', {
-        style: {
-          fontSize: '16px',
-          color: 'inherit',
-        },
-      })
-      const iconElement = icon.element as HTMLElement
-      if (iconElement) iconElement.textContent = item.systemImage
-      const contentElement = content.element as HTMLElement
-      if (contentElement && iconElement) contentElement.appendChild(iconElement)
-    }
-
-    // Title
-    const titleElement = h('span')
-    const titleElementDOM = titleElement.element as HTMLElement
-    if (titleElementDOM) titleElementDOM.textContent = title
-    const contentElement = content.element as HTMLElement
-    if (contentElement && titleElementDOM) contentElement.appendChild(titleElementDOM)
-
-    const menuItemElement = menuItem.element as HTMLElement
-    if (menuItemElement && contentElement) menuItemElement.appendChild(contentElement)
-
-    // Keyboard shortcut
-    if (item.shortcut) {
-      const shortcut = h('span', {
-        style: {
-          fontSize: '12px',
-          color: this.theme.colors.shortcut,
-          fontFamily: 'monospace',
-        },
-      })
-      const shortcutElement = shortcut.element as HTMLElement
-      if (shortcutElement) shortcutElement.textContent = item.shortcut
-      if (menuItemElement && shortcutElement) menuItemElement.appendChild(shortcutElement)
-    }
-
-    // Submenu indicator
-    if (item.submenu && item.submenu.length > 0) {
-      const indicator = h('span', {
-        style: {
-          fontSize: '12px',
-          color: this.theme.colors.textSecondary,
-        },
-      })
-      const indicatorElement = indicator.element as HTMLElement
-      if (indicatorElement) indicatorElement.textContent = '▶'
-      if (menuItemElement && indicatorElement) menuItemElement.appendChild(indicatorElement)
-    }
-
-    return menuItem
-  }
-
-  private updateItemFocus(): void {
-    if (!this.menuElement) return
-
-    const items = this.menuElement.querySelectorAll('[role="menuitem"]')
-    items.forEach((item, index) => {
-      const element = item as HTMLElement
-      if (index === this.focusedIndex) {
-        element.style.backgroundColor = this.theme.colors.hover
-        element.focus()
-      } else {
-        element.style.backgroundColor = 'transparent'
-      }
-    })
-  }
-
-  private handleKeyDown = (e: KeyboardEvent): void => {
-    if (!this.isOpen()) return
-
-    const visibleItems = this.getVisibleItems()
-
-    switch (e.key) {
-      case 'Escape':
-        if (this.props.escapeKeyCloses ?? true) {
-          e.preventDefault()
-          this.setIsOpenValue(false)
-        }
-        break
-
-      case 'ArrowDown':
-        e.preventDefault()
-        this.focusedIndex = Math.min(this.focusedIndex + 1, visibleItems.length - 1)
-        this.updateItemFocus()
-        break
-
-      case 'ArrowUp':
-        e.preventDefault()
-        this.focusedIndex = Math.max(this.focusedIndex - 1, 0)
-        this.updateItemFocus()
-        break
-
-      case 'Enter':
-      case ' ':
-        if (this.focusedIndex >= 0 && this.focusedIndex < visibleItems.length) {
-          e.preventDefault()
-          // const item = visibleItems[this.focusedIndex]
-          const menuItem = this.menuElement?.querySelector(
-            `[data-menu-item-index="${this.focusedIndex}"]`
-          ) as HTMLElement
-          if (menuItem) {
-            menuItem.click()
-          }
-        }
-        break
-
-      case 'Home':
-        e.preventDefault()
-        this.focusedIndex = 0
-        this.updateItemFocus()
-        break
-
-      case 'End':
-        e.preventDefault()
-        this.focusedIndex = visibleItems.length - 1
-        this.updateItemFocus()
-        break
-    }
-  }
-
-  private calculatePosition(trigger: HTMLElement, menu: HTMLElement): { x: number; y: number } {
-    const triggerRect = trigger.getBoundingClientRect()
-    const menuRect = menu.getBoundingClientRect()
-    const viewport = {
-      width: window.innerWidth,
-      height: window.innerHeight,
-    }
-
-    const placement = this.props.placement ?? 'bottom'
-    const offset = this.props.offset ?? { x: 0, y: 4 }
-
-    let x = 0
-    let y = 0
-
-    // Calculate base position based on placement
-    switch (placement) {
-      case 'bottom':
-      case 'bottom-start':
-      case 'bottom-end':
-        y = triggerRect.bottom + offset.y
-        break
-      case 'top':
-      case 'top-start':
-      case 'top-end':
-        y = triggerRect.top - menuRect.height - offset.y
-        break
-      case 'right':
-      case 'right-start':
-      case 'right-end':
-        x = triggerRect.right + offset.x
-        break
-      case 'left':
-      case 'left-start':
-      case 'left-end':
-        x = triggerRect.left - menuRect.width - offset.x
-        break
-    }
-
-    switch (placement) {
-      case 'bottom':
-      case 'top':
-        x = triggerRect.left + (triggerRect.width - menuRect.width) / 2
-        break
-      case 'bottom-start':
-      case 'top-start':
-        x = triggerRect.left
-        break
-      case 'bottom-end':
-      case 'top-end':
-        x = triggerRect.right - menuRect.width
-        break
-      case 'right':
-      case 'left':
-        y = triggerRect.top + (triggerRect.height - menuRect.height) / 2
-        break
-      case 'right-start':
-      case 'left-start':
-        y = triggerRect.top
-        break
-      case 'right-end':
-      case 'left-end':
-        y = triggerRect.bottom - menuRect.height
-        break
-    }
-
-    // Handle flipping and shifting if enabled
-    if (this.props.flip ?? true) {
-      if (y + menuRect.height > viewport.height && triggerRect.top > menuRect.height) {
-        y = triggerRect.top - menuRect.height - offset.y
-      }
-      if (x + menuRect.width > viewport.width && triggerRect.left > menuRect.width) {
-        x = triggerRect.left - menuRect.width - offset.x
-      }
-    }
-
-    if (this.props.shift ?? true) {
-      x = Math.max(8, Math.min(x, viewport.width - menuRect.width - 8))
-      y = Math.max(8, Math.min(y, viewport.height - menuRect.height - 8))
-    }
-
-    return { x, y }
-  }
-
-  private createMenuContent(): DOMNode {
-    const menu = h('div', {
-      role: 'menu',
-      'aria-labelledby': `${this.id}-trigger`,
-      'data-menu-id': this.id,
-      'data-menu-content': this.id, // ENHANCED: Add data attribute for lifecycle hooks
-      style: {
-        position: 'fixed',
-        backgroundColor: this.theme.colors.background,
-        border: `1px solid ${this.theme.colors.border}`,
-        borderRadius: `${this.theme.borderRadius}px`,
-        boxShadow: this.theme.shadow,
-        minWidth: `${this.theme.minWidth}px`,
-        maxWidth: `${this.theme.maxWidth}px`,
-        padding: `${this.theme.spacing.padding}px`,
-        zIndex: '9999',
-        opacity: '0',
-        transform: 'scale(0.95)',
-        transformOrigin: 'top',
-        transition: `all ${this.props.animationDuration || 150}ms cubic-bezier(0.16, 1, 0.3, 1)`,
-      },
-    })
-
-    // Create menu items
-    this.props.items.forEach((item, index) => {
-      const menuItem = this.createMenuItem(item, index)
-      const menuElement = menu.element as HTMLElement
-      const menuItemElement = menuItem.element as HTMLElement
-      if (menuElement && menuItemElement) {
-        menuElement.appendChild(menuItemElement)
-      }
-    })
-
-    this.menuElement = menu.element as HTMLElement
-    return menu
-  }
-
-  private setupTrigger(): HTMLElement {
-    let trigger: HTMLElement
-
-    if (typeof this.props.trigger === 'function') {
-      const result = this.props.trigger()
-      if ('render' in result) {
-        const rendered = result.render()
-        if (Array.isArray(rendered)) {
-          trigger = rendered[0]?.element as HTMLElement
-        } else {
-          trigger = rendered instanceof HTMLElement ? rendered : (rendered?.element as HTMLElement)
-        }
-      } else {
-        trigger = result as HTMLElement
-      }
-    } else if ('render' in this.props.trigger) {
-      const rendered = this.props.trigger.render()
-      if (Array.isArray(rendered)) {
-        trigger = rendered[0]?.element as HTMLElement
-      } else {
-        trigger = rendered instanceof HTMLElement ? rendered : (rendered?.element as HTMLElement)
-      }
-    } else {
-      trigger = this.props.trigger as HTMLElement
-    }
-
-    trigger.id = trigger.id || `${this.id}-trigger`
-    trigger.setAttribute('aria-haspopup', 'menu')
-    trigger.setAttribute('aria-expanded', String(this.isOpen()))
-    trigger.setAttribute('data-menu-trigger', this.id) // ENHANCED: Add data attribute for lifecycle hooks
-
-    trigger.addEventListener('click', (e) => {
-      e.preventDefault()
-      e.stopPropagation()
-      this.setIsOpenValue(!this.isOpen())
-    })
-
-    this.triggerElement = trigger
-    return trigger
-  }
-
-  render(): DOMNode {
-    const container = h('div', {
-      style: {
-        position: 'relative',
-        display: 'inline-block',
-      },
-    })
-
-    // Setup trigger
-    const trigger = this.setupTrigger()
-    if (container.element && trigger) {
-      ;(container.element as HTMLElement).appendChild(trigger)
-    }
-
-    // Create reactive effect for menu visibility
-    createEffect(() => {
-      const isOpenValue = this.isOpen()
-
-      if (isOpenValue) {
-        // Show menu
-        const menu = this.createMenuContent()
-        const menuElement = menu.element as HTMLElement
-        if (menuElement) {
-          document.body.appendChild(menuElement)
-          this.menuElement = menuElement
-        }
-
-        // ENHANCED: Position and animate menu using lifecycle hooks
-        if (this.triggerElement && this.menuElement) {
-          // Immediate positioning - no setTimeout needed
-          const position = this.calculatePosition(this.triggerElement, this.menuElement)
-          this.menuElement.style.left = `${position.x}px`
-          this.menuElement.style.top = `${position.y}px`
-          
-          // Use AnimationManager for smooth animation
-          AnimationManager.scaleIn(this, this.menuElement, this.props.animationDuration || 150)
-          
-          // Use FocusManager for proper focus handling
-          this.focusedIndex = 0
-          FocusManager.focusWhenReady(this, '[role="menuitem"]', this.menuElement)
-        }
-
-        // Add event listeners
-        document.addEventListener('keydown', this.handleKeyDown)
-        document.addEventListener('click', this.handleClickOutside)
-
-        // Update trigger aria-expanded
-        this.triggerElement?.setAttribute('aria-expanded', 'true')
-      } else {
-        // ENHANCED: Hide menu using transition event listener instead of setTimeout
-        if (this.menuElement) {
-          this.menuElement.style.opacity = '0'
-          this.menuElement.style.transform = 'scale(0.95)'
-
-          // Use transition event listener for cleanup
-          const handleTransitionEnd = () => {
-            if (this.menuElement?.parentNode) {
-              document.body.removeChild(this.menuElement)
-              this.menuElement = null
-            }
-            this.menuElement?.removeEventListener('transitionend', handleTransitionEnd)
-          }
-          this.menuElement.addEventListener('transitionend', handleTransitionEnd)
-          
-          // Fallback timeout in case transition doesn't fire (rare edge case)
-          const fallbackTimeout = setTimeout(() => {
-            this.menuElement?.removeEventListener('transitionend', handleTransitionEnd)
-            handleTransitionEnd()
-          }, this.props.animationDuration || 150)
-          
-          // Store cleanup for fallback timeout
-          if (!this.cleanup) this.cleanup = []
-          this.cleanup.push(() => {
-            if (fallbackTimeout) clearTimeout(fallbackTimeout)
-          })
-        }
-
-        // Remove event listeners
-        document.removeEventListener('keydown', this.handleKeyDown)
-        document.removeEventListener('click', this.handleClickOutside)
-
-        // Update trigger aria-expanded
-        this.triggerElement?.setAttribute('aria-expanded', 'false')
-
-        // Reset focus index
-        this.focusedIndex = -1
-      }
-    })
-
-    return container
-  }
-
-  private handleClickOutside = (e: Event): void => {
-    if (!(this.props.closeOnClickOutside ?? true)) return
-
-    const target = e.target as Element
-    const isInsideMenu = this.menuElement?.contains(target)
-    const isInsideTrigger = this.triggerElement?.contains(target)
-
-    if (!isInsideMenu && !isInsideTrigger) {
-      this.setIsOpenValue(false)
-    }
-  }
-
-  private setIsOpenValue = (value: boolean): void => {
-    if (this.props.isOpen) {
-      // For controlled component, the signal setter should be used directly
-      if (typeof this.props.isOpen === 'function') {
-        ;(this.props.isOpen as any)(value)
-      }
-    } else {
-      this.setIsOpen(value)
-    }
-  }
-}
-
-/**
- * Create a Menu component
- */
-export function Menu(
-  props: MenuProps
-): ModifiableComponent<MenuProps> & { modifier: ModifierBuilder<ModifiableComponent<MenuProps>> } {
-  return withModifiers(new MenuComponent(props))
-}
-
-/**
- * Menu utility functions and presets
- */
-export const MenuUtils = {
-  /**
-   * Create a separator item
-   */
-  separator(): MenuItem {
-    return { title: '---' }
-  },
-
-  /**
-   * Create a destructive menu item
-   */
-  destructive(title: string, action: () => void, systemImage?: string): MenuItem {
-    return {
-      title,
-      action,
-      destructive: true,
-      systemImage,
-    }
-  },
-
-  /**
-   * Create a menu item with keyboard shortcut
-   */
-  withShortcut(
-    title: string,
-    shortcut: string,
-    action: () => void,
-    systemImage?: string
-  ): MenuItem {
-    return {
-      title,
-      shortcut,
-      action,
-      systemImage,
-    }
-  },
-
-  /**
-   * Create a context menu for right-click interactions
-   */
-  contextMenu(target: HTMLElement, items: MenuItem[]): void {
-    const [isOpen, setIsOpen] = createSignal(false)
-    const [position, setPosition] = createSignal({ x: 0, y: 0 })
-
-    target.addEventListener('contextmenu', (e) => {
-      e.preventDefault()
-      setPosition({ x: e.clientX, y: e.clientY })
-      setIsOpen(true)
-    })
-
-    // Note: This is a stub implementation
-    // Full context menu positioning would require additional DOM manipulation
-    console.log('Context menu requested', { items, position: position(), isOpen: isOpen() })
-  },
-}
-
-/**
- * Menu styles and theming
- */
-export const MenuStyles = {
-  theme: defaultMenuTheme,
-
-  /**
-   * Create a custom menu theme
-   */
-  createTheme(overrides: Partial<MenuTheme>): MenuTheme {
-    return { ...defaultMenuTheme, ...overrides }
-  },
-
-  /**
-   * Dark theme preset
-   */
-  darkTheme(): MenuTheme {
-    return {
-      ...defaultMenuTheme,
-      colors: {
-        ...defaultMenuTheme.colors,
-        background: '#2A2A2A',
-        surface: '#3A3A3A',
-        text: '#FFFFFF',
-        textSecondary: '#A0A0A0',
-        border: '#404040',
-        hover: '#404040',
-        active: '#0066CC',
-      },
-    }
-  },
-}