@proyecto-viviana/solid-stately 0.6.0-rc.0 → 0.6.0-rc.1

package/src/steplist/createStepListState.ts

@@ -22,10 +22,13 @@
 import { createEffect, createMemo } from "solid-js";
 import type { Accessor } from "solid-js";
 import { createInternalSignal } from "../utils";
+import type { CollectionNode, Key } from "../collections/types";
+import {
+  createSingleSelectListState,
+  type SingleSelectListState,
+} from "../collections/createListState";
 
-import type { Key } from "../collections/types";
-
-export interface StepListStateProps {
+export interface StepListStateProps<T = unknown> {
   /** The currently selected step key (controlled). */
   selectedKey?: Key;
   /** The default selected step key (uncontrolled). */
@@ -45,44 +48,29 @@ export interface StepListStateProps {
   /** Keys of individually disabled steps. */
   disabledKeys?: Iterable<Key>;
   /** The step items. */
-  items: Array<{ key: Key; [key: string]: any }>;
+  items: T[];
 }
 
-export interface StepListState {
-  readonly selectedKey: Accessor<Key | null>;
+export interface StepListState<T = unknown> extends SingleSelectListState<T> {
   readonly lastCompletedStep: Accessor<Key | null>;
-  readonly items: Accessor<Array<{ key: Key }>>;
+  readonly items: Accessor<T[]>;
   setSelectedKey(key: Key): void;
-  setLastCompletedStep(key: Key): void;
+  setLastCompletedStep(key: Key | null): void;
   isCompleted(key: Key): boolean;
   isSelectable(key: Key): boolean;
-  isDisabled: Accessor<boolean>;
+  isDisabled: Accessor<boolean> & ((key?: Key) => boolean);
   isReadOnly: Accessor<boolean>;
 }
 
 /**
  * Creates state for a step list component.
  */
-export function createStepListState(props: StepListStateProps): StepListState {
-  const items = () => props.items;
-
-  // Build an index map: Key -> index
-  const indexMap = createMemo(() => {
-    const map = new Map<Key, number>();
-    const currentItems = items();
-    for (let i = 0; i < currentItems.length; i++) {
-      map.set(currentItems[i].key, i);
-    }
-    return map;
-  });
-
-  // Disabled keys set
-  const disabledKeysSet = createMemo(() => new Set<Key>(props.disabledKeys ?? []));
-
-  const isDisabled: Accessor<boolean> = () => props.isDisabled ?? false;
+export function createStepListState<T = unknown>(props: StepListStateProps<T>): StepListState<T> {
+  const isListDisabled: Accessor<boolean> = () => props.isDisabled ?? false;
   const isReadOnly: Accessor<boolean> = () => props.isReadOnly ?? false;
+  const items: Accessor<T[]> = () => props.items ?? [];
 
-  // Last completed step signal (uncontrolled)
+  // Last completed step signal (uncontrolled / controlled sync)
   const [lastCompletedStepInternal, setLastCompletedStepInternal] =
     createInternalSignal<Key | null>(props.defaultLastCompletedStep ?? null);
 
@@ -93,143 +81,188 @@ export function createStepListState(props: StepListStateProps): StepListState {
     return lastCompletedStepInternal();
   };
 
-  const setLastCompletedStep = (key: Key) => {
-    const currentIndex = indexMap().get(key);
-    const prevIndex = lastCompletedStep() !== null ? indexMap().get(lastCompletedStep()!) : -1;
-
-    // Only advance completion, never go back
-    if (
-      currentIndex !== undefined &&
-      (prevIndex === undefined || currentIndex > (prevIndex ?? -1))
-    ) {
-      if (props.lastCompletedStep === undefined) {
-        setLastCompletedStepInternal(key);
-      }
-      props.onLastCompletedStepChange?.(key);
-    }
-  };
-
-  const isCompleted = (key: Key): boolean => {
+  const isCompleted = (step: Key): boolean => {
+    if (step == null) return false;
     const completed = lastCompletedStep();
-    if (completed === null) return false;
-    const keyIndex = indexMap().get(key);
-    const completedIndex = indexMap().get(completed);
-    if (keyIndex === undefined || completedIndex === undefined) return false;
-    return keyIndex <= completedIndex;
+    if (completed == null) return false;
+    const { indexMap } = keyMaps();
+    const stepIdx = indexMap.get(step);
+    const completedIdx = indexMap.get(completed);
+    if (stepIdx === undefined || completedIdx === undefined) return false;
+    return stepIdx <= completedIdx;
   };
 
-  const isStepDisabled = (key: Key): boolean => {
-    if (isDisabled()) return true;
-    return disabledKeysSet().has(key);
-  };
-
-  const isSelectable = (key: Key): boolean => {
-    if (isDisabled() || isReadOnly() || isStepDisabled(key)) return false;
-    // Completed steps are always selectable
-    if (isCompleted(key)) return true;
-    // First step is always selectable
-    const keyIndex = indexMap().get(key);
-    if (keyIndex === 0) return true;
-    // 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;
+  const isSelectable = (step: Key): boolean => {
+    if (isListDisabled() || singleSelectListState.disabledKeys().has(step) || isReadOnly()) {
+      return false;
     }
-    return false;
+    if (isCompleted(step)) return true;
+    const { keysLinkedList } = keyMaps();
+    const prevStep = keysLinkedList.get(step);
+    return (
+      (prevStep !== undefined && isCompleted(prevStep)) ||
+      step === singleSelectListState.collection().getFirstKey()
+    );
   };
 
-  // Find the first selectable non-completed step
-  const findDefaultSelectedKey = (): Key | null => {
-    const currentItems = items();
-    for (const item of currentItems) {
-      if (!isCompleted(item.key) && !isStepDisabled(item.key)) {
-        return item.key;
-      }
+  const findInitialSelectedKey = (): Key | undefined => {
+    if (props.defaultSelectedKey !== undefined) {
+      return props.defaultSelectedKey;
     }
-    // All completed - select first non-disabled
+    const currentItems = (props.items ?? []) as Array<{ key: Key }>;
+    const disabled = new Set<Key>(props.disabledKeys ?? []);
     for (const item of currentItems) {
-      if (!isStepDisabled(item.key)) {
+      if (!disabled.has(item.key)) {
         return item.key;
       }
     }
-    return currentItems.length > 0 ? currentItems[0].key : null;
+    return currentItems[0]?.key;
   };
 
-  // Selected key signal (uncontrolled)
-  const [selectedKeyInternal, setSelectedKeyInternal] = createInternalSignal<Key | null>(
-    props.defaultSelectedKey ?? findDefaultSelectedKey(),
-  );
-
-  const selectedKey: Accessor<Key | null> = () => {
-    if (props.selectedKey !== undefined) {
+  // Route through the shared SingleSelectListState collection spine
+  const singleSelectListState = createSingleSelectListState<T>({
+    get items() {
+      return (props.items ?? []) as T[];
+    },
+    getKey(item: any) {
+      return item.key;
+    },
+    getTextValue(item: any) {
+      return item.label ?? item.textValue ?? (item.key != null ? String(item.key) : "");
+    },
+    get disabledKeys() {
+      return props.disabledKeys;
+    },
+    get selectedKey() {
       return props.selectedKey;
-    }
-    return selectedKeyInternal();
-  };
+    },
+    get defaultSelectedKey() {
+      return findInitialSelectedKey();
+    },
+    onSelectionChange(key) {
+      if (key != null) {
+        props.onSelectionChange?.(key);
+      }
+    },
+  });
 
-  const setSelectedKey = (key: Key) => {
-    if (isReadOnly() || isDisabled()) return;
-    if (!isSelectable(key)) return;
+  // Build indexMap and keysLinkedList from the collection
+  const keyMaps = createMemo(() => {
+    const coll = singleSelectListState.collection();
+    const indexMap = new Map<Key, number>();
+    const keysLinkedList = new Map<Key, Key | undefined>();
+    let i = 0;
+    let prev: CollectionNode<T> | undefined;
+    for (const item of coll) {
+      indexMap.set(item.key, i);
+      keysLinkedList.set(item.key, prev?.key);
+      prev = item;
+      i++;
+    }
+    return { indexMap, keysLinkedList };
+  });
 
-    // Mark previous selected step as completed if advancing
-    const currentSelected = selectedKey();
-    if (currentSelected !== null) {
-      const currentIndex = indexMap().get(currentSelected);
-      const newIndex = indexMap().get(key);
-      if (
-        currentIndex !== undefined &&
-        newIndex !== undefined &&
-        newIndex > currentIndex &&
-        !isCompleted(currentSelected)
-      ) {
-        setLastCompletedStep(currentSelected);
+  const setLastCompletedStep = (key: Key | null) => {
+    if (key == null) {
+      if (props.lastCompletedStep === undefined) {
+        setLastCompletedStepInternal(null);
       }
+      props.onLastCompletedStepChange?.(null);
+      return;
     }
+    const { indexMap } = keyMaps();
+    const currentIndex = indexMap.get(key);
+    const completed = lastCompletedStep();
+    const prevIndex = completed !== null ? indexMap.get(completed) : -1;
 
-    if (props.selectedKey === undefined) {
-      setSelectedKeyInternal(key);
+    // Only advance completion, never go back
+    if (
+      currentIndex !== undefined &&
+      (prevIndex === undefined || currentIndex > (prevIndex ?? -1))
+    ) {
+      if (props.lastCompletedStep === undefined) {
+        setLastCompletedStepInternal(key);
+      }
+      props.onLastCompletedStepChange?.(key);
     }
-    props.onSelectionChange?.(key);
   };
 
-  // Mirror react-stately `useStepListState`'s effect: whenever the selected step
+  // 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).
+  // defaultSelectedKey ahead of progress), auto-complete its immediate predecessor.
   createEffect(
     () => {
-      const selKey = selectedKey();
+      const selKey = singleSelectListState.selectedKey();
       if (selKey === null) return null;
-      const selIdx = indexMap().get(selKey);
+      const { indexMap, keysLinkedList } = keyMaps();
+      const selIdx = indexMap.get(selKey);
       if (selIdx === undefined || selIdx <= 0) return null;
       const completed = lastCompletedStep();
-      const lcs = completed !== null ? (indexMap().get(completed) ?? -1) : -1;
+      const lcs = completed !== null ? (indexMap.get(completed) ?? -1) : -1;
       if (selIdx <= lcs + 1) return null;
-      return items()[selIdx - 1]?.key;
+      return keysLinkedList.get(selKey) ?? null;
     },
     (prevKey) => {
-      if (prevKey !== undefined && prevKey !== null) setLastCompletedStep(prevKey);
+      if (prevKey != null) {
+        setLastCompletedStep(prevKey);
+      }
     },
   );
 
+  // Sync initial focus to selectedKey if focusedKey is unset
+  createEffect(
+    () => singleSelectListState.selectedKey(),
+    (selKey) => {
+      if (singleSelectListState.focusedKey() == null && selKey != null) {
+        singleSelectListState.setFocusedKey(selKey);
+      }
+    },
+  );
+
+  const setSelectedKey = (key: Key) => {
+    if (isListDisabled() || isReadOnly()) return;
+    if (!isSelectable(key)) return;
+    const { keysLinkedList } = keyMaps();
+    const prevKey = keysLinkedList.get(key);
+    if (prevKey && !isCompleted(prevKey)) {
+      setLastCompletedStep(prevKey);
+    }
+    singleSelectListState.setSelectedKey(key);
+  };
+
+  // Bridge selectionManager with step list selectability
+  singleSelectListState.selectionManager.canSelectItem = (key: Key) => isSelectable(key);
+  const origReplaceSelection = singleSelectListState.selectionManager.replaceSelection.bind(
+    singleSelectListState.selectionManager,
+  );
+  singleSelectListState.selectionManager.replaceSelection = (key: Key) => {
+    if (isListDisabled() || isReadOnly()) return;
+    if (!isSelectable(key)) return;
+    const { keysLinkedList } = keyMaps();
+    const prevKey = keysLinkedList.get(key);
+    if (prevKey && !isCompleted(prevKey)) {
+      setLastCompletedStep(prevKey);
+    }
+    origReplaceSelection(key);
+  };
+
+  const isDisabledFn = ((key?: Key): boolean => {
+    if (key === undefined) {
+      return isListDisabled();
+    }
+    return !isSelectable(key);
+  }) as Accessor<boolean> & ((key?: Key) => boolean);
+
   return {
-    selectedKey,
+    ...singleSelectListState,
+    selectedKey: singleSelectListState.selectedKey,
     lastCompletedStep,
     items,
     setSelectedKey,
     setLastCompletedStep,
     isCompleted,
     isSelectable,
-    isDisabled,
+    isDisabled: isDisabledFn,
     isReadOnly,
   };
 }

package/src/table/createTableColumnResizeState.ts

@@ -113,13 +113,38 @@ function parseColumnDef(col: ColumnResizeDefinition, tableWidth: number): Parsed
   return { key: col.key, fr: 0, fixedPx: isNaN(px) ? 0 : px, minWidth, maxWidth };
 }
 
+function applyFractionalRemainder(
+  widths: Map<Key, number>,
+  columns: ColumnResizeDefinition[],
+  originalWidth: number,
+): void {
+  const flooredWidth = Math.floor(originalWidth);
+  const hasFractionalWidth = originalWidth - flooredWidth > 0;
+  if (!hasFractionalWidth || columns.length === 0) return;
+
+  const lastKey = columns[columns.length - 1].key;
+  if (widths.has(lastKey)) {
+    const tableFractionalWidth = originalWidth.toString().split(".")[1];
+    if (tableFractionalWidth) {
+      const columnWidth = Math.floor(widths.get(lastKey)!).toString();
+      widths.set(lastKey, Number(columnWidth + "." + tableFractionalWidth));
+    }
+  }
+}
+
 /**
  * Distribute `tableWidth` among columns:
- *  1. Fixed-width columns get their declared width (clamped to min/max).
- *  2. Remaining space is distributed among fractional columns proportionally.
+ *  1. Floor tableWidth to integer before column sizing, matching upstream TableUtils.calculateColumnSizes.
+ *  2. Fixed-width columns get their declared width (clamped to min/max).
+ *  3. Remaining space is distributed among fractional columns proportionally with cascading rounding.
+ *  4. Leftover sub-pixel width is added to the last column so widths sum exactly to tableWidth.
  */
 function distributeWidths(columns: ColumnResizeDefinition[], tableWidth: number): Map<Key, number> {
-  const parsed = columns.map((c) => parseColumnDef(c, tableWidth));
+  const originalWidth = tableWidth;
+  const flooredWidth = Math.floor(tableWidth);
+  const availableWidth = Math.max(0, flooredWidth);
+
+  const parsed = columns.map((c) => parseColumnDef(c, availableWidth));
 
   // Pass 1 — allocate fixed columns
   let usedSpace = 0;
@@ -133,23 +158,36 @@ function distributeWidths(columns: ColumnResizeDefinition[], tableWidth: number)
     }
   }
 
-  const remainingSpace = Math.max(0, tableWidth - usedSpace);
+  const remainingSpace = Math.max(0, availableWidth - usedSpace);
   const perFr = totalFr > 0 ? remainingSpace / totalFr : 0;
 
-  // Pass 2 — build map
+  // Pass 2 — build map with cascading rounding
   const widths = new Map<Key, number>();
+  let fpTotal = 0;
+  let intTotal = 0;
+
   for (const p of parsed) {
-    let w: number;
+    let targetSize: number;
     if (p.fr > 0) {
-      w = p.fr * perFr;
+      targetSize = p.fr * perFr;
     } else {
-      w = p.fixedPx;
+      targetSize = p.fixedPx;
     }
     // Clamp
-    w = Math.max(p.minWidth, Math.min(p.maxWidth, w));
-    widths.set(p.key, Math.round(w));
+    targetSize = Math.max(p.minWidth, Math.min(p.maxWidth, targetSize));
+
+    // Cascade rounding to ensure sum of integers matches availableWidth
+    const rounded = Math.round(targetSize + fpTotal) - intTotal;
+    fpTotal += targetSize;
+    intTotal += rounded;
+
+    widths.set(p.key, rounded);
   }
 
+  // Give the leftover sub-pixel width to the last column so the columns sum
+  // exactly to the (possibly fractional) available width.
+  applyFractionalRemainder(widths, columns, originalWidth);
+
   return widths;
 }
 
@@ -186,6 +224,7 @@ export function createTableColumnResizeState(
         merged.set(key, width);
       }
     }
+    applyFractionalRemainder(merged, getProps().columns, getProps().tableWidth);
     return merged;
   });
 
@@ -229,7 +268,7 @@ export function createTableColumnResizeState(
   const updateResizedColumns = (key: Key, width: number): Map<Key, number> => {
     const minW = getColumnMinWidth(key);
     const maxW = getColumnMaxWidth(key);
-    const clampedWidth = Math.round(Math.max(minW, Math.min(maxW, width)));
+    const clampedWidth = Math.max(minW, Math.min(maxW, Math.floor(width)));
 
     const newOverrides = new Map(overrides());
     newOverrides.set(key, clampedWidth);
@@ -243,6 +282,7 @@ export function createTableColumnResizeState(
         merged.set(k, w);
       }
     }
+    applyFractionalRemainder(merged, getProps().columns, getProps().tableWidth);
     return merged;
   };
 

package/src/table/createTableState.ts

@@ -18,7 +18,7 @@
  */
 
 import { createMemo } from "solid-js";
-import type { Accessor } from "solid-js";
+import { propsAccessor, type MaybeAccessor } from "../utils";
 import { createGridState } from "../grid/createGridState";
 import type { Key } from "../collections/types";
 import type {
@@ -41,8 +41,8 @@ const OPPOSITE_SORT_DIRECTION: Record<SortDirection, SortDirection> = {
 export function createTableState<
   T extends object,
   C extends TableCollection<T> = TableCollection<T>,
->(options: Accessor<TableStateOptions<T, C>>): TableState<T, C> {
-  const getOptions = () => options();
+>(options: MaybeAccessor<TableStateOptions<T, C>>): TableState<T, C> {
+  const getOptions = propsAccessor(options);
 
   // Create the underlying grid state
   const gridState = createGridState<T, C>(() => ({
@@ -103,7 +103,8 @@ export function createTableState<
       return gridState.disabledBehavior;
     },
     get isKeyboardNavigationDisabled() {
-      return gridState.isKeyboardNavigationDisabled;
+      // An empty body keeps navigation disabled after the flag is cleared.
+      return getOptions().collection.size === 0 || gridState.isKeyboardNavigationDisabled;
     },
     get focusedKey() {
       return gridState.focusedKey;

package/src/table/createTreeGridState.ts

@@ -21,8 +21,7 @@
  */
 
 import { createMemo } from "solid-js";
-import type { Accessor } from "solid-js";
-import { createInternalSignal } from "../utils";
+import { createInternalSignal, propsAccessor, type MaybeAccessor } from "../utils";
 
 import { createTableState } from "./createTableState";
 import { createTableCollection, TableCollection } from "./TableCollection";
@@ -36,8 +35,8 @@ import type { TreeGridState, TreeGridStateOptions } from "./types";
 export function createTreeGridState<
   T extends object,
   C extends TableCollection<T> = TableCollection<T>,
->(options: Accessor<TreeGridStateOptions<T, C>>): TreeGridState<T, C> {
-  const getOptions = () => options();
+>(options: MaybeAccessor<TreeGridStateOptions<T, C>>): TreeGridState<T, C> {
+  const getOptions = propsAccessor(options);
 
   // Expanded keys: controlled via `UNSTABLE_expandedKeys`, otherwise the internal signal
   // seeded from `UNSTABLE_defaultExpandedKeys`.

package/src/table/types.ts

@@ -138,8 +138,8 @@ export interface TreeGridStateOptions<
 > extends Omit<TableStateOptions<T, C>, "collection"> {
   /** Column definitions. */
   columns: ColumnDefinition<T>[];
-  /** Row definitions (may contain `childRows` for nested rows). */
-  rows: RowDefinition<T>[];
+  /** Row definitions (may contain `childRows`) or raw data items keyed by `getKey`. */
+  rows: RowDefinition<T>[] | T[];
   /** Function to get the key from a data item. */
   getKey?: (item: T) => Key;
   /** Function to get the text value from a data item. */

package/src/tabs/createTabListState.ts

@@ -17,9 +17,9 @@
  * Ported from packages/react-stately/src/tabs/useTabListState.ts.
  */
 
-import { createEffect, createMemo, onCleanup } from "solid-js";
+import { createEffect, createMemo } from "solid-js";
 import type { Accessor } from "solid-js";
-import { createInternalSignal, access, type MaybeAccessor } from "../utils";
+import { createInternalSignal, propsAccessor, type MaybeAccessor } from "../utils";
 import { ListCollection } from "../collections/ListCollection";
 import type {
   Collection,
@@ -94,7 +94,7 @@ export interface TabListState<T = unknown> {
 export function createTabListState<T = unknown>(
   props: MaybeAccessor<TabListStateProps<T>>,
 ): TabListState<T> {
-  const getProps = () => access(props);
+  const getProps = propsAccessor(props);
 
   const collection: Accessor<Collection<T>> = createMemo(() => {
     const p = getProps();
@@ -226,42 +226,19 @@ export function createTabListState<T = unknown>(
     setChildFocusStrategy(childStrategy ?? null);
   };
 
-  // If the tab list doesn't have focus and the selected key changes, or if there
-  // isn't a focused key yet, move the focused key to the selected key so the
-  // roving tabIndex stays on the selected tab. Predicate matches useTabListState.
-  // RAC writes in useEffect (after paint). A tracking-phase write would copy
-  // inside setSelectedKey, so D4 capture of pointerup/click would already see
-  // tabindex 0. Subscribe in compute; write on the next animation frame in apply.
+  // Match useTabListState's passive effect without adding a frame delay. Mouse
+  // press-start selection must update the roving target before native focusin;
+  // touch selects on press-up, so its earlier focusin retains the old tabindex.
   let lastSelectedKey: Key | null = selectedKey();
-  let selectedToFocusedFrame: number | null = null;
-  const copySelectedToFocusedKey = () => {
-    selectedToFocusedFrame = null;
-    const sel = selectedKey();
-    if ((sel !== null && focusedKey() === null) || (!isFocused() && sel !== lastSelectedKey)) {
-      setFocusedKey(sel);
-    }
-    lastSelectedKey = sel;
-  };
   createEffect(
     () => ({ sel: selectedKey(), foc: focusedKey(), focused: isFocused() }),
     ({ sel, foc, focused }) => {
-      if (sel !== null && foc === null) {
+      if ((sel !== null && foc === null) || (!focused && sel !== lastSelectedKey)) {
         setFocusedKey(sel);
-        lastSelectedKey = sel;
-        return;
-      }
-
-      if (!focused && sel !== lastSelectedKey) {
-        if (selectedToFocusedFrame != null) return;
-        selectedToFocusedFrame = requestAnimationFrame(copySelectedToFocusedKey);
       }
+      lastSelectedKey = sel;
     },
   );
-  onCleanup(() => {
-    if (selectedToFocusedFrame == null) return;
-    cancelAnimationFrame(selectedToFocusedFrame);
-    selectedToFocusedFrame = null;
-  });
 
   // Keep uncontrolled selection valid as items/disabled keys change.
   createEffect(