mtrl 0.2.4 → 0.2.6

package/src/components/slider/features/interactions.ts

@@ -1,5 +1,5 @@
 // src/components/slider/features/interactions.ts
-import { SLIDER_EVENTS, SLIDER_ORIENTATIONS } from '../constants';
+import { SLIDER_EVENTS } from '../constants';
 import { SliderConfig, SliderEvent } from '../types';
 
 /**
@@ -42,7 +42,106 @@ export const createInteractionHandlers = (config: SliderConfig, state, handlers)
     triggerEvent = () => ({ defaultPrevented: false })
   } = handlers;
   
-  // Event handlers
+  /**
+   * Clear any existing bubble hide timers
+   */
+  const clearBubbleHideTimer = () => {
+    if (state.valueHideTimer) {
+      clearTimeout(state.valueHideTimer);
+      state.valueHideTimer = null;
+    }
+  };
+  
+  /**
+   * Hide all bubbles immediately
+   */
+  const hideAllBubbles = () => {
+    // Clear any pending hide timers
+    clearBubbleHideTimer();
+    
+    // Hide both bubbles immediately
+    if (valueBubble) {
+      showValueBubble(valueBubble, false);
+    }
+    if (secondValueBubble) {
+      showValueBubble(secondValueBubble, false);
+    }
+  };
+  
+  /**
+   * Clear keyboard focus indicators across all sliders in the document
+   * Not just for this instance, but for any slider thumb
+   */
+  const clearGlobalKeyboardFocus = () => {
+    // First clear local focus indicators
+    if (thumb) {
+      thumb.classList.remove(`${state.component.getClass('slider-thumb')}--focused`);
+    }
+    
+    if (secondThumb) {
+      secondThumb.classList.remove(`${state.component.getClass('slider-thumb')}--focused`);
+    }
+    
+    // Now look for all slider thumbs in the document with the focused class
+    // This covers cases where we switch between sliders
+    try {
+      const focusClass = state.component.getClass('slider-thumb--focused');
+      const allFocusedThumbs = document.querySelectorAll(`.${focusClass}`);
+      
+      // Remove focus class from all thumbs
+      allFocusedThumbs.forEach(element => {
+        element.classList.remove(focusClass);
+      });
+      
+      // Also blur the active element if it's a thumb
+      if (document.activeElement && 
+          document.activeElement.classList.contains(state.component.getClass('slider-thumb'))) {
+        (document.activeElement as HTMLElement).blur();
+      }
+    } catch (error) {
+      console.warn('Error clearing global keyboard focus:', error);
+    }
+  };
+  
+  /**
+   * Show the active bubble with consistent behavior
+   * @param bubble Bubble element to show
+   */
+  const showActiveBubble = (bubble) => {
+    // First hide all bubbles
+    hideAllBubbles();
+    
+    // Then show the active bubble if allowed by config
+    if (bubble && config.showValue) {
+      showValueBubble(bubble, true);
+    }
+  };
+  
+  /**
+   * Hide the active bubble with optional delay
+   * @param bubble Bubble element to hide
+   * @param delay Delay in milliseconds before hiding
+   */
+  const hideActiveBubble = (bubble, delay = 0) => {
+    // Clear any existing timers first
+    clearBubbleHideTimer();
+    
+    if (!bubble || !config.showValue) return;
+    
+    if (delay > 0) {
+      // Set delayed hide
+      state.valueHideTimer = setTimeout(() => {
+        showValueBubble(bubble, false);
+      }, delay);
+    } else {
+      // Hide immediately
+      showValueBubble(bubble, false);
+    }
+  };
+  
+  /**
+   * Handle thumb mouse down with improved bubble handling
+   */
   const handleThumbMouseDown = (e, isSecondThumb = false) => {
     // Verify component exists and check if disabled
     if (!state.component || (state.component.disabled && state.component.disabled.isDisabled())) {
@@ -52,14 +151,21 @@ export const createInteractionHandlers = (config: SliderConfig, state, handlers)
     e.preventDefault();
     e.stopPropagation();
     
+    // First hide any existing visible bubbles
+    hideAllBubbles();
+    
+    // Clear any keyboard focus indicators globally
+    clearGlobalKeyboardFocus();
+    
     state.dragging = true;
     state.activeThumb = isSecondThumb ? secondThumb : thumb;
     state.activeBubble = isSecondThumb ? secondValueBubble : valueBubble;
     
-    // Show value bubble if it exists
-    if (state.activeBubble) {
-      showValueBubble(state.activeBubble, true);
-    }
+    // Add dragging class to component element to style the thumb differently
+    state.component.element.classList.add(`${state.component.getClass('slider')}--dragging`);
+    
+    // Show active bubble
+    showActiveBubble(state.activeBubble);
     
     // Add global event listeners
     document.addEventListener('mousemove', handleMouseMove);
@@ -75,6 +181,9 @@ export const createInteractionHandlers = (config: SliderConfig, state, handlers)
     }
   };
   
+  /**
+   * Handle track mouse down with improved bubble handling
+   */
   const handleTrackMouseDown = (e) => {
     // Verify component exists and check if disabled
     if (!state.component || (state.component.disabled && state.component.disabled.isDisabled()) || !track) {
@@ -83,21 +192,26 @@ export const createInteractionHandlers = (config: SliderConfig, state, handlers)
     
     e.preventDefault();
     
+    // Hide any existing visible bubbles
+    hideAllBubbles();
+    
+    // Clear any keyboard focus indicators globally
+    clearGlobalKeyboardFocus();
+    
     // Determine which thumb to move based on click position
     let isSecondThumb = false;
     
     try {
       // Get track rect for calculating position
       const trackRect = track.getBoundingClientRect();
-      const isVertical = config.orientation === SLIDER_ORIENTATIONS.VERTICAL;
       
       // Get position from mouse or touch event
       const position = e.type.includes('touch')
-        ? isVertical ? e.touches[0].clientY : e.touches[0].clientX
-        : isVertical ? e.clientY : e.clientX;
+        ? e.touches[0].clientX
+        : e.clientX;
       
       // Calculate value at click position
-      let newValue = getValueFromPosition(position, isVertical);
+      let newValue = getValueFromPosition(position);
       
       // Round to step if needed
       if (config.snapToSteps && state.step > 0) {
@@ -143,6 +257,9 @@ export const createInteractionHandlers = (config: SliderConfig, state, handlers)
     handleThumbMouseDown(e, isSecondThumb);
   };
   
+  /**
+   * Handle mouse move with improved thumb and bubble switching
+   */
   const handleMouseMove = (e) => {
     if (!state.dragging || !state.activeThumb) return;
     
@@ -150,13 +267,12 @@ export const createInteractionHandlers = (config: SliderConfig, state, handlers)
     
     try {
       // Get position
-      const isVertical = config.orientation === SLIDER_ORIENTATIONS.VERTICAL;
       const position = e.type.includes('touch')
-        ? isVertical ? e.touches[0].clientY : e.touches[0].clientX
-        : isVertical ? e.clientY : e.clientX;
+        ? e.touches[0].clientX
+        : e.clientX;
       
       // Calculate new value
-      let newValue = getValueFromPosition(position, isVertical);
+      let newValue = getValueFromPosition(position);
       
       // Round to step if needed
       if (config.snapToSteps && state.step > 0) {
@@ -172,30 +288,50 @@ export const createInteractionHandlers = (config: SliderConfig, state, handlers)
       // For range slider, ensure thumbs don't cross
       if (config.range && state.secondValue !== null) {
         if (isSecondThumb) {
+          // Second thumb is active
+          
           // Don't allow second thumb to go below first thumb
-          if (newValue < state.value) {
+          if (newValue >= state.value) {
             state.secondValue = newValue;
           } else {
-            // Thumbs are crossed, swap them
+            // Thumbs are crossed, need to swap them
+            
+            // First hide current bubble
+            hideActiveBubble(state.activeBubble, 0);
+            
+            // Swap values
             state.secondValue = state.value;
             state.value = newValue;
             
-            // Swap active thumb and bubble
+            // Swap active elements
             state.activeThumb = thumb;
             state.activeBubble = valueBubble;
+            
+            // Show new active bubble
+            showActiveBubble(state.activeBubble);
           }
         } else {
+          // First thumb is active
+          
           // Don't allow first thumb to go above second thumb
-          if (newValue > state.secondValue) {
+          if (newValue <= state.secondValue) {
             state.value = newValue;
           } else {
-            // Thumbs are crossed, swap them
+            // Thumbs are crossed, need to swap them
+            
+            // First hide current bubble
+            hideActiveBubble(state.activeBubble, 0);
+            
+            // Swap values
             state.value = state.secondValue;
             state.secondValue = newValue;
             
-            // Swap active thumb and bubble
+            // Swap active elements
             state.activeThumb = secondThumb;
             state.activeBubble = secondValueBubble;
+            
+            // Show new active bubble
+            showActiveBubble(state.activeBubble);
           }
         }
       } else {
@@ -213,6 +349,9 @@ export const createInteractionHandlers = (config: SliderConfig, state, handlers)
     }
   };
   
+  /**
+   * Handle mouse up with consistent bubble hiding
+   */
   const handleMouseUp = (e) => {
     if (!state.dragging) return;
     
@@ -220,10 +359,12 @@ export const createInteractionHandlers = (config: SliderConfig, state, handlers)
     
     state.dragging = false;
     
-    // Hide value bubble
-    if (state.activeBubble) {
-      showValueBubble(state.activeBubble, false);
-    }
+    // Remove dragging class from component element
+    state.component.element.classList.remove(`${state.component.getClass('slider')}--dragging`);
+    
+    // Hide bubble with delay
+    const currentBubble = state.activeBubble;
+    hideActiveBubble(currentBubble, 1000); // Hide after 1 second
     
     // Remove global event listeners
     document.removeEventListener('mousemove', handleMouseMove);
@@ -231,9 +372,8 @@ export const createInteractionHandlers = (config: SliderConfig, state, handlers)
     document.removeEventListener('touchmove', handleMouseMove);
     document.removeEventListener('touchend', handleMouseUp);
     
-    // Reset active elements
+    // Reset active thumb
     state.activeThumb = null;
-    state.activeBubble = null;
     
     try {
       // Trigger change event (only when done dragging)

package/src/components/slider/features/keyboard.ts

@@ -21,12 +21,73 @@ export const createKeyboardHandlers = (state, handlers) => {
     triggerEvent
   } = handlers;
   
+  // Last focused thumb tracker to handle tab sequences properly
+  let lastFocusedThumb = null;
+  
+  /**
+   * Clear any existing bubble hide timers
+   */
+  const clearBubbleHideTimer = () => {
+    if (state.valueHideTimer) {
+      clearTimeout(state.valueHideTimer);
+      state.valueHideTimer = null;
+    }
+  };
+  
+  /**
+   * Hide all bubbles immediately
+   */
+  const hideAllBubbles = () => {
+    // Clear any pending hide timers
+    clearBubbleHideTimer();
+    
+    // Hide both bubbles immediately
+    if (valueBubble) {
+      showValueBubble(valueBubble, false);
+    }
+    if (secondValueBubble) {
+      showValueBubble(secondValueBubble, false);
+    }
+  };
+  
+  /**
+   * Shows a bubble element with consistent behavior
+   */
+  const showBubble = (bubble) => {
+    // First hide all bubbles
+    hideAllBubbles();
+    
+    // Then show the active bubble
+    if (bubble) {
+      showValueBubble(bubble, true);
+    }
+  };
+  
+  /**
+   * Hides a bubble element with optional delay
+   */
+  const hideBubble = (bubble, delay = 0) => {
+    // Clear any existing timers
+    clearBubbleHideTimer();
+    
+    if (!bubble) return;
+    
+    if (delay > 0) {
+      state.valueHideTimer = setTimeout(() => {
+        showValueBubble(bubble, false);
+      }, delay);
+    } else {
+      showValueBubble(bubble, false);
+    }
+  };
+  
   // Event handlers
   const handleKeyDown = (e, isSecondThumb = false) => {
     if (state.component.disabled && state.component.disabled.isDisabled()) return;
     
     const step = state.step || 1;
     let newValue;
+    let stepSize = step;
     
     // Determine which value to modify
     if (isSecondThumb) {
@@ -35,43 +96,71 @@ export const createKeyboardHandlers = (state, handlers) => {
       newValue = state.value;
     }
     
+    // Handle tab key specifically for range sliders
+    if (e.key === 'Tab') {
+      // Let the browser handle the tab navigation
+      // We'll deal with showing/hiding bubbles in the focus/blur handlers
+      return;
+    }
+    
+    // Determine step size based on modifier keys
+    if (e.shiftKey) {
+      stepSize = step * 10; // Large step when Shift is pressed
+    }
+    
+    let valueChanged = false;
+    
     switch (e.key) {
       case 'ArrowRight':
       case 'ArrowUp':
         e.preventDefault();
-        newValue = Math.min(newValue + step, state.max);
+        newValue = Math.min(newValue + stepSize, state.max);
+        valueChanged = true;
         break;
         
       case 'ArrowLeft':
       case 'ArrowDown':
         e.preventDefault();
-        newValue = Math.max(newValue - step, state.min);
+        newValue = Math.max(newValue - stepSize, state.min);
+        valueChanged = true;
         break;
         
       case 'Home':
         e.preventDefault();
         newValue = state.min;
+        valueChanged = true;
         break;
         
       case 'End':
         e.preventDefault();
         newValue = state.max;
+        valueChanged = true;
         break;
         
       case 'PageUp':
         e.preventDefault();
         newValue = Math.min(newValue + (step * 10), state.max);
+        valueChanged = true;
         break;
         
       case 'PageDown':
         e.preventDefault();
         newValue = Math.max(newValue - (step * 10), state.min);
+        valueChanged = true;
         break;
         
       default:
         return; // Exit if not a handled key
     }
     
+    if (!valueChanged) return;
+    
+    // Update active bubble reference
+    state.activeBubble = isSecondThumb ? secondValueBubble : valueBubble;
+    
+    // Show value bubble during keyboard interaction
+    showBubble(state.activeBubble);
+    
     // Update the value
     if (isSecondThumb) {
       state.secondValue = newValue;
@@ -90,16 +179,46 @@ export const createKeyboardHandlers = (state, handlers) => {
   const handleFocus = (e, isSecondThumb = false) => {
     if (state.component.disabled && state.component.disabled.isDisabled()) return;
     
-    // Show value bubble
-    showValueBubble(isSecondThumb ? secondValueBubble : valueBubble, true);
+    // Track the currently focused thumb for tab sequence handling
+    const currentThumb = isSecondThumb ? secondThumb : state.component.structure.thumb;
+    
+    // If we're tabbing between thumbs, hide the previous bubble immediately
+    if (lastFocusedThumb && lastFocusedThumb !== currentThumb) {
+      hideAllBubbles();
+    }
+    
+    // Update the last focused thumb
+    lastFocusedThumb = currentThumb;
+    
+    // Add a class to indicate keyboard focus
+    currentThumb.classList.add(`${state.component.getClass('slider-thumb')}--focused`);
+    
+    // Show value bubble on focus
+    const bubble = isSecondThumb ? secondValueBubble : valueBubble;
+    showBubble(bubble);
+    
+    // Update active bubble reference
+    state.activeBubble = bubble;
     
     // Trigger focus event
     triggerEvent(SLIDER_EVENTS.FOCUS, e);
   };
   
   const handleBlur = (e, isSecondThumb = false) => {
-    // Hide value bubble
-    showValueBubble(isSecondThumb ? secondValueBubble : valueBubble, false);
+    // Remove keyboard focus class
+    const thumb = isSecondThumb ? secondThumb : state.component.structure.thumb;
+    thumb.classList.remove(`${state.component.getClass('slider-thumb')}--focused`);
+    
+    // Only hide the bubble if we're not tabbing to another thumb
+    // This check prevents the bubble from flickering when tabbing between thumbs
+    const relatedTarget = e.relatedTarget;
+    const otherThumb = isSecondThumb ? state.component.structure.thumb : secondThumb;
+    
+    if (!relatedTarget || relatedTarget !== otherThumb) {
+      // We're not tabbing to the other thumb, so we can hide the bubble
+      const bubble = isSecondThumb ? secondValueBubble : valueBubble;
+      hideBubble(bubble, 200);
+    }
     
     // Trigger blur event
     triggerEvent(SLIDER_EVENTS.BLUR, e);