@proyecto-viviana/solid-stately 0.2.7 → 0.3.0

package/src/combobox/createComboBoxState.ts

@@ -6,26 +6,21 @@
  * either type to filter options or select from a list.
  */
 
-import { createSignal, createMemo, createEffect, type Accessor } from 'solid-js';
-import { access, type MaybeAccessor } from '../utils';
-import { createListState } from '../collections/createListState';
-import { createOverlayTriggerState } from '../overlays';
-import type { Key, CollectionNode, Collection, FocusStrategy } from '../collections/types';
+import { createSignal, createMemo, createEffect, type Accessor } from "solid-js";
+import { access, type MaybeAccessor } from "../utils";
+import { createListState } from "../collections/createListState";
+import { createOverlayTriggerState } from "../overlays";
+import type { Key, CollectionNode, Collection, FocusStrategy } from "../collections/types";
 
-// ============================================
-// TYPES
-// ============================================
+export type MenuTriggerAction = "focus" | "input" | "manual";
 
-export type MenuTriggerAction = 'focus' | 'input' | 'manual';
-
-// Re-export FocusStrategy for convenience
-export type { FocusStrategy } from '../collections/types';
+export type { FocusStrategy } from "../collections/types";
 
 export type FilterFn = (textValue: string, inputValue: string) => boolean;
 
 export interface ComboBoxStateProps<T = unknown> {
   /** The items to display in the combobox dropdown. */
-  items: T[];
+  items?: T[];
   /** Default items when uncontrolled. */
   defaultItems?: T[];
   /** Function to get the key for an item. */
@@ -36,12 +31,20 @@ export interface ComboBoxStateProps<T = unknown> {
   getDisabled?: (item: T) => boolean;
   /** Keys of disabled items. */
   disabledKeys?: Iterable<Key>;
-  /** The currently selected key (controlled). */
+  /** The selection mode for the combobox. */
+  selectionMode?: "single" | "multiple";
+  /** The currently selected key (controlled, single mode). */
   selectedKey?: Key | null;
-  /** The default selected key (uncontrolled). */
+  /** The default selected key (uncontrolled, single mode). */
   defaultSelectedKey?: Key | null;
-  /** Handler called when the selection changes. */
+  /** The currently selected keys (controlled, multiple mode). */
+  selectedKeys?: Iterable<Key>;
+  /** The default selected keys (uncontrolled, multiple mode). */
+  defaultSelectedKeys?: Iterable<Key>;
+  /** Handler called when the selection changes (single mode). */
   onSelectionChange?: (key: Key | null) => void;
+  /** Handler called when the selection changes (multiple mode). */
+  onSelectionChangeMultiple?: (keys: Set<Key>) => void;
   /** The current input value (controlled). */
   inputValue?: string;
   /** The default input value (uncontrolled). */
@@ -83,14 +86,20 @@ export interface ComboBoxState<T = unknown> {
   close(): void;
   /** Toggle the combobox dropdown. */
   toggle(focusStrategy?: FocusStrategy | null, trigger?: MenuTriggerAction): void;
-  /** The currently selected key. */
+  /** The currently selected key (single mode). */
   readonly selectedKey: Accessor<Key | null>;
   /** The default selected key. */
   readonly defaultSelectedKey: Key | null;
-  /** The currently selected item. */
+  /** The currently selected item (single mode). */
   readonly selectedItem: Accessor<CollectionNode<T> | null>;
   /** Set the selected key. */
   setSelectedKey(key: Key | null): void;
+  /** The currently selected keys (multiple mode). */
+  readonly selectedKeys: Accessor<Set<Key>>;
+  /** The currently selected items (multiple mode). */
+  readonly selectedItems: Accessor<CollectionNode<T>[]>;
+  /** Remove a selected key (multiple mode). */
+  removeSelectedKey(key: Key): void;
   /** The current input value. */
   readonly inputValue: Accessor<string>;
   /** The default input value. */
@@ -115,8 +124,8 @@ export interface ComboBoxState<T = unknown> {
   isKeyDisabled(key: Key): boolean;
   /** Select a key and close the menu (for ListState compatibility). */
   select(key: Key): void;
-  /** The selection mode (always 'single' for combobox). */
-  readonly selectionMode: Accessor<'single'>;
+  /** The selection mode. */
+  readonly selectionMode: Accessor<"single" | "multiple">;
   /** Check if a key is selected. */
   isSelected(key: Key): boolean;
   /** Whether the combobox is disabled. */
@@ -127,10 +136,6 @@ export interface ComboBoxState<T = unknown> {
   readonly isRequired: boolean;
 }
 
-// ============================================
-// DEFAULT FILTER
-// ============================================
-
 /**
  * Default filter function that does case-insensitive "contains" matching.
  */
@@ -138,24 +143,21 @@ export const defaultContainsFilter: FilterFn = (textValue, inputValue) => {
   return textValue.toLowerCase().includes(inputValue.toLowerCase());
 };
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Creates state for a combobox component.
  * Combines list state with input value management and filtering.
  */
 export function createComboBoxState<T = unknown>(
-  props: MaybeAccessor<ComboBoxStateProps<T>>
+  props: MaybeAccessor<ComboBoxStateProps<T>>,
 ): ComboBoxState<T> {
   const getProps = () => access(props);
 
   // Extract options with defaults
-  const menuTrigger = () => getProps().menuTrigger ?? 'input';
+  const menuTrigger = () => getProps().menuTrigger ?? "input";
   const allowsEmptyCollection = () => getProps().allowsEmptyCollection ?? false;
   const allowsCustomValue = () => getProps().allowsCustomValue ?? false;
   const shouldCloseOnBlur = () => getProps().shouldCloseOnBlur ?? true;
+  const isMultiple = () => getProps().selectionMode === "multiple";
 
   // Track focus strategy for list navigation
   const [focusStrategy, setFocusStrategy] = createSignal<FocusStrategy | null>(null);
@@ -164,13 +166,32 @@ export function createComboBoxState<T = unknown>(
   const [showAllItems, setShowAllItems] = createSignal(false);
 
   // Track the menu open trigger
-  let menuOpenTrigger: MenuTriggerAction = 'focus';
+  let menuOpenTrigger: MenuTriggerAction = "focus";
 
-  // ---- Selection State ----
+  // ---- Multi-select State ----
+  const isMultiSelectionControlled = () => getProps().selectedKeys !== undefined;
+  const [internalSelectedKeys, setInternalSelectedKeys] = createSignal<Set<Key>>(
+    new Set(getProps().defaultSelectedKeys ?? []),
+  );
+
+  const selectedKeys: Accessor<Set<Key>> = () => {
+    return isMultiSelectionControlled()
+      ? new Set(getProps().selectedKeys ?? [])
+      : internalSelectedKeys();
+  };
+
+  const setSelectedKeys = (keys: Set<Key>) => {
+    if (!isMultiSelectionControlled()) {
+      setInternalSelectedKeys(new Set(keys));
+    }
+    getProps().onSelectionChangeMultiple?.(keys);
+  };
+
+  // ---- Selection State (single mode) ----
   // Note: Selection state is initialized first because input value may depend on it
   const isSelectionControlled = () => getProps().selectedKey !== undefined;
   const [internalSelectedKey, setInternalSelectedKey] = createSignal<Key | null>(
-    getProps().defaultSelectedKey ?? null
+    getProps().defaultSelectedKey ?? null,
   );
 
   // ---- Input Value State ----
@@ -179,13 +200,13 @@ export function createComboBoxState<T = unknown>(
 
   // We'll set the proper initial value after collection is created
   const [internalInputValue, setInternalInputValue] = createSignal(
-    getProps().defaultInputValue ?? ''
+    getProps().defaultInputValue ?? "",
   );
   // Track if we've initialized input from selection
   let inputInitialized = false;
 
   const inputValue: Accessor<string> = () => {
-    return isInputControlled() ? (getProps().inputValue ?? '') : internalInputValue();
+    return isInputControlled() ? (getProps().inputValue ?? "") : internalInputValue();
   };
 
   const setInputValue = (value: string) => {
@@ -240,14 +261,27 @@ export function createComboBoxState<T = unknown>(
     get disabledKeys() {
       return getProps().disabledKeys;
     },
-    selectionMode: 'single',
+    get selectionMode() {
+      return isMultiple() ? ("multiple" as const) : ("single" as const);
+    },
     disallowEmptySelection: false,
     get selectedKeys() {
+      if (isMultiple()) {
+        return Array.from(selectedKeys());
+      }
       const key = selectedKey();
       return key != null ? [key] : [];
     },
     onSelectionChange(keys) {
-      if (keys === 'all') return;
+      if (keys === "all") return;
+
+      if (isMultiple()) {
+        // In multiple mode, toggle selections
+        const newKeys = new Set(keys);
+        setSelectedKeys(newKeys);
+        return;
+      }
+
       const key = keys.size > 0 ? Array.from(keys)[0] : null;
 
       // If same key selected, just reset input and close
@@ -284,13 +318,24 @@ export function createComboBoxState<T = unknown>(
     return showAllItems() ? originalCollection() : filteredCollection();
   });
 
-  // ---- Selected Item ----
+  // ---- Selected Item(s) ----
   const selectedItem: Accessor<CollectionNode<T> | null> = () => {
     const key = selectedKey();
     if (key == null) return null;
     return originalCollection().getItem(key);
   };
 
+  const selectedItems = createMemo<CollectionNode<T>[]>(() => {
+    const keys = selectedKeys();
+    const collection = originalCollection();
+    const items: CollectionNode<T>[] = [];
+    for (const key of keys) {
+      const item = collection.getItem(key);
+      if (item) items.push(item);
+    }
+    return items;
+  });
+
   // Initialize input value from selected item if not already set
   // This runs once on creation
   if (!inputInitialized && !isInputControlled()) {
@@ -309,7 +354,7 @@ export function createComboBoxState<T = unknown>(
   // ---- Helper Functions ----
   const resetInputValue = () => {
     const item = selectedItem();
-    const textValue = item?.textValue ?? '';
+    const textValue = item?.textValue ?? "";
     setLastValue(textValue);
     setInputValue(textValue);
   };
@@ -322,14 +367,13 @@ export function createComboBoxState<T = unknown>(
 
   // ---- Open/Toggle Logic ----
   const open = (strategy: FocusStrategy | null = null, trigger?: MenuTriggerAction) => {
-    const displayAll = trigger === 'manual' || (trigger === 'focus' && menuTrigger() === 'focus');
+    const displayAll = trigger === "manual" || (trigger === "focus" && menuTrigger() === "focus");
 
     // Check if we should open
     const filtered = filteredCollection();
     const original = originalCollection();
-    const canOpen = allowsEmptyCollection() ||
-                    filtered.size > 0 ||
-                    (displayAll && original.size > 0);
+    const canOpen =
+      allowsEmptyCollection() || filtered.size > 0 || (displayAll && original.size > 0);
 
     if (!canOpen) return;
 
@@ -337,20 +381,32 @@ export function createComboBoxState<T = unknown>(
       setShowAllItems(true);
     }
 
-    menuOpenTrigger = trigger ?? 'focus';
+    menuOpenTrigger = trigger ?? "focus";
     setFocusStrategy(strategy);
+    if (!overlayState.isOpen()) {
+      const key = selectedKey();
+      const nextFocusedKey =
+        key != null && !listState.isDisabled(key)
+          ? key
+          : strategy === "first"
+            ? displayedCollection().getFirstKey()
+            : strategy === "last"
+              ? displayedCollection().getLastKey()
+              : null;
+      listState.setFocused(true);
+      listState.setFocusedKey(nextFocusedKey);
+    }
     overlayState.open();
   };
 
   const toggle = (strategy: FocusStrategy | null = null, trigger?: MenuTriggerAction) => {
-    const displayAll = trigger === 'manual' || (trigger === 'focus' && menuTrigger() === 'focus');
+    const displayAll = trigger === "manual" || (trigger === "focus" && menuTrigger() === "focus");
 
     // Check if we can open (if closed)
     const filtered = filteredCollection();
     const original = originalCollection();
-    const canOpen = allowsEmptyCollection() ||
-                    filtered.size > 0 ||
-                    (displayAll && original.size > 0);
+    const canOpen =
+      allowsEmptyCollection() || filtered.size > 0 || (displayAll && original.size > 0);
 
     if (!canOpen && !overlayState.isOpen()) return;
 
@@ -359,7 +415,7 @@ export function createComboBoxState<T = unknown>(
     }
 
     if (!overlayState.isOpen()) {
-      menuOpenTrigger = trigger ?? 'focus';
+      menuOpenTrigger = trigger ?? "focus";
     }
 
     setFocusStrategy(strategy);
@@ -377,7 +433,7 @@ export function createComboBoxState<T = unknown>(
     if (isSelectionControlled() && isInputControlled()) {
       getProps().onSelectionChange?.(selectedKey());
       const item = selectedItem();
-      setLastValue(item?.textValue ?? '');
+      setLastValue(item?.textValue ?? "");
       closeMenu();
     } else {
       // Reset input to selected item's text
@@ -389,7 +445,7 @@ export function createComboBoxState<T = unknown>(
   const commitValue = () => {
     if (allowsCustomValue()) {
       const item = selectedItem();
-      const itemText = item?.textValue ?? '';
+      const itemText = item?.textValue ?? "";
       if (inputValue() === itemText) {
         commitSelection();
       } else {
@@ -403,6 +459,14 @@ export function createComboBoxState<T = unknown>(
   const commit = () => {
     const focusedKey = listState.focusedKey();
 
+    if (isMultiple()) {
+      // In multiple mode, toggle the focused item without closing
+      if (overlayState.isOpen() && focusedKey != null) {
+        select(focusedKey);
+      }
+      return;
+    }
+
     if (overlayState.isOpen() && focusedKey != null) {
       // If focused key is already selected, just commit
       if (selectedKey() === focusedKey) {
@@ -410,6 +474,7 @@ export function createComboBoxState<T = unknown>(
       } else {
         // Select the focused item
         setSelectedKey(focusedKey);
+        closeMenu();
       }
     } else {
       commitValue();
@@ -426,13 +491,13 @@ export function createComboBoxState<T = unknown>(
 
   // ---- Focus Handling ----
   const [isFocused, setIsFocused] = createSignal(false);
-  let valueOnFocus = '';
+  let valueOnFocus = "";
 
   const setFocused = (focused: boolean) => {
     if (focused) {
       valueOnFocus = inputValue();
-      if (menuTrigger() === 'focus' && !getProps().isReadOnly) {
-        open(null, 'focus');
+      if (menuTrigger() === "focus" && !getProps().isReadOnly) {
+        open(null, "focus");
       }
     } else {
       if (shouldCloseOnBlur()) {
@@ -456,18 +521,13 @@ export function createComboBoxState<T = unknown>(
       (filtered.size > 0 || allowsEmptyCollection()) &&
       !isOpen &&
       input !== last &&
-      menuTrigger() !== 'manual'
+      menuTrigger() !== "manual"
     ) {
-      open(null, 'input');
+      open(null, "input");
     }
 
     // Auto-close when empty (unless showing all)
-    if (
-      !showAllItems() &&
-      !allowsEmptyCollection() &&
-      isOpen &&
-      filtered.size === 0
-    ) {
+    if (!showAllItems() && !allowsEmptyCollection() && isOpen && filtered.size === 0) {
       closeMenu();
     }
 
@@ -477,7 +537,7 @@ export function createComboBoxState<T = unknown>(
       setShowAllItems(false);
 
       // Clear selection when input is cleared (if not fully controlled)
-      if (input === '' && (!isInputControlled() || !isSelectionControlled())) {
+      if (input === "" && (!isInputControlled() || !isSelectionControlled())) {
         setSelectedKey(null);
       }
 
@@ -485,11 +545,12 @@ export function createComboBoxState<T = unknown>(
     }
   });
 
-  // Update input when selection changes
+  // Update input when selection changes (only in single mode)
   createEffect(() => {
+    if (isMultiple()) return;
     const key = selectedKey();
     const item = key != null ? originalCollection().getItem(key) : null;
-    const textValue = item?.textValue ?? '';
+    const textValue = item?.textValue ?? "";
 
     // Only update if selection changed and not fully controlled
     if (!isInputControlled() || !isSelectionControlled()) {
@@ -500,8 +561,9 @@ export function createComboBoxState<T = unknown>(
     }
   });
 
-  // Close when selection changes
+  // Close when selection changes (only in single mode)
   createEffect((prevKey: Key | null | undefined) => {
+    if (isMultiple()) return undefined;
     const key = selectedKey();
     if (key != null && key !== prevKey) {
       closeMenu();
@@ -512,12 +574,38 @@ export function createComboBoxState<T = unknown>(
   // ---- Selection Methods for ListState compatibility ----
   // These methods allow createOption to work with ComboBoxState
   const select = (key: Key) => {
-    setSelectedKey(key);
-    closeMenu();
+    if (isMultiple()) {
+      // Toggle selection in multiple mode
+      const current = new Set(selectedKeys());
+      if (current.has(key)) {
+        current.delete(key);
+      } else {
+        current.add(key);
+      }
+      setSelectedKeys(current);
+      // Don't close menu and don't reset input in multi-select mode
+    } else {
+      setSelectedKey(key);
+      closeMenu();
+    }
+  };
+
+  const removeSelectedKey = (key: Key) => {
+    if (isMultiple()) {
+      const current = new Set(selectedKeys());
+      current.delete(key);
+      setSelectedKeys(current);
+    }
   };
 
-  const selectionMode: Accessor<'single'> = () => 'single';
-  const isSelected = (key: Key) => selectedKey() === key;
+  const selectionMode: Accessor<"single" | "multiple"> = () => getProps().selectionMode ?? "single";
+
+  const isSelected = (key: Key) => {
+    if (isMultiple()) {
+      return selectedKeys().has(key);
+    }
+    return selectedKey() === key;
+  };
 
   // ---- Return State ----
   return {
@@ -530,8 +618,11 @@ export function createComboBoxState<T = unknown>(
     defaultSelectedKey: getProps().defaultSelectedKey ?? null,
     selectedItem,
     setSelectedKey,
+    selectedKeys,
+    selectedItems,
+    removeSelectedKey,
     inputValue,
-    defaultInputValue: getProps().defaultInputValue ?? '',
+    defaultInputValue: getProps().defaultInputValue ?? "",
     setInputValue,
     focusedKey: listState.focusedKey,
     setFocusedKey: listState.setFocusedKey,
@@ -557,17 +648,13 @@ export function createComboBoxState<T = unknown>(
   };
 }
 
-// ============================================
-// COLLECTION FILTERING
-// ============================================
-
 /**
  * Filter a collection based on input value.
  */
 function filterCollection<T>(
   collection: Collection<T>,
   inputValue: string,
-  filter: FilterFn
+  filter: FilterFn,
 ): Collection<T> {
   if (!inputValue) {
     return collection;
@@ -576,12 +663,12 @@ function filterCollection<T>(
   const filteredItems: CollectionNode<T>[] = [];
 
   for (const item of collection) {
-    if (item.type === 'section') {
+    if (item.type === "section") {
       // Filter section children
       const filteredChildren: CollectionNode<T>[] = [];
       if (item.childNodes) {
         for (const child of item.childNodes) {
-          if (child.type === 'item' && filter(child.textValue, inputValue)) {
+          if (child.type === "item" && filter(child.textValue, inputValue)) {
             filteredChildren.push(child);
           }
         }
@@ -593,7 +680,7 @@ function filterCollection<T>(
           childNodes: filteredChildren,
         });
       }
-    } else if (item.type === 'item') {
+    } else if (item.type === "item") {
       if (filter(item.textValue, inputValue)) {
         filteredItems.push(item);
       }
@@ -609,7 +696,7 @@ function filterCollection<T>(
  */
 function createFilteredCollection<T>(
   items: CollectionNode<T>[],
-  original: Collection<T>
+  original: Collection<T>,
 ): Collection<T> {
   const itemMap = new Map<Key, CollectionNode<T>>();
 
@@ -626,10 +713,10 @@ function createFilteredCollection<T>(
     get size() {
       let count = 0;
       for (const item of items) {
-        if (item.type === 'item') {
+        if (item.type === "item") {
           count++;
         } else if (item.childNodes) {
-          count += Array.from(item.childNodes).filter(c => c.type === 'item').length;
+          count += Array.from(item.childNodes).filter((c) => c.type === "item").length;
         }
       }
       return count;
@@ -642,10 +729,10 @@ function createFilteredCollection<T>(
     },
     getFirstKey() {
       for (const item of items) {
-        if (item.type === 'item') return item.key;
+        if (item.type === "item") return item.key;
         if (item.childNodes) {
           for (const child of item.childNodes) {
-            if (child.type === 'item') return child.key;
+            if (child.type === "item") return child.key;
           }
         }
       }
@@ -654,11 +741,11 @@ function createFilteredCollection<T>(
     getLastKey() {
       for (let i = items.length - 1; i >= 0; i--) {
         const item = items[i];
-        if (item.type === 'item') return item.key;
+        if (item.type === "item") return item.key;
         if (item.childNodes) {
           const children = Array.from(item.childNodes);
           for (let j = children.length - 1; j >= 0; j--) {
-            if (children[j].type === 'item') return children[j].key;
+            if (children[j].type === "item") return children[j].key;
           }
         }
       }
@@ -674,12 +761,12 @@ function createFilteredCollection<T>(
       // Flatten items for indexing
       let currentIndex = 0;
       for (const item of items) {
-        if (item.type === 'item') {
+        if (item.type === "item") {
           if (currentIndex === index) return item;
           currentIndex++;
         } else if (item.childNodes) {
           for (const child of item.childNodes) {
-            if (child.type === 'item') {
+            if (child.type === "item") {
               if (currentIndex === index) return child;
               currentIndex++;
             }
@@ -694,7 +781,7 @@ function createFilteredCollection<T>(
     },
     getTextValue(key: Key) {
       const item = itemMap.get(key);
-      return item?.textValue ?? '';
+      return item?.textValue ?? "";
     },
     [Symbol.iterator]() {
       return items[Symbol.iterator]();

package/src/combobox/index.d.ts

@@ -1,5 +1,13 @@
 /**
  * ComboBox state management for Solid Stately.
  */
-export { createComboBoxState, defaultContainsFilter, type ComboBoxState, type ComboBoxStateProps, type FilterFn, type MenuTriggerAction, type FocusStrategy, } from './createComboBoxState';
-//# sourceMappingURL=index.d.ts.map
+export {
+  createComboBoxState,
+  defaultContainsFilter,
+  type ComboBoxState,
+  type ComboBoxStateProps,
+  type FilterFn,
+  type MenuTriggerAction,
+  type FocusStrategy,
+} from "./createComboBoxState";
+//# sourceMappingURL=index.d.ts.map

package/src/combobox/index.ts

@@ -10,4 +10,4 @@ export {
   type FilterFn,
   type MenuTriggerAction,
   type FocusStrategy,
-} from './createComboBoxState';
+} from "./createComboBoxState";