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

package/src/tokenfield/TokenFieldValue.ts

@@ -0,0 +1,499 @@
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/tokenfield/TokenFieldValue.ts
+
+export type TokenFieldSegment<T = any> = TextSegment | TokenSegment<T>;
+
+export interface TextSegment {
+  type: "text";
+  text: string;
+}
+
+export interface TokenSegment<T = any> {
+  type: "token";
+  text: string;
+  /** An arbitrary value associated with the token. */
+  value?: T;
+}
+
+export interface Position {
+  /** Index of the segment in the list. */
+  index: number;
+  /** Text offset within the segment in UTF-16 code units. */
+  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 {
+  selectedRange?: SelectedRange | null;
+}
+
+/**
+ * A list of segments containing editable text and non-editable tokens.
+ */
+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 selected range. */
+  selectedRange: SelectedRange;
+  // Linked list representing the undo/redo history.
+  private previous: this | null = null;
+  private next: this | null = null;
+  private isCoalescing = true;
+
+  /** Create a new list with the given segments. */
+  constructor(tokens: readonly TokenFieldSegment<T>[], options?: TokenFieldValueOptions) {
+    this.segments = tokens;
+    this.selectedRange = options?.selectedRange ?? new SelectedRange({ index: 0, offset: 0 });
+  }
+
+  get caretPosition(): Position {
+    return this.selectedRange.current;
+  }
+
+  protected createFieldValue(segments: readonly TokenFieldSegment<T>[]): this {
+    const Constructor = this.constructor as new (
+      segments: readonly TokenFieldSegment<T>[],
+      options?: TokenFieldValueOptions,
+    ) => this;
+    return new Constructor(segments);
+  }
+
+  /** 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.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,
+  ): [TokenFieldSegment | null, TokenFieldSegment | null] {
+    if (!segment) {
+      let empty = this.createTextSegment("");
+      return [offset > 0 ? empty : null, offset > 0 ? null : empty];
+    }
+
+    if (segment.type === "token") {
+      return [offset > 0 ? { ...segment } : null, offset > 0 ? null : { ...segment }];
+    }
+
+    return [
+      offset > 0 ? { type: "text", text: segment.text.slice(0, offset) } : null,
+      offset < segment.text.length ? this.createTextSegment(segment.text.slice(offset)) : null,
+    ];
+  }
+
+  private createTextSegment(text: string): TextSegment {
+    return { type: "text", text };
+  }
+
+  protected tokenize(text: string): TokenFieldSegment<T>[] {
+    return [this.createTextSegment(text)];
+  }
+
+  private clampPosition(position: Position): Position {
+    if (this.segments.length > 0 && position.index >= this.segments.length) {
+      return {
+        index: this.segments.length - 1,
+        offset: this.segments[this.segments.length - 1].text.length,
+      };
+    }
+
+    if (position.index < 0) {
+      return { index: 0, offset: 0 };
+    }
+    return position;
+  }
+
+  /** Replace the text between two positions with new text. */
+  replaceRange(start: Position, end: Position, text: string, coalesce = true): this {
+    return this.replaceRangeWithSegments(
+      start,
+      end,
+      text.length > 0 ? [this.createTextSegment(text)] : [],
+      coalesce,
+    );
+  }
+
+  /** Replace the text between two positions with new segments. */
+  replaceRangeWithSegments(
+    start: Position,
+    end: Position,
+    insert: TokenFieldSegment<T>[],
+    coalesce = true,
+  ): this {
+    start = this.clampPosition(start);
+    end = this.clampPosition(end);
+    let startSegment = this.segments[start.index];
+    let endSegment = this.segments[end.index];
+    let [startSplit] = this.splitSegment(startSegment, start.offset);
+    let [, endSplit] = this.splitSegment(endSegment, end.offset);
+
+    let newSegments = this.segments.slice(0, start.index);
+    if (startSplit) {
+      appendSegments(newSegments, [startSplit]);
+    }
+
+    if (insert.length) {
+      appendSegments(newSegments, insert, (text) => this.tokenize(text));
+    }
+
+    let lastSegment = newSegments[newSegments.length - 1];
+    let lastIsText = lastSegment && lastSegment.type === "text";
+    let caret = {
+      index: lastIsText ? newSegments.length - 1 : newSegments.length,
+      offset: lastIsText ? lastSegment.text.length : 0,
+    };
+
+    if (endSplit) {
+      appendSegments(newSegments, [endSplit]);
+    }
+
+    appendSegments(newSegments, this.segments.slice(end.index + 1));
+
+    let segments = this.createFieldValue(newSegments);
+    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.selectedRange = new SelectedRange(start, end);
+      this.next = segments;
+    }
+    return segments;
+  }
+
+  /** Find the boundary before or after a position using an Intl.Segmenter. */
+  findBoundaryWithSegmenter(
+    position: Position,
+    segmenter: Intl.Segmenter,
+    direction: Direction,
+  ): Position | null {
+    position = this.clampPosition(position);
+    for (let i = position.index; i >= 0 && i < this.segments.length; i += direction) {
+      let segment = this.segments[i];
+      switch (segment.type) {
+        case "token":
+          if (
+            i !== position.index ||
+            (direction === Direction.Backward ? position.offset > 0 : position.offset === 0)
+          ) {
+            let index = i + direction;
+            return {
+              index: index >= 0 ? index : 0,
+              offset:
+                direction === Direction.Backward && index >= 0
+                  ? this.segments[index].text.length
+                  : 0,
+            };
+          }
+          continue;
+        case "text": {
+          let offset = direction === Direction.Backward ? segment.text.length : 0;
+          if (i === position.index) {
+            offset = position.offset;
+          }
+          if (direction === Direction.Backward) {
+            offset--;
+          }
+          if (offset < 0 || offset >= segment.text.length) {
+            continue;
+          }
+
+          let part = segmenter.segment(segment.text).containing(offset);
+          while (part && part.isWordLike === false) {
+            offset += direction;
+            part = segmenter.segment(segment.text).containing(offset);
+          }
+
+          if (part) {
+            return {
+              index: i,
+              offset:
+                direction === Direction.Backward ? part.index : part.index + part.segment.length,
+            };
+          }
+          continue;
+        }
+      }
+    }
+
+    return null;
+  }
+
+  /** Find a line boundary before or after a position. */
+  findLineBoundary(position: Position, direction: Direction): Position | null {
+    let res = this.findText(position, direction, "\n");
+    if (res) {
+      return res;
+    }
+    return direction === Direction.Backward
+      ? { index: 0, offset: 0 }
+      : {
+          index: this.segments.length - 1,
+          offset: this.segments[this.segments.length - 1].text.length,
+        };
+  }
+
+  /** Find a string or regular expression match before or after a position. */
+  findText(position: Position, direction: Direction, search: string | RegExp): Position | null {
+    if (this.segments.length === 0) {
+      return null;
+    }
+
+    for (let i = position.index; i >= 0 && i < this.segments.length; i += direction) {
+      let segment = this.segments[i];
+      if (segment.type !== "text") {
+        continue;
+      }
+      let offset = findInText(
+        segment.text,
+        search,
+        direction,
+        i === position.index ? position.offset : undefined,
+      );
+      if (offset >= 0) {
+        return {
+          index: i,
+          offset: offset,
+        };
+      }
+    }
+
+    return null;
+  }
+
+  /** Delete text at a position using a segmenter. */
+  delete(
+    position: Position,
+    segmenter: Intl.Segmenter,
+    direction: Direction,
+    coalesce = true,
+  ): this {
+    let boundary = this.findBoundaryWithSegmenter(position, segmenter, direction);
+    if (boundary) {
+      return this.replaceRange(
+        direction === Direction.Backward ? boundary : position,
+        direction === Direction.Backward ? position : boundary,
+        "",
+        coalesce,
+      );
+    }
+
+    return this.withSelectedRange(new SelectedRange(position));
+  }
+
+  /** Delete text to the next or previous line break. */
+  deleteLine(position: Position, direction: Direction, coalesce = true): this {
+    if (this.segments.length === 0) {
+      return this;
+    }
+
+    let boundary = this.findLineBoundary(position, direction);
+    if (boundary) {
+      return this.replaceRange(
+        direction === Direction.Backward ? boundary : position,
+        direction === Direction.Backward ? position : boundary,
+        "",
+        coalesce,
+      );
+    }
+
+    return this.withSelectedRange(new SelectedRange(position));
+  }
+
+  /** Create a new list containing a subset of the segments. */
+  slice(start: Position, end: Position): this {
+    start = this.clampPosition(start);
+    end = this.clampPosition(end);
+    if (start.index === end.index && start.offset === end.offset) {
+      return this.createFieldValue([]);
+    }
+    if (start.index === end.index) {
+      let segment = this.segments[start.index];
+      if (segment.type === "text") {
+        return this.createFieldValue([
+          { type: "text", text: segment.text.slice(start.offset, end.offset) },
+        ]);
+      }
+      return this.createFieldValue([segment]);
+    }
+    let startSegment = this.segments[start.index];
+    let endSegment = this.segments[end.index];
+    let [, startSplit] = this.splitSegment(startSegment, start.offset);
+    let [endSplit] = this.splitSegment(endSegment, end.offset);
+
+    let result: TokenFieldSegment<T>[] = [];
+    if (startSplit) {
+      result.push(startSplit);
+    }
+    result.push(...this.segments.slice(start.index + 1, end.index));
+    if (endSplit) {
+      result.push(endSplit);
+    }
+    return this.createFieldValue(result);
+  }
+
+  /** Convert the list to a string. */
+  toString(): string {
+    return this.segments.map((seg) => seg.text).join("");
+  }
+
+  /** Returns the previous list in the undo history. */
+  undo(): this {
+    return this.previous ?? this;
+  }
+
+  /** Returns the next list in the redo history. */
+  redo(): this {
+    return this.next ?? this;
+  }
+
+  /** End coalescing undo/redo history. */
+  endCoalescing(): void {
+    this.isCoalescing = false;
+  }
+}
+
+function findInText(
+  text: string,
+  search: string | RegExp,
+  direction: Direction,
+  fromOffset?: number,
+): number {
+  if (typeof search === "string") {
+    if (direction === Direction.Backward) {
+      return text.lastIndexOf(search, fromOffset !== undefined ? fromOffset - 1 : text.length - 1);
+    }
+    return text.indexOf(search, fromOffset ?? 0);
+  }
+
+  if (direction === Direction.Forward) {
+    let start = fromOffset ?? 0;
+    let index = text.slice(start).search(search);
+    return index >= 0 ? start + index : -1;
+  }
+
+  let limit = fromOffset !== undefined ? fromOffset : text.length;
+  if (limit < 0) {
+    return -1;
+  }
+
+  let re = search.flags.includes("g") ? search : new RegExp(search.source, search.flags + "g");
+  let matches = Array.from(text.slice(0, limit).matchAll(re));
+  return matches.at(-1)?.index ?? -1;
+}
+
+function appendSegments(
+  segments: TokenFieldSegment[],
+  insert: TokenFieldSegment[],
+  tokenize?: (text: string) => TokenFieldSegment[],
+): TokenFieldSegment[] {
+  for (let segment of insert) {
+    if (segment.type === "text" && segment.text.length === 0) {
+      continue;
+    }
+
+    let last = segments[segments.length - 1];
+    if (last && last.type === "text" && segment.type === "text") {
+      if (tokenize) {
+        let tokenized = tokenize(last.text + segment.text);
+        segments.splice(segments.length - 1, 1, ...tokenized);
+      } else {
+        segments[segments.length - 1] = { type: "text", text: last.text + segment.text };
+      }
+    } else if (tokenize && segment.type === "text") {
+      let tokenized = tokenize(segment.text);
+      segments.push(...tokenized);
+    } else {
+      segments.push(segment);
+    }
+  }
+  return segments;
+}

package/src/tokenfield/createTokenFieldState.ts

@@ -0,0 +1,88 @@
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/tokenfield/useTokenFieldState.ts
+
+/**
+ * Token field state for Solid Stately.
+ *
+ * Tracks the field value and composition state. Port of
+ * @react-stately/tokenfield useTokenFieldState.
+ */
+
+import type { Accessor } from "solid-js";
+import { createInternalSignal, type MaybeAccessor, access } from "../utils";
+import { TokenFieldValue } from "./TokenFieldValue";
+
+export interface TokenFieldStateOptions<T extends TokenFieldValue = TokenFieldValue> {
+  /** The current value (controlled). */
+  value?: T;
+  /** The default value (uncontrolled). */
+  defaultValue?: T;
+  /** Handler that is called when the value changes. */
+  onChange?: (value: T) => void;
+}
+
+export interface TokenFieldState<T extends TokenFieldValue = TokenFieldValue> {
+  /** The current value of the token field. */
+  readonly value: Accessor<T>;
+  /** Sets the value of the token field. */
+  setValue: (fn: T | ((value: T) => T)) => void;
+  /** Whether the token field is composing. */
+  readonly isComposing: Accessor<boolean>;
+  /** Sets the composing state of the token field. */
+  setComposing: (isComposing: boolean) => void;
+}
+
+/**
+ * Provides state management for a token field. Tracks the field value and the
+ * composition state.
+ */
+export function createTokenFieldState<T extends TokenFieldValue = TokenFieldValue>(
+  props: MaybeAccessor<TokenFieldStateOptions<T>> = {},
+): TokenFieldState<T> {
+  const getProps = () => access(props);
+
+  const initialProps = getProps();
+  const initialValue = (initialProps.value ??
+    initialProps.defaultValue ??
+    new TokenFieldValue([])) as T;
+
+  const [internalValue, setInternalValue] = createInternalSignal(initialValue);
+  const [isComposing, setComposing] = createInternalSignal(false);
+
+  const isControlled = () => getProps().value !== undefined;
+
+  const value: Accessor<T> = () => {
+    const p = getProps();
+    return isControlled() ? ((p.value ?? initialValue) as T) : internalValue();
+  };
+
+  function setValue(fn: T | ((current: T) => T)): void {
+    const p = getProps();
+    const current = value();
+    const next = typeof fn === "function" ? (fn as (current: T) => T)(current) : fn;
+
+    if (!isControlled()) {
+      setInternalValue(() => next);
+    }
+
+    p.onChange?.(next);
+  }
+
+  return {
+    value,
+    setValue,
+    isComposing,
+    setComposing,
+  };
+}

package/src/tokenfield/index.ts

@@ -0,0 +1,15 @@
+export {
+  TokenFieldValue,
+  type TokenFieldSegment,
+  type TextSegment,
+  type TokenSegment,
+  type Position,
+  type SelectedRange,
+  type TokenFieldValueOptions,
+} from "./TokenFieldValue";
+
+export {
+  createTokenFieldState,
+  type TokenFieldStateOptions,
+  type TokenFieldState,
+} from "./createTokenFieldState";