@proyecto-viviana/solid-stately 0.4.0 → 0.5.0

package/src/combobox/createComboBoxState.ts

@@ -6,7 +6,7 @@
  * either type to filter options or select from a list.
  */
 
-import { createSignal, createMemo, createEffect, type Accessor } from "solid-js";
+import { createSignal, createMemo, createEffect, untrack, type Accessor } from "solid-js";
 import { access, type MaybeAccessor } from "../utils";
 import { createListState } from "../collections/createListState";
 import { createOverlayTriggerState } from "../overlays";
@@ -373,6 +373,28 @@ export function createComboBoxState<T = unknown>(
   };
 
   // ---- Open/Toggle Logic ----
+  // Auto-focus the menu on open the way upstream's listbox does via its
+  // `autoFocus: state.focusStrategy || true` prop (useComboBox.ts:490 → useSelectableCollection):
+  // the first selectable selected key, else the first/last key for an explicit
+  // strategy, else nothing. The port drives this from the state (createListBox
+  // reimplements nav inline and does not honor a listbox `autoFocus` prop), so
+  // BOTH open() and toggle() must apply it — a button/mouse open routes through
+  // toggle(), and omitting it there left the menu opened with no active option
+  // (no aria-activedescendant / no highlighted row) unlike upstream.
+  const applyOpenFocus = (strategy: FocusStrategy | null) => {
+    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);
+  };
+
   const open = (strategy: FocusStrategy | null = null, trigger?: MenuTriggerAction) => {
     const displayAll = trigger === "manual" || (trigger === "focus" && menuTrigger() === "focus");
 
@@ -391,17 +413,7 @@ export function createComboBoxState<T = unknown>(
     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);
+      applyOpenFocus(strategy);
     }
     overlayState.open();
   };
@@ -417,15 +429,20 @@ export function createComboBoxState<T = unknown>(
 
     if (!canOpen && !overlayState.isOpen()) return;
 
-    if (displayAll && !overlayState.isOpen()) {
+    const willOpen = !overlayState.isOpen();
+
+    if (displayAll && willOpen) {
       setShowAllItems(true);
     }
 
-    if (!overlayState.isOpen()) {
+    if (willOpen) {
       menuOpenTrigger = trigger ?? "focus";
     }
 
     setFocusStrategy(strategy);
+    if (willOpen) {
+      applyOpenFocus(strategy);
+    }
     overlayState.toggle();
   };
 
@@ -552,7 +569,22 @@ export function createComboBoxState<T = unknown>(
     }
   });
 
-  // Update input when selection changes (only in single mode)
+  // Keep the input text in sync with the selected item (single mode only).
+  //
+  // This effect must react to the SELECTION and the COLLECTION — when the
+  // selected key changes, or when its item (and thus textValue) resolves as
+  // items load — but it must NOT react to the input value itself. The previous
+  // port compared `textValue !== inputValue()`, reading `inputValue()` inside
+  // the effect; in Solid that subscribes the effect to the input signal, so it
+  // re-ran on every keystroke and — while any selection was active — immediately
+  // reset the input back to the selected item's text. The result: the user
+  // could neither type nor delete in the field.
+  //
+  // The comparison is unchanged, but `inputValue()` is now read via `untrack`,
+  // so it is used only to decide whether a reset is needed and never becomes a
+  // dependency. `originalCollection()` stays tracked (the unfiltered collection
+  // only changes when `items` change, never on filtering) so a preset selection
+  // still gets its text once async items arrive.
   createEffect(() => {
     if (isMultiple()) return;
     const key = selectedKey();
@@ -561,7 +593,7 @@ export function createComboBoxState<T = unknown>(
 
     // Only update if selection changed and not fully controlled
     if (!isInputControlled() || !isSelectionControlled()) {
-      if (key != null && textValue !== inputValue()) {
+      if (key != null && textValue !== untrack(inputValue)) {
         setInputValue(textValue);
         setLastValue(textValue);
       }

package/src/dnd/createDroppableCollectionState.ts

@@ -21,6 +21,7 @@ import type {
   DroppableCollectionReorderEvent,
   ItemDropTarget,
 } from "./types";
+import type { Collection } from "../collections/types";
 
 export interface DroppableCollectionStateOptions {
   /**
@@ -56,6 +57,14 @@ export interface DroppableCollectionStateOptions {
   onMove?: (e: DroppableCollectionReorderEvent) => void;
   /** A function returning whether a given target is a valid "on" drop target. */
   shouldAcceptItemDrop?: (target: ItemDropTarget, types: DragTypes) => boolean;
+  /**
+   * The host collection. Used by the default drop-operation feature detection to
+   * confirm a reorder stays within the same parent and to prevent dropping an
+   * item onto itself or a descendant. Optional: a flat collection (e.g. a plain
+   * ListBox) is always "within parent" and has no descendants, so omitting it is
+   * faithful for flat hosts.
+   */
+  collection?: Collection<unknown>;
   /** Whether the droppable collection is disabled. */
   isDisabled?: boolean;
 }
@@ -86,11 +95,19 @@ export interface DroppableCollectionState {
     isInternal: boolean,
     draggingKeys?: Set<string | number>,
   ): void;
-  /** Get the drop operation for a target. */
+  /**
+   * Get the drop operation for a target. `isInternal` is true when the active
+   * drag originated from this same collection; `draggingKeys` are the keys being
+   * dragged. Both feed the handler-aware feature detection that decides whether a
+   * given drop position (before/after/on/root) is a valid target — e.g. a
+   * reorder-only collection rejects "on" targets, matching React Aria.
+   */
   getDropOperation(
     target: DropTarget,
     types: DragTypes,
     allowedOperations: DropOperation[],
+    isInternal?: boolean,
+    draggingKeys?: Set<string | number>,
   ): DropOperation;
   /** Check if an item drop should be accepted. */
   shouldAcceptItemDrop(target: ItemDropTarget, types: DragTypes): boolean;
@@ -287,22 +304,124 @@ export function createDroppableCollectionState(
     }
   };
 
-  const getDropOperation = (
-    dropTarget: DropTarget,
+  // Faithful of react-stately's `isDraggingWithinParent`: every dragged item must
+  // share the target's parent for a reorder to be valid. A flat collection (no
+  // `collection` provided) has a single implicit parent, so this is always true.
+  const isDraggingWithinParent = (
+    target: ItemDropTarget,
+    draggingKeys: Set<string | number>,
+  ): boolean => {
+    const collection = getProps().collection;
+    if (!collection) return true;
+    const targetNode = collection.getItem(target.key);
+    for (const key of draggingKeys) {
+      const node = collection.getItem(key);
+      if (node?.parentKey !== targetNode?.parentKey) {
+        return false;
+      }
+    }
+    return true;
+  };
+
+  // Faithful of react-stately's `defaultGetDropOperation`: decide whether a drop
+  // position is a valid target from the handlers that are actually wired. A
+  // reorder-only collection (only `onReorder`) accepts before/after but rejects
+  // "on"; an item-drop collection accepts "on"; and so on.
+  const defaultGetDropOperation = (
+    target: DropTarget,
     types: DragTypes,
     allowedOperations: DropOperation[],
+    isInternal: boolean,
+    draggingKeys: Set<string | number>,
   ): DropOperation => {
     const p = getProps();
 
+    if (p.isDisabled || !target) {
+      return "cancel";
+    }
+
     if (!isAccepted(types)) {
       return "cancel";
     }
 
-    if (typeof p.getDropOperation === "function") {
-      return p.getDropOperation(dropTarget, types, allowedOperations);
+    const isValidInsert =
+      p.onInsert &&
+      target.type === "item" &&
+      !isInternal &&
+      (target.dropPosition === "before" || target.dropPosition === "after");
+    const isValidReorder =
+      p.onReorder &&
+      target.type === "item" &&
+      isInternal &&
+      (target.dropPosition === "before" || target.dropPosition === "after") &&
+      isDraggingWithinParent(target, draggingKeys);
+
+    const isItemDropAllowed =
+      target.type !== "item" ||
+      target.dropPosition !== "on" ||
+      !p.shouldAcceptItemDrop ||
+      p.shouldAcceptItemDrop(target, types);
+
+    const isValidMove = p.onMove && target.type === "item" && isInternal && isItemDropAllowed;
+
+    // Feedback was that internal root drop was weird, so it is prevented.
+    const isValidRootDrop = p.onRootDrop && target.type === "root" && !isInternal;
+
+    // Automatically prevent items (e.g. folders) from being dropped on themselves.
+    const isValidOnItemDrop =
+      p.onItemDrop &&
+      target.type === "item" &&
+      target.dropPosition === "on" &&
+      !(isInternal && target.key != null && draggingKeys.has(target.key)) &&
+      isItemDropAllowed;
+
+    if (
+      p.onDrop ||
+      isValidInsert ||
+      isValidReorder ||
+      isValidMove ||
+      isValidRootDrop ||
+      isValidOnItemDrop
+    ) {
+      if (typeof p.getDropOperation === "function") {
+        return p.getDropOperation(target, types, allowedOperations);
+      }
+      return allowedOperations[0] ?? "cancel";
+    }
+
+    return "cancel";
+  };
+
+  const getDropOperation = (
+    dropTarget: DropTarget,
+    types: DragTypes,
+    allowedOperations: DropOperation[],
+    isInternal: boolean = false,
+    draggingKeys: Set<string | number> = new Set(),
+  ): DropOperation => {
+    // Prevent dropping items onto themselves or their descendants (faithful of
+    // react-stately's `getDropOperation` guard). Only meaningful for a nested
+    // collection; a flat host has no descendants.
+    if (isInternal && dropTarget.type === "item" && draggingKeys.size > 0) {
+      if (draggingKeys.has(dropTarget.key) && dropTarget.dropPosition === "on") {
+        return "cancel";
+      }
+
+      const collection = getProps().collection;
+      if (collection) {
+        let currentKey: string | number | null = dropTarget.key;
+        while (currentKey != null) {
+          const item = collection.getItem(currentKey);
+          const parentKey = item?.parentKey;
+          if (parentKey != null && draggingKeys.has(parentKey)) {
+            return "cancel";
+          }
+          currentKey = parentKey ?? null;
+        }
+      }
     }
 
-    return allowedOperations[0] ?? "cancel";
+    return defaultGetDropOperation(dropTarget, types, allowedOperations, isInternal, draggingKeys);
   };
 
   const shouldAcceptItemDrop = (dropTarget: ItemDropTarget, types: DragTypes): boolean => {

package/src/index.ts

@@ -50,14 +50,17 @@ export {
   type MultipleSelection,
   ListCollection,
   createListCollection,
+  getItemCount,
   createSelectionState,
   type SelectionStateProps,
   type SelectionState,
   type SelectionPressEvent,
   createListState,
+  createFilteredListState,
   createSingleSelectListState,
   type ListStateProps,
   type ListState,
+  type ListFilterFn,
   type SingleSelectListStateProps,
   type SingleSelectListState,
   createMenuState,

package/src/selection/SelectionManager.ts

@@ -523,4 +523,19 @@ export class SelectionManager<T = unknown> {
       fullCollection: this.fullCollection ?? this.collection,
     });
   }
+
+  /**
+   * Like {@link withCollection}, but the collection is supplied as a live
+   * accessor so the returned manager stays reactive as the collection recomputes
+   * (e.g. an Autocomplete filter narrowing the list as the user types). The
+   * shared underlying selection/focus state is preserved, and the original
+   * (unfiltered) collection is retained as `fullCollection` so a select-all
+   * still materializes the filtered-out keys.
+   */
+  withCollectionAccessor(collection: () => Collection<T>): SelectionManager<T> {
+    return new SelectionManager<T>(collection, this.state, {
+      layoutDelegate: this.layoutDelegate ?? undefined,
+      fullCollection: this.fullCollection ?? this.collection,
+    });
+  }
 }

package/src/steplist/createStepListState.ts

@@ -3,7 +3,7 @@
  * Tracks selected step, completion status, and selectability.
  */
 
-import { createMemo, createSignal, type Accessor } from "solid-js";
+import { createEffect, createMemo, createSignal, type Accessor } from "solid-js";
 import type { Key } from "../collections/types";
 
 export interface StepListStateProps {
@@ -112,13 +112,16 @@ export function createStepListState(props: StepListStateProps): StepListState {
     // First step is always selectable
     const keyIndex = indexMap().get(key);
     if (keyIndex === 0) return true;
-    // A step is selectable if the previous step is completed OR is the currently selected step
+    // Otherwise a step is selectable only if the PREVIOUS step is completed —
+    // mirrors react-stately `useStepListState.isSelectable`
+    // (`isCompleted(prevStep) || step === firstKey`). There is no "step after the
+    // currently selected step" clause upstream: a fresh list exposes only the
+    // first step, and the immediate-next step becomes selectable when its
+    // predecessor is *completed*, not merely selected.
     const currentItems = items();
     if (keyIndex !== undefined && keyIndex > 0) {
       const prevKey = currentItems[keyIndex - 1].key;
       if (isCompleted(prevKey)) return true;
-      // Allow advancing to the step immediately after the selected step
-      if (prevKey === selectedKey()) return true;
     }
     return false;
   };
@@ -177,6 +180,26 @@ export function createStepListState(props: StepListStateProps): StepListState {
     props.onSelectionChange?.(key);
   };
 
+  // Mirror react-stately `useStepListState`'s effect: whenever the selected step
+  // sits more than one past the last completed step (e.g. mounted with a
+  // `defaultSelectedKey` ahead of progress), auto-complete its immediate
+  // predecessor. Because completion is cumulative (`isCompleted` = index ≤
+  // lastCompleted index), advancing `lastCompletedStep` to `selectedIdx - 1`
+  // marks every intermediate step complete. This runs regardless of
+  // `isDisabled` / `isReadOnly`, exactly as upstream (the effect is ungated).
+  createEffect(() => {
+    const selKey = selectedKey();
+    if (selKey === null) return;
+    const selIdx = indexMap().get(selKey);
+    if (selIdx === undefined || selIdx <= 0) return;
+    const completed = lastCompletedStep();
+    const lcs = completed !== null ? (indexMap().get(completed) ?? -1) : -1;
+    if (selIdx > lcs + 1) {
+      const prevKey = items()[selIdx - 1]?.key;
+      if (prevKey !== undefined) setLastCompletedStep(prevKey);
+    }
+  });
+
   return {
     selectedKey,
     lastCompletedStep,

package/src/tabs/createTabListState.ts

@@ -88,7 +88,15 @@ export function createTabListState<T = unknown>(
     const nodes: CollectionNode<T>[] = items.map((item, index) => {
       const o = item as CollectionItemLike;
       const key = p.getKey?.(item) ?? o.key ?? o.id ?? index;
-      const textValue = p.getTextValue?.(item) ?? o.textValue ?? o.label ?? String(item);
+      // See createListState: `String(item)` yields "[object Object]" for a plain
+      // object, so widen to name/title and fall back to the key for object items.
+      const textValue =
+        p.getTextValue?.(item) ??
+        o.textValue ??
+        o.label ??
+        o.name ??
+        o.title ??
+        (item != null && typeof item === "object" ? String(key) : String(item));
       const isDisabled = p.getDisabled?.(item) ?? o.isDisabled ?? false;
 
       return {