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

package/src/combobox/index.ts

@@ -7,6 +7,10 @@ export {
   defaultContainsFilter,
   type ComboBoxState,
   type ComboBoxStateProps,
+  type ComboBoxValidationValue,
+  type ComboBoxSelectionMode,
+  type ComboBoxValueType,
+  type ComboBoxChangeValueType,
   type FilterFn,
   type MenuTriggerAction,
   type FocusStrategy,

package/src/data/createAsyncList.ts

@@ -340,8 +340,14 @@ export function createAsyncList<T, C = string>(options: AsyncListOptions<T, C>):
 
     insertBefore(key: Key, ...values: T[]) {
       setState((s) => {
-        const index = s.items.findIndex((item) => getKey(item) === key);
-        if (index === -1) return s;
+        let index = s.items.findIndex((item) => getKey(item) === key);
+        if (index === -1) {
+          if (s.items.length === 0) {
+            index = 0;
+          } else {
+            return s;
+          }
+        }
         return {
           ...s,
           items: [...s.items.slice(0, index), ...values, ...s.items.slice(index)],
@@ -351,8 +357,14 @@ export function createAsyncList<T, C = string>(options: AsyncListOptions<T, C>):
 
     insertAfter(key: Key, ...values: T[]) {
       setState((s) => {
-        const index = s.items.findIndex((item) => getKey(item) === key);
-        if (index === -1) return s;
+        let index = s.items.findIndex((item) => getKey(item) === key);
+        if (index === -1) {
+          if (s.items.length === 0) {
+            index = 0;
+          } else {
+            return s;
+          }
+        }
         return {
           ...s,
           items: [...s.items.slice(0, index + 1), ...values, ...s.items.slice(index + 1)],
@@ -380,6 +392,9 @@ export function createAsyncList<T, C = string>(options: AsyncListOptions<T, C>):
           }
           selectedKeys = newSelection;
         }
+        if (s.cursor == null && items.length === 0) {
+          selectedKeys = new Set();
+        }
         return { ...s, items, selectedKeys };
       });
     },

package/src/data/createListData.ts

@@ -165,8 +165,14 @@ export function createListData<T>(options: ListOptions<T>): ListData<T> {
 
     insertBefore(key: Key, ...values: T[]) {
       setState((s) => {
-        const index = s.items.findIndex((item) => getKey(item) === key);
-        if (index === -1) return s;
+        let index = s.items.findIndex((item) => getKey(item) === key);
+        if (index === -1) {
+          if (s.items.length === 0) {
+            index = 0;
+          } else {
+            return s;
+          }
+        }
         return insertItems(s, index, ...values);
       });
     },

package/src/data/createTreeData.ts

@@ -345,6 +345,11 @@ export function createTreeData<T>(options: TreeOptions<T>): TreeData<T> {
     },
 
     remove(...keys: Key[]) {
+      if (keys.length === 0) {
+        return;
+      }
+
+      let nextMap: Map<Key, TreeNode<T>> | undefined;
       setTreeState((state) => {
         let { items, nodeMap } = state;
         let newMap = new Map(nodeMap);
@@ -356,14 +361,17 @@ export function createTreeData<T>(options: TreeOptions<T>): TreeData<T> {
           newMap = result.nodeMap;
         }
 
+        nextMap = newMap;
         return { items: newItems, nodeMap: newMap };
       });
 
       setSelectedKeys((sel) => {
-        if (sel === "all") return sel;
+        if (sel === "all" || !nextMap) return sel;
         const newSel = new Set(sel);
-        for (const key of keys) {
-          newSel.delete(key);
+        for (const key of sel) {
+          if (!nextMap.has(key)) {
+            newSel.delete(key);
+          }
         }
         return newSel;
       });

package/src/dnd/createDraggableCollectionState.ts

@@ -36,14 +36,16 @@ type DragKey = string | number;
 
 export interface DraggableCollectionNode {
   parentKey?: DragKey | null;
+  textValue?: string;
 }
 
 export interface DraggableCollectionLike {
   getItem(key: DragKey): DraggableCollectionNode | null | undefined;
   getKeys?(): Iterable<DragKey>;
+  getTextValue?(key: DragKey): string;
 }
 
-export interface DraggableCollectionStateOptions<T = object> {
+export interface DraggableCollectionStateOptions<_T = object> {
   /** A function that returns the items being dragged. */
   getItems: (keys: Set<DragKey>) => DragItem[];
   /** Function that returns the allowed drop operations. */
@@ -95,6 +97,8 @@ export interface DraggableCollectionState {
   getKeysForDrag(key: DragKey): Set<DragKey>;
   /** Returns whether `key` is selected. */
   isSelected(key: DragKey): boolean;
+  /** Collection passed to the drag. Item text is read from here. */
+  readonly collection?: DraggableCollectionLike;
 }
 
 function selectedKeySet(
@@ -281,5 +285,8 @@ export function createDraggableCollectionState<T = object>(
       const selected = selectedKeySet(p.selectedKeys, p.collection);
       return selected === "all" ? true : selected.has(key);
     },
+    get collection() {
+      return getProps().collection;
+    },
   };
 }

package/src/dnd/createDroppableCollectionState.ts

@@ -147,6 +147,12 @@ export interface DroppableCollectionState {
    * level boolean on this port.
    */
   isDropTargetFor(target: DropTarget | null): boolean;
+  /**
+   * The host collection from the options. RAC always has one
+   * (`useDroppableCollectionState.ts:46-48`); this port's option is optional,
+   * so the field is undefined when the host omits it.
+   */
+  readonly collection: DroppableCollectionLike | undefined;
 }
 
 /**
@@ -525,6 +531,10 @@ export function createDroppableCollectionState(
     getDropOperation,
     shouldAcceptItemDrop,
     isDropTargetFor,
+    // RAC `useDroppableCollectionState.ts:175-176`.
+    get collection() {
+      return getProps().collection;
+    },
   };
 }
 

package/src/form/createFormValidationState.ts

@@ -21,7 +21,7 @@
  * Port of react-stately's useFormValidationState.
  */
 
-import { createContext, createEffect, createMemo } from "solid-js";
+import { createContext, createEffect, createMemo, untrack } from "solid-js";
 import type { Accessor } from "solid-js";
 import { createInternalSignal, useContextOptional } from "../utils";
 
@@ -121,6 +121,18 @@ export const DEFAULT_VALIDATION_RESULT: ValidationResult = {
 /** Context for server-side validation errors. */
 export const FormValidationContext = createContext<ValidationErrors>({});
 
+// Form publishes one proxy so field setup does not freeze the first map.
+// The symbol reads the current validationErrors object. A new object resets
+// the clear flag, matching the pin's context identity check.
+const validationErrorsSource = Symbol.for("proyecto-viviana.validationErrorsSource");
+
+function validationErrorsIdentity(errors: ValidationErrors): ValidationErrors {
+  const source = (errors as ValidationErrors & Record<symbol, ValidationErrors | undefined>)[
+    validationErrorsSource
+  ];
+  return source ?? errors;
+}
+
 /** Private prop key for passing validation state to children. */
 export const privateValidationStateProp = "__formValidationState" + Date.now();
 
@@ -240,12 +252,14 @@ export function createFormValidationState<T>(props: FormValidationProps<T>): For
     return [];
   });
 
-  // Track server errors clearing
-  const [lastServerErrors, setLastServerErrors] = createInternalSignal(serverErrors);
+  // Track server errors clearing. Compare the map object, not the proxy.
+  const [lastServerErrors, setLastServerErrors] = createInternalSignal(
+    validationErrorsIdentity(serverErrors),
+  );
   const [isServerErrorCleared, setServerErrorCleared] = createInternalSignal(false);
 
   createEffect(
-    () => ({ errors: serverErrors, last: lastServerErrors() }),
+    () => ({ errors: validationErrorsIdentity(serverErrors), last: lastServerErrors() }),
     ({ errors, last }) => {
       if (errors !== last) {
         setLastServerErrors(errors);
@@ -310,7 +324,11 @@ export function createFormValidationState<T>(props: FormValidationProps<T>): For
     displayValidation,
     updateValidation(value: ValidationResult) {
       // If validationBehavior is 'aria', update in realtime. Otherwise, store until commit.
-      if (validationBehavior() === "aria" && !isEqualValidation(currentValidity(), value)) {
+      // An imperative write: it reads the behavior and validity as they stand.
+      if (
+        untrack(validationBehavior) === "aria" &&
+        !isEqualValidation(untrack(currentValidity), value)
+      ) {
         setCurrentValidity(value);
       } else {
         nextValidation = value;

package/src/grid/createGridState.ts

@@ -4,19 +4,18 @@
  */
 
 import { createEffect, createMemo } from "solid-js";
-import type { Accessor } from "solid-js";
 import type { GridState, GridStateOptions, GridCollection, GridNode } from "./types";
 import type { Key, FocusStrategy, SelectionBehavior, Selection } from "../collections/types";
-import { createInternalSignal } from "../utils";
+import { createInternalSignal, propsAccessor, type MaybeAccessor } from "../utils";
 
 /**
  * Creates state management for a grid component.
  * Handles row selection, focus management, and keyboard navigation state.
  */
 export function createGridState<T extends object, C extends GridCollection<T> = GridCollection<T>>(
-  options: Accessor<GridStateOptions<T, C>>,
+  options: MaybeAccessor<GridStateOptions<T, C>>,
 ): GridState<T, C> {
-  const getOptions = () => options();
+  const getOptions = propsAccessor(options);
 
   const disabledKeys = createMemo(() => {
     const keys = getOptions().disabledKeys;
@@ -53,18 +52,26 @@ export function createGridState<T extends object, C extends GridCollection<T> =
 
   const focusMode = createMemo(() => getOptions().focusMode ?? "row");
 
+  let lastSelectionBehavior = selectionBehaviorProp();
   createEffect(selectionBehaviorProp, (behavior) => {
-    setSelectionBehaviorState(behavior);
+    if (behavior !== lastSelectionBehavior) {
+      setSelectionBehaviorState(behavior);
+      lastSelectionBehavior = behavior;
+    }
   });
 
   createEffect(
     () => ({
       prop: selectionBehaviorProp(),
-      state: selectionBehaviorState(),
       keys: selectedKeys(),
     }),
-    ({ prop, state, keys }) => {
-      if (prop === "replace" && state === "toggle" && keys !== "all" && keys.size === 0) {
+    ({ prop, keys }) => {
+      if (
+        prop === "replace" &&
+        selectionBehaviorState() === "toggle" &&
+        keys !== "all" &&
+        keys.size === 0
+      ) {
         setSelectionBehaviorState("replace");
       }
     },

package/src/index.ts

@@ -24,6 +24,7 @@ export {
   type TextSegment,
   type TokenSegment,
   type Position,
+  type SelectedRange,
   type TokenFieldValueOptions,
 } from "./tokenfield";
 
@@ -77,12 +78,16 @@ export {
   type SingleSelectListState,
   createMenuState,
   createMenuTriggerState,
+  createSubmenuTriggerState,
   type MenuStateProps,
   type MenuState,
   type MenuTriggerType,
   type MenuTriggerProps,
   type MenuTriggerStateProps,
   type MenuTriggerState,
+  type RootMenuTriggerState,
+  type SubmenuTriggerProps,
+  type SubmenuTriggerState,
 } from "./collections";
 
 // Selection (module-compat aliases)
@@ -96,7 +101,7 @@ export {
 } from "./selection";
 
 // Menu (module-compat aliases)
-export { useMenuTriggerState } from "./menu";
+export { useMenuTriggerState, useSubmenuTriggerState } from "./menu";
 
 // Datepicker (module-compat aliases)
 export {
@@ -111,13 +116,24 @@ export {
   type SegmentType,
 } from "./datepicker";
 
-export { createSelectState, type SelectStateProps, type SelectState } from "./select";
+export {
+  createSelectState,
+  type SelectStateProps,
+  type SelectState,
+  type SelectSelectionMode,
+  type SelectValueType,
+  type SelectChangeValueType,
+} from "./select";
 
 export {
   createComboBoxState,
   defaultContainsFilter,
   type ComboBoxState,
   type ComboBoxStateProps,
+  type ComboBoxValidationValue,
+  type ComboBoxSelectionMode,
+  type ComboBoxValueType,
+  type ComboBoxChangeValueType,
   type FilterFn,
   type MenuTriggerAction,
 } from "./combobox";

package/src/menu/index.ts

@@ -8,12 +8,17 @@
 export {
   createMenuState,
   createMenuTriggerState,
+  createSubmenuTriggerState,
   type MenuStateProps,
   type MenuState,
   type MenuTriggerType,
   type MenuTriggerProps,
   type MenuTriggerStateProps,
   type MenuTriggerState,
+  type RootMenuTriggerState,
+  type SubmenuTriggerProps,
+  type SubmenuTriggerState,
 } from "../collections/createMenuState";
 
 export { createMenuTriggerState as useMenuTriggerState } from "../collections/createMenuState";
+export { createSubmenuTriggerState as useSubmenuTriggerState } from "../collections/createMenuState";

package/src/numberfield/createNumberFieldState.ts

@@ -74,7 +74,10 @@ export interface NumberFieldStateProps {
 export interface NumberFieldState extends FormValidationState {
   /** The current input value as a string. */
   inputValue: Accessor<string>;
-  /** The current numeric value. */
+  /**
+   * The currently parsed number value, or NaN if the input could not be parsed.
+   * Updated from the input text as the user types.
+   */
   numberValue: Accessor<number>;
   /** Whether the value can be incremented. */
   canIncrement: Accessor<boolean>;
@@ -98,8 +101,8 @@ export interface NumberFieldState extends FormValidationState {
   setInputValue: (value: string) => void;
   /** Validate a partial input value. */
   validate: (value: string) => boolean;
-  /** Commit the current input value. */
-  commit: () => void;
+  /** Commit the current input value, or an override when a paste replaces it. */
+  commit: (value?: string) => void;
   /** Increment the value by step. */
   increment: () => void;
   /** Decrement the value by step. */
@@ -142,13 +145,60 @@ function clamp(value: number, min?: number, max?: number): number {
 }
 
 /**
- * Snaps a value to the nearest step.
+ * Rounds to the decimal precision implied by a step, including exponential steps.
+ */
+function roundToStepPrecision(value: number, step: number): number {
+  let roundedValue = value;
+  let precision = 0;
+  const stepString = step.toString();
+  const eIndex = stepString.toLowerCase().indexOf("e-");
+  if (eIndex > 0) {
+    precision = Math.abs(Math.floor(Math.log10(Math.abs(step)))) + eIndex;
+  } else {
+    const pointIndex = stepString.indexOf(".");
+    if (pointIndex >= 0) {
+      precision = stepString.length - pointIndex;
+    }
+  }
+  if (precision > 0) {
+    const pow = Math.pow(10, precision);
+    roundedValue = Math.round(roundedValue * pow) / pow;
+  }
+  return roundedValue;
+}
+
+/**
+ * Snaps to the nearest step, then to the last in-range step when that exceeds max.
+ * A negative halfway rounds away from the step base.
  */
-function snapToStep(value: number, step: number, min?: number): number {
-  const base = min ?? 0;
-  const diff = value - base;
-  const steps = Math.round(diff / step);
-  return handleDecimalOperation("+", base, steps * step);
+function snapValueToStep(
+  value: number,
+  min: number | undefined,
+  max: number | undefined,
+  step: number,
+): number {
+  const minNumber = Number(min);
+  const maxNumber = Number(max);
+  const remainder = (value - (isNaN(minNumber) ? 0 : minNumber)) % step;
+  let snappedValue = roundToStepPrecision(
+    Math.abs(remainder) * 2 >= step
+      ? value + Math.sign(remainder) * (step - Math.abs(remainder))
+      : value - remainder,
+    step,
+  );
+
+  if (!isNaN(minNumber)) {
+    if (snappedValue < minNumber) {
+      snappedValue = minNumber;
+    } else if (!isNaN(maxNumber) && snappedValue > maxNumber) {
+      snappedValue =
+        minNumber + Math.floor(roundToStepPrecision((maxNumber - minNumber) / step, step)) * step;
+    }
+  } else if (!isNaN(maxNumber) && snappedValue > maxNumber) {
+    snappedValue = Math.floor(roundToStepPrecision(maxNumber / step, step)) * step;
+  }
+
+  return roundToStepPrecision(snappedValue, step);
 }
 
 function isValidStep(step: number | undefined): step is number {
@@ -213,7 +263,7 @@ export function createNumberFieldState(
     if (isNaN(value)) return NaN;
 
     if (hasCustomStep()) {
-      return clamp(snapToStep(value, step(), p.minValue), p.minValue, p.maxValue);
+      return snapValueToStep(value, p.minValue, p.maxValue, step());
     }
 
     return clamp(value, p.minValue, p.maxValue);
@@ -320,13 +370,13 @@ export function createNumberFieldState(
     setInputValueInternal(value);
   };
 
-  // Commit the current input value
-  const commit = () => {
+  // Commit the current input value, or an override when a paste replaces it.
+  const commit = (override?: string) => {
     ensureInitialized();
     const p = getProps();
-    const input = readNow(inputValue);
+    const input = override === undefined ? readNow(inputValue) : override;
 
-    if (input === "" || input === "-") {
+    if (input === "") {
       // Clear value
       setNumberValue(NaN);
       setInputValueInternal(p.value === undefined ? "" : formatNumber(readNow(actualNumberValue)));
@@ -348,7 +398,8 @@ export function createNumberFieldState(
     parsed = numberParser().parse(formatNumber(parsed));
 
     setNumberValue(parsed);
-    setInputValueInternal(formatNumber(parsed));
+    // A controlled field keeps the current number until its value prop updates.
+    setInputValueInternal(formatNumber(p.value === undefined ? parsed : previous));
 
     p.onChange?.(parsed);
     if (parsed !== previous) {
@@ -367,7 +418,7 @@ export function createNumberFieldState(
 
     if (p.maxValue == null) return true;
     return (
-      snapToStep(current, step(), p.minValue) > current ||
+      snapValueToStep(current, p.minValue, p.maxValue, step()) > current ||
       handleDecimalOperation("+", current, step()) <= p.maxValue
     );
   });
@@ -383,7 +434,7 @@ export function createNumberFieldState(
 
     if (p.minValue == null) return true;
     return (
-      snapToStep(current, step(), p.minValue) < current ||
+      snapValueToStep(current, p.minValue, p.maxValue, step()) < current ||
       handleDecimalOperation("-", current, step()) >= p.minValue
     );
   });
@@ -394,16 +445,31 @@ export function createNumberFieldState(
 
     if (isNaN(parsed)) {
       const base = isNaN(minOrMaxValue) ? 0 : minOrMaxValue;
-      return clamp(snapToStep(base, step(), p.minValue), p.minValue, p.maxValue);
+      return snapValueToStep(base, p.minValue, p.maxValue, step());
     }
 
-    const snapped = snapToStep(parsed, step(), p.minValue);
+    const snapped = snapValueToStep(parsed, p.minValue, p.maxValue, step());
     if ((operation === "+" && snapped > parsed) || (operation === "-" && snapped < parsed)) {
-      return clamp(snapped, p.minValue, p.maxValue);
+      return snapped;
     }
 
-    const next = handleDecimalOperation(operation, parsed, step());
-    return clamp(snapToStep(next, step(), p.minValue), p.minValue, p.maxValue);
+    return snapValueToStep(
+      handleDecimalOperation(operation, parsed, step()),
+      p.minValue,
+      p.maxValue,
+      step(),
+    );
+  };
+
+  // Pin reformats the text when the committed number changes. A controlled
+  // step leaves the text alone until `value` updates, unless the step lands
+  // on that same number and has to replace what the user typed.
+  const commitSteppedNumber = (next: number, refreshWhenUnchanged: boolean) => {
+    const committed = readNow(actualNumberValue);
+    setNumberValue(next);
+    if (getProps().value === undefined || (refreshWhenUnchanged && next === committed)) {
+      setInputValueInternal(formatNumber(next));
+    }
   };
 
   // Increment by step
@@ -414,8 +480,7 @@ export function createNumberFieldState(
     if (p.isDisabled || p.isReadOnly) return;
 
     const current = safeNextStep("+", p.minValue);
-    setNumberValue(current);
-    setInputValueInternal(formatNumber(current));
+    commitSteppedNumber(current, true);
     p.onChange?.(current);
     validation.commitValidation();
   };
@@ -428,8 +493,7 @@ export function createNumberFieldState(
     if (p.isDisabled || p.isReadOnly) return;
 
     const current = safeNextStep("-", p.maxValue);
-    setNumberValue(current);
-    setInputValueInternal(formatNumber(current));
+    commitSteppedNumber(current, true);
     p.onChange?.(current);
     validation.commitValidation();
   };
@@ -443,14 +507,13 @@ export function createNumberFieldState(
 
     if (p.maxValue == null) return;
 
-    const snapped = snapToStep(p.maxValue, step(), p.minValue);
-    setNumberValue(snapped);
-    setInputValueInternal(formatNumber(snapped));
+    const snapped = snapValueToStep(p.maxValue, p.minValue, p.maxValue, step());
+    commitSteppedNumber(snapped, false);
     p.onChange?.(snapped);
     validation.commitValidation();
   };
 
-  // Set to min
+  // Set to min. Pin sets the raw minimum, not a snapped step.
   const decrementToMin = () => {
     ensureInitialized();
     syncControlledValue();
@@ -459,16 +522,14 @@ export function createNumberFieldState(
 
     if (p.minValue == null) return;
 
-    setNumberValue(p.minValue);
-    setInputValueInternal(formatNumber(p.minValue));
+    commitSteppedNumber(p.minValue, false);
     p.onChange?.(p.minValue);
     validation.commitValidation();
   };
 
   const setNumberValuePublic = (value: number) => {
     ensureInitialized();
-    setNumberValue(value);
-    setInputValueInternal(formatNumber(value));
+    commitSteppedNumber(value, false);
     getProps().onChange?.(value);
   };
 
@@ -483,8 +544,9 @@ export function createNumberFieldState(
       syncControlledValue();
       return inputValue;
     },
+    // Parsed text. Form validation reads the committed number separately.
     get numberValue() {
-      return actualNumberValue;
+      return parsedInputValue;
     },
     canIncrement,
     canDecrement,

package/src/radio/createRadioGroupState.ts

@@ -220,7 +220,10 @@ export function createRadioGroupState(props: MaybeAccessor<RadioGroupProps> = {}
   const state: RadioGroupState = {
     name,
     selectedValue,
-    defaultSelectedValue: initialProps.defaultValue ?? null,
+    // useRadioGroupState.ts:125 — a controlled value, including null, is the
+    // reset default. defaultValue applies only while uncontrolled.
+    defaultSelectedValue:
+      initialProps.value !== undefined ? initialProps.value : (initialProps.defaultValue ?? null),
     setSelectedValue,
     lastFocusedValue,
     setLastFocusedValue,