mtrl 0.2.2 → 0.2.3

package/src/components/tooltip/api.ts

@@ -0,0 +1,411 @@
+// src/components/tooltip/api.ts
+import { TooltipComponent } from './types';
+import { TOOLTIP_POSITIONS, DEFAULT_OFFSET, DEFAULT_ARROW_SIZE } from './constants';
+
+interface ApiOptions {
+  lifecycle: {
+    destroy: () => void;
+  };
+}
+
+interface ComponentWithElements {
+  element: HTMLElement;
+  getClass: (name: string) => string;
+}
+
+/**
+ * Enhances a tooltip component with API methods
+ * @param {ApiOptions} options - API configuration options
+ * @returns {Function} Higher-order function that adds API methods to component
+ * @internal This is an internal utility for the Tooltip component
+ */
+export const withAPI = ({ lifecycle }: ApiOptions) => 
+  (component: ComponentWithElements): TooltipComponent => {
+    // Set up internal state
+    let target: HTMLElement | null = null;
+    let position = TOOLTIP_POSITIONS.BOTTOM;
+    let isVisible = false;
+    let showTimer: number | null = null;
+    let hideTimer: number | null = null;
+    let showDelay = 300;
+    let hideDelay = 100;
+    let showOnFocus = true;
+    let showOnHover = true;
+    
+    // Create arrow element
+    const arrowElement = document.createElement('div');
+    arrowElement.className = `${component.getClass('tooltip')}__arrow`;
+    component.element.appendChild(arrowElement);
+    
+    // Add to body (but hidden initially)
+    document.body.appendChild(component.element);
+    component.element.setAttribute('aria-hidden', 'true');
+    
+    /**
+     * Calculate position based on target element and desired position
+     */
+    const calculatePosition = (): { top: number; left: number; arrowPosition?: string } => {
+      if (!target) return { top: 0, left: 0 };
+      
+      const tooltipRect = component.element.getBoundingClientRect();
+      const targetRect = target.getBoundingClientRect();
+      const scrollY = window.scrollY || window.pageYOffset;
+      const scrollX = window.scrollX || window.pageXOffset;
+      
+      // Default offset
+      const offset = DEFAULT_OFFSET;
+      const arrowSize = DEFAULT_ARROW_SIZE;
+      
+      let top = 0;
+      let left = 0;
+      let arrowPosition: string | undefined;
+      
+      // Calculate position based on position value
+      switch (position) {
+        case TOOLTIP_POSITIONS.TOP:
+          top = targetRect.top + scrollY - tooltipRect.height - offset;
+          left = targetRect.left + scrollX + (targetRect.width / 2) - (tooltipRect.width / 2);
+          arrowPosition = 'bottom';
+          break;
+          
+        case TOOLTIP_POSITIONS.TOP_START:
+          top = targetRect.top + scrollY - tooltipRect.height - offset;
+          left = targetRect.left + scrollX;
+          arrowPosition = 'bottom-start';
+          break;
+          
+        case TOOLTIP_POSITIONS.TOP_END:
+          top = targetRect.top + scrollY - tooltipRect.height - offset;
+          left = targetRect.left + scrollX + targetRect.width - tooltipRect.width;
+          arrowPosition = 'bottom-end';
+          break;
+          
+        case TOOLTIP_POSITIONS.RIGHT:
+          top = targetRect.top + scrollY + (targetRect.height / 2) - (tooltipRect.height / 2);
+          left = targetRect.left + scrollX + targetRect.width + offset;
+          arrowPosition = 'left';
+          break;
+          
+        case TOOLTIP_POSITIONS.RIGHT_START:
+          top = targetRect.top + scrollY;
+          left = targetRect.left + scrollX + targetRect.width + offset;
+          arrowPosition = 'left-start';
+          break;
+          
+        case TOOLTIP_POSITIONS.RIGHT_END:
+          top = targetRect.top + scrollY + targetRect.height - tooltipRect.height;
+          left = targetRect.left + scrollX + targetRect.width + offset;
+          arrowPosition = 'left-end';
+          break;
+          
+        case TOOLTIP_POSITIONS.BOTTOM:
+          top = targetRect.top + scrollY + targetRect.height + offset;
+          left = targetRect.left + scrollX + (targetRect.width / 2) - (tooltipRect.width / 2);
+          arrowPosition = 'top';
+          break;
+          
+        case TOOLTIP_POSITIONS.BOTTOM_START:
+          top = targetRect.top + scrollY + targetRect.height + offset;
+          left = targetRect.left + scrollX;
+          arrowPosition = 'top-start';
+          break;
+          
+        case TOOLTIP_POSITIONS.BOTTOM_END:
+          top = targetRect.top + scrollY + targetRect.height + offset;
+          left = targetRect.left + scrollX + targetRect.width - tooltipRect.width;
+          arrowPosition = 'top-end';
+          break;
+          
+        case TOOLTIP_POSITIONS.LEFT:
+          top = targetRect.top + scrollY + (targetRect.height / 2) - (tooltipRect.height / 2);
+          left = targetRect.left + scrollX - tooltipRect.width - offset;
+          arrowPosition = 'right';
+          break;
+          
+        case TOOLTIP_POSITIONS.LEFT_START:
+          top = targetRect.top + scrollY;
+          left = targetRect.left + scrollX - tooltipRect.width - offset;
+          arrowPosition = 'right-start';
+          break;
+          
+        case TOOLTIP_POSITIONS.LEFT_END:
+          top = targetRect.top + scrollY + targetRect.height - tooltipRect.height;
+          left = targetRect.left + scrollX - tooltipRect.width - offset;
+          arrowPosition = 'right-end';
+          break;
+          
+        default:
+          top = targetRect.top + scrollY + targetRect.height + offset;
+          left = targetRect.left + scrollX + (targetRect.width / 2) - (tooltipRect.width / 2);
+          arrowPosition = 'top';
+      }
+      
+      // Constrain to window boundaries
+      const windowWidth = window.innerWidth;
+      const windowHeight = window.innerHeight;
+      
+      // Adjust horizontal position
+      if (left < 0) {
+        left = 0;
+      } else if (left + tooltipRect.width > windowWidth) {
+        left = windowWidth - tooltipRect.width;
+      }
+      
+      return { top, left, arrowPosition };
+    };
+    
+    /**
+     * Handle events on target element
+     */
+    const addTargetEvents = (targetEl: HTMLElement) => {
+      if (showOnHover) {
+        targetEl.addEventListener('mouseenter', handleTargetMouseEnter);
+        targetEl.addEventListener('mouseleave', handleTargetMouseLeave);
+      }
+      
+      if (showOnFocus) {
+        targetEl.addEventListener('focus', handleTargetFocus);
+        targetEl.addEventListener('blur', handleTargetBlur);
+      }
+    };
+    
+    const removeTargetEvents = (targetEl: HTMLElement) => {
+      if (targetEl) {
+        targetEl.removeEventListener('mouseenter', handleTargetMouseEnter);
+        targetEl.removeEventListener('mouseleave', handleTargetMouseLeave);
+        targetEl.removeEventListener('focus', handleTargetFocus);
+        targetEl.removeEventListener('blur', handleTargetBlur);
+      }
+    };
+    
+    // Event handlers
+    const handleTargetMouseEnter = () => api.show();
+    const handleTargetMouseLeave = () => api.hide();
+    const handleTargetFocus = () => api.show();
+    const handleTargetBlur = () => api.hide();
+    
+    // Create the API object
+    const api: TooltipComponent = {
+      element: component.element,
+      target,
+      lifecycle,
+      
+      getClass: component.getClass,
+      
+      setText(text) {
+        // Create a text node
+        const contentNode = document.createTextNode(text);
+        
+        // Clear existing content
+        while (component.element.firstChild !== arrowElement) {
+          component.element.removeChild(component.element.firstChild);
+        }
+        
+        // Add new content before the arrow
+        component.element.insertBefore(contentNode, arrowElement);
+        
+        // Update position if visible
+        if (isVisible) {
+          this.updatePosition();
+        }
+        
+        return this;
+      },
+      
+      getText() {
+        // Return text content excluding the arrow element
+        const clone = component.element.cloneNode(true) as HTMLElement;
+        const arrowClone = clone.querySelector(`.${component.getClass('tooltip')}__arrow`);
+        if (arrowClone) {
+          arrowClone.remove();
+        }
+        return clone.textContent || '';
+      },
+      
+      setPosition(newPosition) {
+        // Update position value
+        position = newPosition;
+        
+        // Update position class
+        const baseClass = component.getClass('tooltip');
+        
+        // Remove existing position classes
+        const positionClasses = Object.values(TOOLTIP_POSITIONS).map(p => `${baseClass}--${p}`);
+        component.element.classList.remove(...positionClasses);
+        
+        // Add new position class
+        component.element.classList.add(`${baseClass}--${newPosition}`);
+        
+        // Update position if visible
+        if (isVisible) {
+          this.updatePosition();
+        }
+        
+        return this;
+      },
+      
+      getPosition() {
+        return position;
+      },
+      
+      setTarget(newTarget) {
+        // Remove events from old target
+        if (target) {
+          removeTargetEvents(target);
+        }
+        
+        // Set new target
+        target = newTarget;
+        this.target = newTarget;
+        
+        // Set target's aria attributes
+        target.setAttribute('aria-describedby', component.element.id);
+        
+        // Add events to new target
+        addTargetEvents(target);
+        
+        // Update position if visible
+        if (isVisible) {
+          this.updatePosition();
+        }
+        
+        return this;
+      },
+      
+      show(immediate = false) {
+        // Clear any existing timers
+        if (showTimer !== null) {
+          window.clearTimeout(showTimer);
+          showTimer = null;
+        }
+        
+        if (hideTimer !== null) {
+          window.clearTimeout(hideTimer);
+          hideTimer = null;
+        }
+        
+        const showTooltip = () => {
+          if (!target) return this;
+          
+          // Show the tooltip
+          component.element.setAttribute('aria-hidden', 'false');
+          component.element.classList.add(`${component.getClass('tooltip')}--visible`);
+          isVisible = true;
+          
+          // Update position
+          this.updatePosition();
+          
+          // Add resize listener
+          window.addEventListener('resize', handleWindowResize);
+          window.addEventListener('scroll', handleWindowScroll);
+        };
+        
+        if (immediate) {
+          showTooltip();
+        } else {
+          showTimer = window.setTimeout(showTooltip, showDelay);
+        }
+        
+        return this;
+      },
+      
+      hide(immediate = false) {
+        // Clear any existing timers
+        if (hideTimer !== null) {
+          window.clearTimeout(hideTimer);
+          hideTimer = null;
+        }
+        
+        if (showTimer !== null) {
+          window.clearTimeout(showTimer);
+          showTimer = null;
+        }
+        
+        const hideTooltip = () => {
+          // Hide the tooltip
+          component.element.setAttribute('aria-hidden', 'true');
+          component.element.classList.remove(`${component.getClass('tooltip')}--visible`);
+          isVisible = false;
+          
+          // Remove resize and scroll listeners
+          window.removeEventListener('resize', handleWindowResize);
+          window.removeEventListener('scroll', handleWindowScroll);
+        };
+        
+        if (immediate) {
+          hideTooltip();
+        } else {
+          hideTimer = window.setTimeout(hideTooltip, hideDelay);
+        }
+        
+        return this;
+      },
+      
+      isVisible() {
+        return isVisible;
+      },
+      
+      updatePosition() {
+        if (!target) return this;
+        
+        // Calculate position
+        const { top, left, arrowPosition } = calculatePosition();
+        
+        // Update tooltip position
+        component.element.style.top = `${Math.round(top)}px`;
+        component.element.style.left = `${Math.round(left)}px`;
+        
+        // Update arrow position
+        if (arrowPosition) {
+          // Remove existing arrow position classes
+          arrowElement.className = `${component.getClass('tooltip')}__arrow`;
+          // Add new position class
+          arrowElement.classList.add(`${component.getClass('tooltip')}__arrow--${arrowPosition}`);
+        }
+        
+        return this;
+      },
+      
+      destroy() {
+        // Clear timers
+        if (showTimer !== null) {
+          window.clearTimeout(showTimer);
+        }
+        
+        if (hideTimer !== null) {
+          window.clearTimeout(hideTimer);
+        }
+        
+        // Remove target events
+        if (target) {
+          removeTargetEvents(target);
+          target.removeAttribute('aria-describedby');
+        }
+        
+        // Remove window events
+        window.removeEventListener('resize', handleWindowResize);
+        window.removeEventListener('scroll', handleWindowScroll);
+        
+        // Remove from DOM
+        if (component.element.parentNode) {
+          component.element.parentNode.removeChild(component.element);
+        }
+        
+        // Call lifecycle destroy
+        lifecycle.destroy();
+      }
+    };
+    
+    // Window event handlers
+    const handleWindowResize = () => {
+      api.updatePosition();
+    };
+    
+    const handleWindowScroll = () => {
+      api.updatePosition();
+    };
+    
+    return api;
+  };
+
+export default withAPI;

package/src/components/tooltip/config.ts

@@ -0,0 +1,78 @@
+// src/components/tooltip/config.ts
+import { 
+  createComponentConfig, 
+  createElementConfig
+} from '../../core/config/component-config';
+import { TooltipConfig } from './types';
+import { 
+  TOOLTIP_POSITIONS, 
+  TOOLTIP_VARIANTS,
+  DEFAULT_SHOW_DELAY,
+  DEFAULT_HIDE_DELAY
+} from './constants';
+
+/**
+ * Default configuration for the Tooltip component
+ */
+export const defaultConfig: TooltipConfig = {
+  position: TOOLTIP_POSITIONS.BOTTOM,
+  variant: TOOLTIP_VARIANTS.DEFAULT,
+  visible: false,
+  showDelay: DEFAULT_SHOW_DELAY,
+  hideDelay: DEFAULT_HIDE_DELAY,
+  showOnFocus: true,
+  showOnHover: true,
+  rich: false
+};
+
+/**
+ * Creates the base configuration for Tooltip component
+ * @param {TooltipConfig} config - User provided configuration
+ * @returns {TooltipConfig} Complete configuration with defaults applied
+ */
+export const createBaseConfig = (config: TooltipConfig = {}): TooltipConfig => 
+  createComponentConfig(defaultConfig, config, 'tooltip') as TooltipConfig;
+
+/**
+ * Generates element configuration for the Tooltip component
+ * @param {TooltipConfig} config - Tooltip configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export const getElementConfig = (config: TooltipConfig) => {
+  // Create the attributes object
+  const attrs: Record<string, any> = {
+    role: 'tooltip',
+    'aria-hidden': 'true'
+  };
+  
+  // Add z-index if provided
+  if (config.zIndex !== undefined) {
+    attrs['style'] = `z-index: ${config.zIndex};`;
+  }
+  
+  const extraClasses: string[] = [
+    `--${config.position}`,
+    `--${config.variant}`
+  ];
+  
+  return createElementConfig(config, {
+    tag: 'div',
+    attrs,
+    className: config.class,
+    extraClasses,
+    content: config.text || ''
+  });
+};
+
+/**
+ * Creates API configuration for the Tooltip component
+ * @param {Object} comp - Component with lifecycle feature
+ * @returns {Object} API configuration object
+ */
+export const getApiConfig = (comp) => ({
+  lifecycle: {
+    destroy: () => comp.lifecycle.destroy()
+  }
+});
+
+export default defaultConfig;

package/src/components/tooltip/constants.ts

@@ -0,0 +1,27 @@
+// src/components/tooltip/constants.ts
+
+export const TOOLTIP_POSITIONS = {
+  TOP: 'top',
+  RIGHT: 'right',
+  BOTTOM: 'bottom',
+  LEFT: 'left',
+  TOP_START: 'top-start',
+  TOP_END: 'top-end',
+  RIGHT_START: 'right-start',
+  RIGHT_END: 'right-end',
+  BOTTOM_START: 'bottom-start',
+  BOTTOM_END: 'bottom-end',
+  LEFT_START: 'left-start',
+  LEFT_END: 'left-end'
+}
+
+export const TOOLTIP_VARIANTS = {
+  DEFAULT: 'default',
+  RICH: 'rich',
+  PLAIN: 'plain'
+}
+
+export const DEFAULT_SHOW_DELAY = 300
+export const DEFAULT_HIDE_DELAY = 100
+export const DEFAULT_OFFSET = 8
+export const DEFAULT_ARROW_SIZE = 8

package/src/components/tooltip/index.ts

@@ -0,0 +1,4 @@
+// src/components/tooltip/index.ts
+export { default } from './tooltip';
+export { TOOLTIP_POSITIONS, TOOLTIP_VARIANTS } from './constants';
+export { TooltipConfig, TooltipComponent } from './types';

package/src/components/tooltip/tooltip.ts

@@ -0,0 +1,60 @@
+// src/components/tooltip/tooltip.ts
+import { PREFIX } from '../../core/config';
+import { pipe } from '../../core/compose';
+import { createBase, withElement } from '../../core/compose/component';
+import { withLifecycle } from '../../core/compose/features';
+import { withAPI } from './api';
+import { TooltipConfig } from './types';
+import { createBaseConfig, getElementConfig, getApiConfig } from './config';
+
+/**
+ * Creates a unique ID for the tooltip
+ * @returns {string} Unique ID
+ */
+const createTooltipId = (): string => {
+  return `${PREFIX}-tooltip-${Math.random().toString(36).substring(2, 9)}`;
+};
+
+/**
+ * Creates a new Tooltip component
+ * @param {TooltipConfig} config - Tooltip configuration object
+ * @returns {TooltipComponent} Tooltip component instance
+ */
+const createTooltip = (config: TooltipConfig = {}) => {
+  const baseConfig = createBaseConfig(config);
+
+  try {
+    // Create the tooltip element
+    const tooltip = pipe(
+      createBase,
+      withElement(getElementConfig(baseConfig)),
+      withLifecycle(),
+      comp => withAPI(getApiConfig(comp))(comp)
+    )(baseConfig);
+    
+    // Generate a unique ID
+    tooltip.element.id = createTooltipId();
+    
+    // Set target if provided
+    if (baseConfig.target) {
+      tooltip.setTarget(baseConfig.target);
+    }
+    
+    // Set text if provided
+    if (baseConfig.text) {
+      tooltip.setText(baseConfig.text);
+    }
+    
+    // Show tooltip if initially visible
+    if (baseConfig.visible) {
+      tooltip.show(true);
+    }
+
+    return tooltip;
+  } catch (error) {
+    console.error('Tooltip creation error:', error);
+    throw new Error(`Failed to create tooltip: ${(error as Error).message}`);
+  }
+};
+
+export default createTooltip;