mtrl-addons 0.2.1 → 0.2.2

package/src/components/vlist/features/selection.ts

@@ -13,101 +13,76 @@ interface SelectionState {
   lastSelectedIndex?: number;
 }
 
+/**
+ * Get item ID from element or item data
+ */
+const getItemId = (item: any): string | number | undefined => {
+  if (item?.id !== undefined) return item.id;
+  if (item?._id !== undefined) return item._id;
+  if (typeof item === "string" || typeof item === "number") return item;
+  return undefined;
+};
+
 /**
  * Adds selection management capabilities to VList component
- * Works with viewport's virtual scrolling architecture
- *
- * @param config - VList configuration with selection options
- * @returns Function that enhances a component with selection management
  */
 export const withSelection = <T extends VListItem = VListItem>(
-  config: VListConfig<T>
+  config: VListConfig<T>,
 ) => {
   return (component: VListComponent<T>): VListComponent<T> => {
-    // Skip if selection is not enabled
     if (!config.selection?.enabled || config.selection?.mode === "none") {
-      // console.log("🎯 [Selection] Skipped - not enabled or mode is none");
       return component;
     }
 
-    // console.log("🎯 [Selection] Initializing selection feature", {
-    //   enabled: config.selection?.enabled,
-    //   mode: config.selection?.mode,
-    // });
-
-    // Initialize selection state
     const state: SelectionState = {
       selectedIds: new Set(),
       mode: config.selection?.mode || "single",
       lastSelectedIndex: undefined,
     };
 
-    // Get configuration options
     const requireModifiers = config.selection?.requireModifiers ?? false;
 
-    // Add BEM modifier class to container element
-    const addContainerModifier = () => {
-      if (component.element) {
-        // Add selection mode modifier class following BEM convention
-        addClass(component.element, `vlist--selection`);
-        // Also add specific mode modifier
-        addClass(component.element, `vlist--selection-${state.mode}`);
-      }
-    };
-
-    // Defer initialization of pre-selected items until after setup
-    const initializePreselectedItems = () => {
-      if (config.selection?.selectedIndices && component.getItems) {
-        config.selection.selectedIndices.forEach((index) => {
-          const items = component.getItems();
-          const item = items?.[index];
-          if (item && (item as any).id !== undefined) {
-            state.selectedIds.add((item as any).id);
-          }
-        });
-      }
-    };
-
     /**
-     * Apply selection class to an element
+     * Apply selection class to rendered elements matching selected IDs
      */
-    const applySelectionClass = (element: HTMLElement, isSelected: boolean) => {
-      if (isSelected) {
-        addClass(element, VLIST_CLASSES.SELECTED);
-      } else {
-        removeClass(element, VLIST_CLASSES.SELECTED);
-      }
-    };
+    const applySelectionToElements = () => {
+      const container = component.element?.querySelector(
+        `.${PREFIX}-viewport-items`,
+      );
+      if (!container) return;
 
-    /**
-     * Get item ID from element or item data
-     */
-    const getItemId = (item: any): string | number | undefined => {
-      if (item?.id !== undefined) return item.id;
-      if (typeof item === "string" || typeof item === "number") return item;
-      return undefined;
+      const items = container.querySelectorAll(
+        `.${PREFIX}-viewport-item[data-id]`,
+      );
+
+      items.forEach((el) => {
+        const element = el as HTMLElement;
+        const id = element.dataset.id;
+        if (id !== undefined) {
+          // Check both string and number versions of the ID
+          const isSelected =
+            state.selectedIds.has(id) || state.selectedIds.has(Number(id));
+          if (isSelected) {
+            addClass(element, VLIST_CLASSES.SELECTED);
+          } else {
+            removeClass(element, VLIST_CLASSES.SELECTED);
+          }
+        }
+      });
     };
 
     /**
      * Handle item click for selection
      */
     const handleItemClick = (e: MouseEvent) => {
-      // console.log("🎯 [Selection] Click detected on:", e.target);
-
-      // Find the clicked viewport item element (wrapper)
       const viewportItem = (e.target as HTMLElement).closest(
-        `.${PREFIX}-viewport-item[data-index]`
+        `.${PREFIX}-viewport-item[data-index]`,
       ) as HTMLElement;
-      if (!viewportItem) {
-        console.log("🎯 [Selection] No viewport item found for click");
-        return;
-      }
+      if (!viewportItem) return;
 
       const index = parseInt(viewportItem.dataset.index || "-1");
-      // console.log(`🎯 [Selection] Clicked item index: ${index}`);
       if (index < 0) return;
 
-      // Get the item data
       const enhancedComponent = component as any;
       const items = enhancedComponent.getItems?.();
       const item = items?.[index];
@@ -116,25 +91,10 @@ export const withSelection = <T extends VListItem = VListItem>(
       const itemId = getItemId(item);
       if (itemId === undefined) return;
 
-      // Handle selection based on mode
       const wasSelected = state.selectedIds.has(itemId);
 
-      // console.log("🎯 [Selection] Click detected:", {
-      //   index,
-      //   itemId,
-      //   wasSelected,
-      //   mode: state.mode,
-      //   shiftKey: e.shiftKey,
-      //   ctrlKey: e.ctrlKey,
-      //   metaKey: e.metaKey,
-      //   lastSelectedIndex: state.lastSelectedIndex,
-      // });
-
       if (state.mode === "single") {
-        // Clear previous selection
         state.selectedIds.clear();
-
-        // Toggle selection
         if (!wasSelected) {
           state.selectedIds.add(itemId);
           state.lastSelectedIndex = index;
@@ -142,14 +102,11 @@ export const withSelection = <T extends VListItem = VListItem>(
           state.lastSelectedIndex = undefined;
         }
       } else if (state.mode === "multiple") {
-        // Handle multi-select with keyboard modifiers
         if (e.shiftKey && state.lastSelectedIndex !== undefined) {
-          // Range selection
           const start = Math.min(state.lastSelectedIndex, index);
           const end = Math.max(state.lastSelectedIndex, index);
 
           if (!e.ctrlKey && !e.metaKey) {
-            // Clear existing selection if not holding ctrl/cmd
             state.selectedIds.clear();
           }
 
@@ -161,7 +118,6 @@ export const withSelection = <T extends VListItem = VListItem>(
             }
           }
         } else if (e.ctrlKey || e.metaKey) {
-          // Toggle individual selection with Ctrl/Cmd
           if (wasSelected) {
             state.selectedIds.delete(itemId);
           } else {
@@ -169,19 +125,10 @@ export const withSelection = <T extends VListItem = VListItem>(
           }
           state.lastSelectedIndex = index;
         } else {
-          // Single click without modifiers
-          // console.log("🎯 [Selection] Single click without modifiers:", {
-          //   requireModifiers,
-          //   wasSelected,
-          //   willToggle: !requireModifiers,
-          // });
-
           if (requireModifiers) {
-            // If modifiers are required, single click selects only this item
             state.selectedIds.clear();
             state.selectedIds.add(itemId);
           } else {
-            // If modifiers are NOT required, single click toggles selection
             if (wasSelected) {
               state.selectedIds.delete(itemId);
             } else {
@@ -192,216 +139,163 @@ export const withSelection = <T extends VListItem = VListItem>(
         }
       }
 
-      // Update visible elements
-      updateVisibleElements();
+      applySelectionToElements();
+      emitSelectionChange();
+    };
 
-      // Emit selection change event
-      const selectedItems =
-        items?.filter((item: any) => {
-          const id = getItemId(item);
-          return id !== undefined && state.selectedIds.has(id);
-        }) || [];
+    /**
+     * Emit selection change event
+     */
+    const emitSelectionChange = () => {
+      const enhancedComponent = component as any;
+      const items = enhancedComponent.getItems?.() || [];
 
-      const selectedIndices =
-        items?.reduce((acc: number[], item: any, idx: number) => {
+      const selectedItems = items.filter((item: any) => {
+        const id = getItemId(item);
+        return id !== undefined && state.selectedIds.has(id);
+      });
+
+      const selectedIndices = items.reduce(
+        (acc: number[], item: any, idx: number) => {
           const id = getItemId(item);
           if (id !== undefined && state.selectedIds.has(id)) {
             acc.push(idx);
           }
           return acc;
-        }, [] as number[]) || [];
+        },
+        [] as number[],
+      );
 
-      component.emit?.("selection:change", {
-        selectedItems,
-        selectedIndices,
-      });
+      component.emit?.("selection:change", { selectedItems, selectedIndices });
 
-      // Call the selection change callback if provided
       if (config.selection?.onSelectionChange) {
         config.selection.onSelectionChange(selectedItems, selectedIndices);
       }
-
-      // Emit individual item selection event
-      component.emit?.("item:selection:change", {
-        item,
-        index,
-        isSelected: state.selectedIds.has(itemId),
-      });
     };
 
-    /**
-     * Update selection state for visible elements
-     */
-    const updateVisibleElements = () => {
-      const container = component.element?.querySelector(
-        `.${PREFIX}-viewport-items`
-      );
-      if (!container) {
-        // console.warn("🎯 [Selection] No viewport items container found");
-        return;
+    // Setup: listen for renders and clicks
+    const setup = () => {
+      // Add mode class to container
+      if (component.element) {
+        addClass(component.element, "vlist--selection");
+        addClass(component.element, `vlist--selection-${state.mode}`);
+        component.element.addEventListener("click", handleItemClick, true);
       }
 
-      const viewportItems = container.querySelectorAll(
-        `.${PREFIX}-viewport-item[data-index]`
+      // Apply selection after each render
+      (component as any).on?.(
+        "viewport:items-rendered",
+        applySelectionToElements,
+      );
+      (component as any).on?.("viewport:rendered", applySelectionToElements);
+
+      // Clean up selection when item is removed
+      (component as any).on?.(
+        "item:removed",
+        (data: { item: any; index: number }) => {
+          const itemId = getItemId(data.item);
+          if (itemId !== undefined && state.selectedIds.has(itemId)) {
+            state.selectedIds.delete(itemId);
+            // If the removed item was the last selected index, clear it
+            if (state.lastSelectedIndex === data.index) {
+              state.lastSelectedIndex = undefined;
+            } else if (
+              state.lastSelectedIndex !== undefined &&
+              state.lastSelectedIndex > data.index
+            ) {
+              // Adjust lastSelectedIndex since items shifted down
+              state.lastSelectedIndex--;
+            }
+            emitSelectionChange();
+          }
+        },
       );
-      // console.log(
-      //   `🎯 [Selection] Updating ${viewportItems.length} visible elements`
-      // );
-
-      const enhancedComponent = component as any;
-      const items = enhancedComponent.getItems?.();
-
-      viewportItems.forEach((viewportItem) => {
-        const index = parseInt(
-          (viewportItem as HTMLElement).dataset.index || "-1"
-        );
-        if (index < 0) return;
-
-        const item = items?.[index];
-        if (!item) return;
-
-        const itemId = getItemId(item);
-        if (itemId === undefined) return;
-
-        const isSelected = state.selectedIds.has(itemId);
-
-        // Apply selection class to the viewport item itself
-        // The new layout system doesn't have a separate inner item
-        applySelectionClass(viewportItem as HTMLElement, isSelected);
-      });
     };
 
-    // Setup listeners after component is fully initialized
-    // Since selection is applied last, we can just use a timeout
-    setTimeout(() => {
-      // console.log("🎯 [Selection] Setting up listeners after initialization");
-
-      // Add BEM modifier classes to the container
-      addContainerModifier();
-
-      setupSelectionListeners();
-    }, 0);
-
-    function setupSelectionListeners() {
-      // Wait for viewport to be ready
-      setTimeout(() => {
-        // Initialize pre-selected items now that component is ready
-        initializePreselectedItems();
-
-        // Listen for render complete to update selection state
-        // Using type assertion since viewport:rendered is not in ListEvents type
-        (component as any).on?.("viewport:rendered", () => {
-          updateVisibleElements();
-        });
-
-        // Add click listener to the viewport element
-        if (component.element) {
-          // Use capture phase to ensure we get the event
-          component.element.addEventListener("click", handleItemClick, true);
-          // console.log(
-          //   "🎯 [Selection] Click handler attached to element (capture phase)"
-          // );
-
-          // Test if handler works
-          // setTimeout(() => {
-          //   const testItem = component.element?.querySelector(
-          //     `.${PREFIX}-viewport-item`
-          //   );
-          //   // console.log("🎯 [Selection] Test item found:", !!testItem);
-          // }, 500);
+    // Initialize after component is ready
+    setTimeout(setup, 0);
+
+    // Listen for initial load complete to auto-select item
+    // This must be in withSelection because selectById is defined here
+    (component as any).on?.(
+      "collection:initial-load-complete",
+      (data: { selectId: string | number }) => {
+        if (data?.selectId !== undefined) {
+          // Use requestAnimationFrame to ensure rendering is complete
+          requestAnimationFrame(() => {
+            if (state.mode === "single") {
+              state.selectedIds.clear();
+            }
+            state.selectedIds.add(data.selectId);
+            applySelectionToElements();
+            emitSelectionChange();
+          });
         }
-      }, 100);
-    }
+      },
+    );
 
-    // Clean up on destroy
+    // Cleanup on destroy
     const originalDestroy = component.destroy;
     component.destroy = () => {
-      if (component.element) {
-        component.element.removeEventListener("click", handleItemClick, true);
-      }
+      component.element?.removeEventListener("click", handleItemClick, true);
       originalDestroy?.();
     };
 
-    // Create the enhanced component
-    const enhancedComponent = {
+    // Enhanced component with selection API
+    return {
       ...component,
 
-      // Selection API methods
       selectItems(indices: number[]) {
-        // Use type assertion to access getItems which is added by API feature
-        const getItemsFn = (this as any).getItems;
-        if (!getItemsFn) {
-          console.warn("🎯 [Selection] getItems not available yet");
-          return;
-        }
-        const items = getItemsFn();
-
-        if (state.mode === "single" && indices.length > 1) {
-          // In single mode, only select the first item
-          indices = [indices[0]];
+        const items = (this as any).getItems?.();
+        if (!items) return;
+
+        if (state.mode === "single") {
+          // In single mode, clear previous selection before adding new one
+          state.selectedIds.clear();
+          if (indices.length > 1) {
+            indices = [indices[0]];
+          }
         }
 
         indices.forEach((index) => {
-          const item = items?.[index];
-          const itemId = getItemId(item);
+          const itemId = getItemId(items[index]);
           if (itemId !== undefined) {
             state.selectedIds.add(itemId);
           }
         });
 
-        // Update lastSelectedIndex for shift+click range selection
         if (indices.length > 0) {
           state.lastSelectedIndex = indices[indices.length - 1];
         }
 
-        updateVisibleElements();
-        (this as any).emit?.("selection:change", {
-          selectedItems: (this as any).getSelectedItems(),
-          selectedIndices: (this as any).getSelectedIndices(),
-        });
+        applySelectionToElements();
+        emitSelectionChange();
       },
 
       deselectItems(indices: number[]) {
-        // Use type assertion to access getItems which is added by API feature
-        const getItemsFn = (this as any).getItems;
-        if (!getItemsFn) {
-          console.warn("🎯 [Selection] getItems not available yet");
-          return;
-        }
-        const items = getItemsFn();
+        const items = (this as any).getItems?.();
+        if (!items) return;
 
         indices.forEach((index) => {
-          const item = items?.[index];
-          const itemId = getItemId(item);
+          const itemId = getItemId(items[index]);
           if (itemId !== undefined) {
             state.selectedIds.delete(itemId);
           }
         });
 
-        updateVisibleElements();
-        (this as any).emit?.("selection:change", {
-          selectedItems: (this as any).getSelectedItems(),
-          selectedIndices: (this as any).getSelectedIndices(),
-        });
+        applySelectionToElements();
+        emitSelectionChange();
       },
 
       clearSelection() {
         state.selectedIds.clear();
         state.lastSelectedIndex = undefined;
-        updateVisibleElements();
-        (this as any).emit?.("selection:change", {
-          selectedItems: [],
-          selectedIndices: [],
-        });
+        applySelectionToElements();
+        emitSelectionChange();
       },
 
       getSelectedItems(): T[] {
-        // Use type assertion to access getItems which is added by API feature
-        const getItemsFn = (this as any).getItems;
-        if (!getItemsFn) {
-          return [];
-        }
-        const items = getItemsFn() || [];
+        const items = (this as any).getItems?.() || [];
         return items.filter((item: any) => {
           const id = getItemId(item);
           return id !== undefined && state.selectedIds.has(id);
@@ -409,12 +303,7 @@ export const withSelection = <T extends VListItem = VListItem>(
       },
 
       getSelectedIndices(): number[] {
-        // Use type assertion to access getItems which is added by API feature
-        const getItemsFn = (this as any).getItems;
-        if (!getItemsFn) {
-          return [];
-        }
-        const items = getItemsFn() || [];
+        const items = (this as any).getItems?.() || [];
         return items.reduce((acc: number[], item: any, index: number) => {
           const id = getItemId(item);
           if (id !== undefined && state.selectedIds.has(id)) {
@@ -425,19 +314,122 @@ export const withSelection = <T extends VListItem = VListItem>(
       },
 
       isSelected(index: number): boolean {
-        // Use type assertion to access getItems which is added by API feature
-        const getItemsFn = (this as any).getItems;
-        if (!getItemsFn) {
+        const items = (this as any).getItems?.();
+        const itemId = getItemId(items?.[index]);
+        return itemId !== undefined && state.selectedIds.has(itemId);
+      },
+
+      selectById(id: string | number, silent: boolean = false): boolean {
+        if (id === undefined || id === null) return false;
+
+        if (state.mode === "single") {
+          state.selectedIds.clear();
+        }
+
+        state.selectedIds.add(id);
+        applySelectionToElements();
+        if (!silent) {
+          emitSelectionChange();
+        }
+        return true;
+      },
+
+      /**
+       * Select item at index, scrolling and waiting for data if needed
+       * Handles virtual scrolling by loading data before selecting
+       */
+      async selectAtIndex(index: number): Promise<boolean> {
+        const enhancedComponent = component as any;
+        const totalItems = enhancedComponent.getItemCount?.() || 0;
+
+        if (index < 0 || index >= totalItems) {
           return false;
         }
-        const items = getItemsFn();
-        const item = items?.[index];
-        const itemId = getItemId(item);
-        return itemId !== undefined && state.selectedIds.has(itemId);
+
+        // First scroll to the index (triggers data loading if needed)
+        if (enhancedComponent.viewport?.scrollToIndex) {
+          enhancedComponent.viewport.scrollToIndex(index);
+        }
+
+        // Try to select immediately - works if item is already loaded
+        const items = enhancedComponent.getItems?.() || [];
+        if (items[index]) {
+          this.selectItems([index]);
+          return true;
+        }
+
+        // Item not loaded yet - wait for data to load then select
+        return new Promise<boolean>((resolve) => {
+          let resolved = false;
+
+          const onRangeLoaded = () => {
+            if (resolved) return;
+            resolved = true;
+            component.off?.("viewport:range-loaded", onRangeLoaded);
+            requestAnimationFrame(() => {
+              this.selectItems([index]);
+              resolve(true);
+            });
+          };
+
+          component.on?.("viewport:range-loaded", onRangeLoaded);
+
+          // Fallback timeout in case event doesn't fire (data already loaded)
+          setTimeout(() => {
+            if (resolved) return;
+            resolved = true;
+            component.off?.("viewport:range-loaded", onRangeLoaded);
+            this.selectItems([index]);
+            resolve(true);
+          }, 300);
+        });
       },
-    };
 
-    return enhancedComponent;
+      /**
+       * Select next item relative to current selection
+       * Handles virtual scrolling by loading data before selecting
+       */
+      async selectNext(): Promise<boolean> {
+        const enhancedComponent = component as any;
+        const selectedIndices = this.getSelectedIndices();
+
+        if (selectedIndices.length === 0) {
+          // Select first item
+          return this.selectAtIndex(0);
+        }
+
+        const currentIndex = selectedIndices[0];
+        const nextIndex = currentIndex + 1;
+        const totalItems = enhancedComponent.getItemCount?.() || 0;
+
+        if (nextIndex < totalItems) {
+          return this.selectAtIndex(nextIndex);
+        }
+
+        return false;
+      },
+
+      /**
+       * Select previous item relative to current selection
+       * Handles virtual scrolling by loading data before selecting
+       */
+      async selectPrevious(): Promise<boolean> {
+        const selectedIndices = this.getSelectedIndices();
+
+        if (selectedIndices.length === 0) {
+          return false;
+        }
+
+        const currentIndex = selectedIndices[0];
+        const prevIndex = currentIndex - 1;
+
+        if (prevIndex >= 0) {
+          return this.selectAtIndex(prevIndex);
+        }
+
+        return false;
+      },
+    };
   };
 };
 

package/src/components/vlist/features/viewport.ts

@@ -12,15 +12,9 @@ import { createViewport } from "../../../core/viewport";
  * Adds viewport functionality to VList
  */
 export const withViewport = <T extends VListItem = VListItem>(
-  config: VListConfig<T>
+  config: VListConfig<T>,
 ) => {
   return (component: any) => {
-    // console.log("📋 [VList] Applying viewport feature", {
-    //   hasElement: !!component.element,
-    //   hasItems: !!config.items,
-    //   itemCount: config.items?.length || 0,
-    // });
-
     // Set initial items if provided
     if (config.items) {
       component.items = config.items;