mtrl 0.3.6 → 0.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mtrl",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "A functional TypeScript/JavaScript component library with composable architecture based on Material Design 3",
   "author": "floor",
   "license": "MIT License",

package/src/components/button/api.ts

@@ -123,6 +123,22 @@ export const withAPI = ({ disabled, lifecycle }: ApiOptions) =>
       return component.icon.getIcon();
     },
 
+    /**
+     * Sets the active state of the button
+     * Used to visually indicate the button's active state, such as when it has a menu open
+     * 
+     * @param active - Whether the button should appear active
+     * @returns Button component for method chaining
+     */
+    setActive(active: boolean) {
+      if (active) {
+        component.element.classList.add(`${component.getClass('button')}--active`);
+      } else {
+        component.element.classList.remove(`${component.getClass('button')}--active`);
+      }
+      return this;
+    },
+
     /**
      * Sets the button's aria-label attribute for accessibility
      * @param label - Accessible label text

package/src/components/button/types.ts

@@ -249,6 +249,15 @@ export interface ButtonComponent {
    */
   updateCircularStyle: () => void;
   
+  /**
+   * Sets the active state of the button
+   * Used to visually indicate the button's active state, such as when it has a menu open
+   * 
+   * @param active - Whether the button should appear active
+   * @returns The button component for chaining
+   */
+  setActive: (active: boolean) => ButtonComponent;
+  
   /**
    * Adds an event listener to the button
    * @param event - Event name ('click', 'focus', etc.)

package/src/components/menu/api.ts

@@ -1,6 +1,6 @@
 // src/components/menu/api.ts
 
-import { MenuComponent, MenuContent, MenuPlacement, MenuEvent, MenuSelectEvent } from './types';
+import { MenuComponent, MenuContent, MenuPosition, MenuEvent, MenuSelectEvent } from './types';
 
 /**
  * API configuration options for menu component
@@ -15,8 +15,8 @@ interface ApiOptions {
     isOpen: () => boolean;
     setItems: (items: MenuContent[]) => any;
     getItems: () => MenuContent[];
-    setPlacement: (placement: MenuPlacement) => any;
-    getPlacement: () => MenuPlacement;
+    setPosition: (position: MenuPosition) => any;
+    getPosition: () => MenuPosition;
   };
   anchor: {
     setAnchor: (anchor: HTMLElement | string) => any;
@@ -58,13 +58,15 @@ export const withAPI = ({ menu, anchor, events, lifecycle }: ApiOptions) =>
     ...component as any,
     element: component.element,
     
+
     /**
      * Opens the menu
      * @param event - Optional event that triggered the open
+     * @param interactionType - The type of interaction that triggered the open ('mouse' or 'keyboard')
      * @returns Menu component for chaining
      */
-    open(event?: Event) {
-      menu.open(event);
+    open(event?: Event, interactionType: 'mouse' | 'keyboard' = 'mouse') {
+      menu.open(event, interactionType);
       return this;
     },
     
@@ -133,21 +135,21 @@ export const withAPI = ({ menu, anchor, events, lifecycle }: ApiOptions) =>
     },
     
     /**
-     * Updates the menu's placement
-     * @param placement - New placement value
+     * Updates the menu's position
+     * @param position - New position value
      * @returns Menu component for chaining
      */
-    setPlacement(placement: MenuPlacement) {
-      menu.setPlacement(placement);
+    setPosition(position: MenuPosition) {
+      menu.setPosition(position);
       return this;
     },
     
     /**
-     * Gets the current menu placement
-     * @returns Current placement
+     * Gets the current menu position
+     * @returns Current position
      */
-    getPlacement() {
-      return menu.getPlacement();
+    getPosition() {
+      return menu.getPosition();
     },
     
     /**

package/src/components/menu/config.ts

@@ -5,7 +5,7 @@ import {
   createElementConfig,
   BaseComponentConfig 
 } from '../../core/config/component-config';
-import { MenuConfig, MENU_PLACEMENT } from './types';
+import { MenuConfig, MENU_POSITION } from './types';
 
 /**
  * Default configuration for the Menu component
@@ -15,12 +15,12 @@ import { MenuConfig, MENU_PLACEMENT } from './types';
  */
 export const defaultConfig: MenuConfig = {
   items: [],
-  placement: MENU_PLACEMENT.BOTTOM_START,
+  position: MENU_POSITION.BOTTOM_START,
   closeOnSelect: true,
   closeOnClickOutside: true,
   closeOnEscape: true,
   openSubmenuOnHover: true,
-  offset: 8,
+  offset: 0,
   autoFlip: true,
   visible: false
 };
@@ -106,8 +106,8 @@ export const getApiConfig = (component) => ({
     isOpen: () => component.menu?.isOpen() || false,
     setItems: (items) => component.menu?.setItems(items),
     getItems: () => component.menu?.getItems() || [],
-    setPlacement: (placement) => component.menu?.setPlacement(placement),
-    getPlacement: () => component.menu?.getPlacement()
+    setPosition: (position) => component.menu?.setPosition(position),
+    getPosition: () => component.menu?.getPosition()
   },
   anchor: {
     setAnchor: (anchor) => component.anchor?.setAnchor(anchor),

package/src/components/menu/features/anchor.ts

@@ -17,15 +17,18 @@ export const withAnchor = (config: MenuConfig) => component => {
 
   // Track anchor state
   const state = {
-    anchorElement: null as HTMLElement
+    anchorElement: null as HTMLElement,
+    anchorComponent: null as any,
+    activeClass: '' // Store the appropriate active class based on element type
   };
 
   /**
-   * Resolves the anchor element from string or direct reference
+   * Resolves the anchor element from string, direct reference, or component
    */
-  const resolveAnchor = (anchor: HTMLElement | string): HTMLElement => {
+  const resolveAnchor = (anchor: HTMLElement | string | { element: HTMLElement }): HTMLElement => {
     if (!anchor) return null;
 
+    // Handle string selector
     if (typeof anchor === 'string') {
       const element = document.querySelector(anchor);
       if (!element) {
@@ -34,14 +37,41 @@ export const withAnchor = (config: MenuConfig) => component => {
       }
       return element as HTMLElement;
     }
+    
+    // Handle component with element property
+    if (typeof anchor === 'object' && anchor !== null && 'element' in anchor) {
+      return anchor.element;
+    }
+
+    // Handle direct HTML element
+    return anchor as HTMLElement;
+  };
 
-    return anchor;
+  /**
+   * Determine the appropriate active class based on element type
+   */
+  const determineActiveClass = (element: HTMLElement): string => {
+    // Check if this is one of our component types
+    const classPrefix = component.getClass('').split('-')[0];
+    
+    // Check element tag and classes to determine appropriate active class
+    if (element.tagName === 'BUTTON') {
+      return `${classPrefix}-button--active`;
+    } else if (element.classList.contains(`${classPrefix}-chip`)) {
+      return `${classPrefix}-chip--selected`;
+    } else if (element.classList.contains(`${classPrefix}-textfield`) || 
+               element.classList.contains(`${classPrefix}-select`)) {
+      return `${classPrefix}-textfield--focused`;
+    } else {
+      // Default active class for other elements
+      return `${classPrefix}-menu-anchor--active`;
+    }
   };
 
   /**
    * Sets up anchor click handler for toggling menu
    */
-  const setupAnchorEvents = (anchorElement: HTMLElement): void => {
+  const setupAnchorEvents = (anchorElement: HTMLElement, originalAnchor?: any): void => {
     if (!anchorElement) return;
 
     // Remove previously attached event if any
@@ -49,8 +79,18 @@ export const withAnchor = (config: MenuConfig) => component => {
       cleanup();
     }
 
-    // Store reference
+    // Store references
     state.anchorElement = anchorElement;
+    
+    // Store reference to component if it was provided
+    if (originalAnchor && typeof originalAnchor === 'object' && 'element' in originalAnchor) {
+      state.anchorComponent = originalAnchor;
+    } else {
+      state.anchorComponent = null;
+    }
+
+    // Determine the appropriate active class for this anchor
+    state.activeClass = determineActiveClass(anchorElement);
 
     // Add click handler
     anchorElement.addEventListener('click', handleAnchorClick);
@@ -70,6 +110,32 @@ export const withAnchor = (config: MenuConfig) => component => {
     anchorElement.setAttribute('aria-controls', menuId);
   };
 
+  /**
+   * Applies active visual state to anchor
+   */
+  const setAnchorActive = (active: boolean): void => {
+    if (!state.anchorElement) return;
+    
+    // For component with setActive method (our button component has this)
+    if (state.anchorComponent && typeof state.anchorComponent.setActive === 'function') {
+      state.anchorComponent.setActive(active);
+    } 
+    // For component with .selected property (like our chip component)
+    else if (state.anchorComponent && 'selected' in state.anchorComponent) {
+      state.anchorComponent.selected = active;
+    }
+    // Standard DOM element fallback
+    else if (state.anchorElement.classList) {
+      if (active) {
+        // Add the appropriate active class
+        state.anchorElement.classList.add(state.activeClass);
+      } else {
+        // Remove active class
+        state.anchorElement.classList.remove(state.activeClass);
+      }
+    }
+  };
+
   /**
    * Handles anchor element click
    */
@@ -82,10 +148,8 @@ export const withAnchor = (config: MenuConfig) => component => {
       
       if (isOpen) {
         component.menu.close(e);
-        state.anchorElement.setAttribute('aria-expanded', 'false');
       } else {
         component.menu.open(e);
-        state.anchorElement.setAttribute('aria-expanded', 'true');
       }
     }
   };
@@ -99,12 +163,20 @@ export const withAnchor = (config: MenuConfig) => component => {
       state.anchorElement.removeAttribute('aria-haspopup');
       state.anchorElement.removeAttribute('aria-expanded');
       state.anchorElement.removeAttribute('aria-controls');
+      
+      // Clean up active state if present
+      setAnchorActive(false);
     }
+    
+    // Reset state
+    state.anchorComponent = null;
+    state.activeClass = '';
   };
 
   // Initialize with provided anchor
-  const initialAnchor = resolveAnchor(config.anchor);
-  setupAnchorEvents(initialAnchor);
+  const initialAnchor = config.anchor;
+  const initialElement = resolveAnchor(initialAnchor);
+  setupAnchorEvents(initialElement, initialAnchor);
 
   // Register with lifecycle if available
   if (component.lifecycle) {
@@ -119,12 +191,14 @@ export const withAnchor = (config: MenuConfig) => component => {
   component.on('open', () => {
     if (state.anchorElement) {
       state.anchorElement.setAttribute('aria-expanded', 'true');
+      setAnchorActive(true);
     }
   });
 
   component.on('close', () => {
     if (state.anchorElement) {
       state.anchorElement.setAttribute('aria-expanded', 'false');
+      setAnchorActive(false);
     }
   });
 
@@ -134,13 +208,13 @@ export const withAnchor = (config: MenuConfig) => component => {
     anchor: {
       /**
        * Sets a new anchor element
-       * @param anchor - New anchor element or selector
+       * @param anchor - New anchor element, selector, or component
        * @returns Component for chaining
        */
-      setAnchor(anchor: HTMLElement | string) {
-        const newAnchor = resolveAnchor(anchor);
-        if (newAnchor) {
-          setupAnchorEvents(newAnchor);
+      setAnchor(anchor: HTMLElement | string | { element: HTMLElement }) {
+        const newElement = resolveAnchor(anchor);
+        if (newElement) {
+          setupAnchorEvents(newElement, anchor);
         }
         return component;
       },
@@ -151,6 +225,16 @@ export const withAnchor = (config: MenuConfig) => component => {
        */
       getAnchor() {
         return state.anchorElement;
+      },
+      
+      /**
+       * Sets the active state of the anchor
+       * @param active - Whether anchor should appear active
+       * @returns Component for chaining
+       */
+      setActive(active: boolean) {
+        setAnchorActive(active);
+        return component;
       }
     }
   };