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

package/src/toggle/createToggleState.ts

@@ -20,7 +20,7 @@
  * This is a 1:1 port of @react-stately/toggle's useToggleState.
  */
 
-import { Accessor } from "solid-js";
+import { Accessor, untrack } from "solid-js";
 import { access, createInternalSignal, readNow, type MaybeAccessor } from "../utils";
 
 export interface ToggleStateOptions {
@@ -51,8 +51,9 @@ export interface ToggleState {
 export function createToggleState(props: MaybeAccessor<ToggleStateOptions> = {}): ToggleState {
   const getProps = () => access(props);
 
-  const initialProps = getProps();
-  const initialSelected = initialProps.isSelected ?? initialProps.defaultSelected ?? false;
+  // Seeds the uncontrolled state once, by definition.
+  const initialDefaultSelected = untrack(() => getProps().defaultSelected);
+  const initialSelected = untrack(() => getProps().isSelected) ?? initialDefaultSelected ?? false;
 
   const [internalSelected, setInternalSelected] = createInternalSignal(initialSelected);
 
@@ -88,7 +89,7 @@ export function createToggleState(props: MaybeAccessor<ToggleStateOptions> = {})
 
   return {
     isSelected,
-    defaultSelected: initialProps.defaultSelected ?? initialSelected,
+    defaultSelected: initialDefaultSelected ?? initialSelected,
     setSelected,
     toggle,
   };

package/src/tokenfield/TokenFieldValue.ts

@@ -33,13 +33,66 @@ export interface Position {
   offset: number;
 }
 
+/** Represents a text selection in a TokenField. */
+export class SelectedRange {
+  /** The anchor position. */
+  anchor: Position;
+  /** The current (i.e. caret) position. */
+  current: Position;
+
+  /**
+   * Creates a new selection range. If only a single position is provided, the selection is
+   * collapsed.
+   */
+  constructor(anchor: Position, current: Position = anchor) {
+    this.anchor = anchor;
+    this.current = current;
+  }
+
+  /** Whether the selection is collapsed to a single caret position. */
+  get isCollapsed() {
+    return this.anchor.index === this.current.index && this.anchor.offset === this.current.offset;
+  }
+
+  /** The side of the selection closest to the start of the value. */
+  get start() {
+    return compare(this.anchor, this.current) < 0 ? this.anchor : this.current;
+  }
+
+  /** The side of the selection closest to the end of the value. */
+  get end() {
+    return compare(this.anchor, this.current) < 0 ? this.current : this.anchor;
+  }
+
+  /** Returns whether this selection is equal to another. */
+  isEqual(other: SelectedRange) {
+    if (this === other) {
+      return true;
+    }
+    return (
+      this.anchor.index === other.anchor.index &&
+      this.anchor.offset === other.anchor.offset &&
+      this.current.index === other.current.index &&
+      this.current.offset === other.current.offset
+    );
+  }
+}
+
+function compare(a: Position, b: Position) {
+  if (a.index === b.index) {
+    return a.offset - b.offset;
+  }
+
+  return a.index - b.index;
+}
+
 enum Direction {
   Forward = 1,
   Backward = -1,
 }
 
 export interface TokenFieldValueOptions {
-  caretPosition?: Position | null;
+  selectedRange?: SelectedRange | null;
 }
 
 /**
@@ -47,11 +100,12 @@ export interface TokenFieldValueOptions {
  */
 export class TokenFieldValue<T = any> {
   static readonly Direction = Direction;
+  static readonly SelectedRange = SelectedRange;
 
   /** The text and token segments in the list. */
   readonly segments: readonly TokenFieldSegment<T>[];
-  /** The caret position. */
-  caretPosition: Position = { index: 0, offset: 0 };
+  /** The selected range. */
+  selectedRange: SelectedRange;
   // Linked list representing the undo/redo history.
   private previous: this | null = null;
   private next: this | null = null;
@@ -60,7 +114,11 @@ export class TokenFieldValue<T = any> {
   /** Create a new list with the given segments. */
   constructor(tokens: readonly TokenFieldSegment<T>[], options?: TokenFieldValueOptions) {
     this.segments = tokens;
-    this.caretPosition = options?.caretPosition ?? { index: 0, offset: 0 };
+    this.selectedRange = options?.selectedRange ?? new SelectedRange({ index: 0, offset: 0 });
+  }
+
+  get caretPosition(): Position {
+    return this.selectedRange.current;
   }
 
   protected createFieldValue(segments: readonly TokenFieldSegment<T>[]): this {
@@ -71,23 +129,25 @@ export class TokenFieldValue<T = any> {
     return new Constructor(segments);
   }
 
-  /** Create a new list with the caret position set to the given position. */
-  withCaretPosition(caretPosition: Position): this {
-    if (
-      this.caretPosition.index === caretPosition.index &&
-      this.caretPosition.offset === caretPosition.offset
-    ) {
+  /** Create a new list with the selected range set to the given range. */
+  withSelectedRange(selectedRange: SelectedRange): this {
+    if (this.selectedRange.isEqual(selectedRange)) {
       return this;
     }
 
     let result = this.createFieldValue(this.segments);
-    result.caretPosition = caretPosition;
+    result.selectedRange = selectedRange;
     result.previous = this.previous;
     result.next = this.next;
     result.isCoalescing = this.isCoalescing;
     return result;
   }
 
+  /** Create a new list with the caret position set to the given position. */
+  withCaretPosition(position: Position): this {
+    return this.withSelectedRange(new SelectedRange(position));
+  }
+
   private splitSegment(
     segment: TokenFieldSegment | undefined,
     offset: number,
@@ -176,14 +236,14 @@ export class TokenFieldValue<T = any> {
     appendSegments(newSegments, this.segments.slice(end.index + 1));
 
     let segments = this.createFieldValue(newSegments);
-    segments.caretPosition = caret;
+    segments.selectedRange = new SelectedRange(caret);
     segments.isCoalescing = coalesce;
     if (this.isCoalescing && coalesce && this.previous) {
       segments.previous = this.previous;
       segments.previous.next = segments;
     } else {
       segments.previous = this;
-      this.caretPosition = end;
+      this.selectedRange = new SelectedRange(start, end);
       this.next = segments;
     }
     return segments;
@@ -306,8 +366,7 @@ export class TokenFieldValue<T = any> {
       );
     }
 
-    this.caretPosition = position;
-    return this;
+    return this.withSelectedRange(new SelectedRange(position));
   }
 
   /** Delete text to the next or previous line break. */
@@ -326,7 +385,7 @@ export class TokenFieldValue<T = any> {
       );
     }
 
-    return this;
+    return this.withSelectedRange(new SelectedRange(position));
   }
 
   /** Create a new list containing a subset of the segments. */

package/src/tokenfield/index.ts

@@ -4,6 +4,7 @@ export {
   type TextSegment,
   type TokenSegment,
   type Position,
+  type SelectedRange,
   type TokenFieldValueOptions,
 } from "./TokenFieldValue";
 

package/src/tree/createTreeState.ts

@@ -20,19 +20,18 @@
  */
 
 import { createEffect, createMemo } from "solid-js";
-import type { Accessor } from "solid-js";
 import type { TreeState, TreeStateOptions, TreeCollection } from "./types";
 import type { Key, FocusStrategy, Selection, SelectionBehavior } from "../collections/types";
-import { createInternalSignal } from "../utils";
+import { createInternalSignal, propsAccessor, type MaybeAccessor } from "../utils";
 
 /**
  * Creates state management for a tree component.
  * Handles expansion, selection, focus management, and keyboard navigation state.
  */
 export function createTreeState<T extends object, C extends TreeCollection<T> = TreeCollection<T>>(
-  options: Accessor<TreeStateOptions<T, C>>,
+  options: MaybeAccessor<TreeStateOptions<T, C>>,
 ): TreeState<T, C> {
-  const getOptions = () => options();
+  const getOptions = propsAccessor(options);
 
   // Disabled keys as a Set
   const disabledKeys = createMemo(() => {
@@ -92,18 +91,26 @@ export function createTreeState<T extends object, C extends TreeCollection<T> =
   const disallowEmptySelection = createMemo(() => getOptions().disallowEmptySelection ?? false);
   const disabledBehavior = createMemo(() => getOptions().disabledBehavior ?? "all");
 
+  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/utils/index.ts

@@ -2,6 +2,7 @@ export {
   access,
   createInternalSignal,
   isAccessor,
+  propsAccessor,
   readNow,
   type MaybeAccessor,
   type MaybeAccessorValue,

package/src/utils/reactivity.ts

@@ -36,6 +36,14 @@ export function isAccessor<T>(value: MaybeAccessor<T>): value is Accessor<T> {
   return typeof value === "function";
 }
 
+/**
+ * Resolve a props bag once. Later reads call the accessor directly, so a
+ * function-valued field such as `getKey` is never treated as the bag.
+ */
+export function propsAccessor<T extends object>(props: MaybeAccessor<T>): Accessor<T> {
+  return typeof props === "function" ? props : () => props;
+}
+
 /**
  * Headless state is written from factory setup and from public setters that
  * tests (and some call sites) invoke inside `createRoot` / a component body.

package/dist/flags/flags.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"flags.d.ts","sourceRoot":"","sources":["../../src/flags/flags.ts"],"names":[],"mappings":"AAgBA,gFAAgF;AAChF,wBAAgB,eAAe,IAAI,IAAI,CAEtC;AAED,6DAA6D;AAC7D,wBAAgB,SAAS,IAAI,OAAO,CAEnC"}