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

package/src/combobox/createComboBoxState.ts

@@ -1,3 +1,17 @@
+/*
+ * Copyright 2020 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/combobox/useComboBoxState.ts
+
 /**
  * State management for ComboBox components.
  * Based on @react-stately/combobox useComboBoxState.
@@ -6,10 +20,12 @@
  * either type to filter options or select from a list.
  */
 
-import { createSignal, createMemo, createEffect, untrack, type Accessor } from "solid-js";
-import { access, type MaybeAccessor } from "../utils";
-import { createListState } from "../collections/createListState";
+import { createMemo, createEffect, untrack } from "solid-js";
+import type { Accessor } from "solid-js";
+import { createInternalSignal, access, type MaybeAccessor } from "../utils";
+import { createListState, type ListState } from "../collections/createListState";
 import { createOverlayTriggerState } from "../overlays";
+import { ListCollection } from "../collections/ListCollection";
 import type { Key, CollectionNode, Collection, FocusStrategy } from "../collections/types";
 import type { SelectionManager } from "../selection/SelectionManager";
 
@@ -103,6 +119,8 @@ export interface ComboBoxState<T = unknown> {
   setSelectedKey(key: Key | null): void;
   /** The currently selected keys (multiple mode). */
   readonly selectedKeys: Accessor<Set<Key>>;
+  /** Replace the selected keys (multiple mode). */
+  setSelectedKeys(keys: Set<Key>): void;
   /** The currently selected items (multiple mode). */
   readonly selectedItems: Accessor<CollectionNode<T>[]>;
   /** Remove a selected key (multiple mode). */
@@ -167,17 +185,17 @@ export function createComboBoxState<T = unknown>(
   const isMultiple = () => getProps().selectionMode === "multiple";
 
   // Track focus strategy for list navigation
-  const [focusStrategy, setFocusStrategy] = createSignal<FocusStrategy | null>(null);
+  const [focusStrategy, setFocusStrategy] = createInternalSignal<FocusStrategy | null>(null);
 
   // Track whether we're showing all items (vs filtered)
-  const [showAllItems, setShowAllItems] = createSignal(false);
+  const [showAllItems, setShowAllItems] = createInternalSignal(false);
 
   // Track the menu open trigger
   let menuOpenTrigger: MenuTriggerAction = "focus";
 
   // ---- Multi-select State ----
   const isMultiSelectionControlled = () => getProps().selectedKeys !== undefined;
-  const [internalSelectedKeys, setInternalSelectedKeys] = createSignal<Set<Key>>(
+  const [internalSelectedKeys, setInternalSelectedKeys] = createInternalSignal<Set<Key>>(
     new Set(getProps().defaultSelectedKeys ?? []),
   );
 
@@ -197,7 +215,7 @@ export function createComboBoxState<T = unknown>(
   // ---- Selection State (single mode) ----
   // Note: Selection state is initialized first because input value may depend on it
   const isSelectionControlled = () => getProps().selectedKey !== undefined;
-  const [internalSelectedKey, setInternalSelectedKey] = createSignal<Key | null>(
+  const [internalSelectedKey, setInternalSelectedKey] = createInternalSignal<Key | null>(
     getProps().defaultSelectedKey ?? null,
   );
 
@@ -206,7 +224,7 @@ export function createComboBoxState<T = unknown>(
   const isInputControlled = () => getProps().inputValue !== undefined;
 
   // We'll set the proper initial value after collection is created
-  const [internalInputValue, setInternalInputValue] = createSignal(
+  const [internalInputValue, setInternalInputValue] = createInternalSignal(
     getProps().defaultInputValue ?? "",
   );
   // Track if we've initialized input from selection
@@ -217,6 +235,9 @@ export function createComboBoxState<T = unknown>(
   };
 
   const setInputValue = (value: string) => {
+    // Solid 2 batches writes onto a microtask, so onInputChange and the
+    // auto-open effect settle in one flush (CB-OC-03: onInputChange then
+    // onOpenChange(true, "input")).
     if (!isInputControlled()) {
       setInternalInputValue(value);
     }
@@ -224,13 +245,16 @@ export function createComboBoxState<T = unknown>(
   };
 
   // Track last committed input value
-  const [lastValue, setLastValue] = createSignal(inputValue());
+  const [lastValue, setLastValue] = createInternalSignal(inputValue());
 
   const selectedKey: Accessor<Key | null> = () => {
     return isSelectionControlled() ? (getProps().selectedKey ?? null) : internalSelectedKey();
   };
 
   const setSelectedKey = (key: Key | null) => {
+    // Solid 2 batches writes onto a microtask, so a fully controlled
+    // onSelectionChange that updates selectedKey then inputValue settles in
+    // one flush instead of closing then auto-opening.
     if (!isSelectionControlled()) {
       setInternalSelectedKey(key);
     }
@@ -238,6 +262,9 @@ export function createComboBoxState<T = unknown>(
   };
 
   // ---- Overlay State ----
+  // Assigned after createListState; onOpenChange only fires after both exist
+  // except a defaultOpen init, which we skip via the optional call.
+  let listState!: ListState<T>;
   const overlayState = createOverlayTriggerState({
     get isOpen() {
       return getProps().isOpen;
@@ -247,11 +274,16 @@ export function createComboBoxState<T = unknown>(
     },
     onOpenChange(isOpen: boolean) {
       getProps().onOpenChange?.(isOpen, isOpen ? menuOpenTrigger : undefined);
+      // RAC useComboBoxState.ts:314-317
+      listState?.setFocused(isOpen);
+      if (!isOpen) {
+        listState?.setFocusedKey(null);
+      }
     },
   });
 
   // ---- List State (unfiltered collection) ----
-  const listState = createListState<T>({
+  listState = createListState<T>({
     get items() {
       // Use items or defaultItems
       return getProps().items ?? getProps().defaultItems ?? [];
@@ -307,16 +339,12 @@ export function createComboBoxState<T = unknown>(
 
   const filteredCollection = createMemo<Collection<T>>(() => {
     const collection = originalCollection();
-    const input = inputValue();
     const filter = getProps().defaultFilter;
-
-    // If no filter function provided, return original collection
-    if (!filter) {
+    // RAC useComboBoxState.ts:297-302 — no default filter if items are controlled.
+    if (getProps().items != null || !filter) {
       return collection;
     }
-
-    // Filter the collection based on input value
-    return filterCollection(collection, input, filter);
+    return filterCollection(collection, inputValue(), filter);
   });
 
   // The displayed collection depends on showAllItems flag
@@ -374,13 +402,12 @@ 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.
+  // `autoFocus: state.focusStrategy || true` prop (useComboBox.ts:535 →
+  // useSelectableCollection). createListBox does not honor a listbox
+  // `autoFocus` prop, so BOTH open() and toggle() apply it here. RAC applies
+  // this in a later effect; doing it synchronously keeps the first option
+  // paint (slot `aria-labelledby`) stable. createComboBox still announces
+  // option count on open.
   const applyOpenFocus = (strategy: FocusStrategy | null) => {
     const key = selectedKey();
     const nextFocusedKey =
@@ -398,15 +425,20 @@ export function createComboBoxState<T = unknown>(
   const open = (strategy: FocusStrategy | null = null, trigger?: MenuTriggerAction) => {
     const displayAll = trigger === "manual" || (trigger === "focus" && menuTrigger() === "focus");
 
-    // Check if we should open
+    // RAC useComboBoxState.ts:331-340 — controlled `items` may open empty;
+    // showAllItems only when items are undefined (collection filtering).
     const filtered = filteredCollection();
     const original = originalCollection();
+    const items = getProps().items;
     const canOpen =
-      allowsEmptyCollection() || filtered.size > 0 || (displayAll && original.size > 0);
+      allowsEmptyCollection() ||
+      filtered.size > 0 ||
+      (displayAll && original.size > 0) ||
+      items != null;
 
     if (!canOpen) return;
 
-    if (displayAll && !overlayState.isOpen()) {
+    if (displayAll && !overlayState.isOpen() && items === undefined) {
       setShowAllItems(true);
     }
 
@@ -421,17 +453,20 @@ export function createComboBoxState<T = unknown>(
   const toggle = (strategy: FocusStrategy | null = null, trigger?: MenuTriggerAction) => {
     const displayAll = trigger === "manual" || (trigger === "focus" && menuTrigger() === "focus");
 
-    // Check if we can open (if closed)
     const filtered = filteredCollection();
     const original = originalCollection();
+    const items = getProps().items;
     const canOpen =
-      allowsEmptyCollection() || filtered.size > 0 || (displayAll && original.size > 0);
+      allowsEmptyCollection() ||
+      filtered.size > 0 ||
+      (displayAll && original.size > 0) ||
+      items != null;
 
     if (!canOpen && !overlayState.isOpen()) return;
 
     const willOpen = !overlayState.isOpen();
 
-    if (displayAll && willOpen) {
+    if (displayAll && willOpen && items === undefined) {
       setShowAllItems(true);
     }
 
@@ -457,6 +492,8 @@ export function createComboBoxState<T = unknown>(
     if (isSelectionControlled() && isInputControlled()) {
       getProps().onSelectionChange?.(selectedKey());
       const item = selectedItem();
+      // RAC useComboBoxState.ts:543-545 — stop the auto-open-on-input effect
+      // from reopening after this close.
       setLastValue(item?.textValue ?? "");
       closeMenu();
     } else {
@@ -492,13 +529,14 @@ export function createComboBoxState<T = unknown>(
     }
 
     if (overlayState.isOpen() && focusedKey != null) {
-      // If focused key is already selected, just commit
+      // RAC useComboBoxState.ts:564-572 — already-selected key goes through
+      // commitSelection. A new key is `selectionManager.select()` without
+      // close; the open/close effect then closes while the menu is still
+      // open, so auto-open (input !== last && !isOpen) is skipped.
       if (selectedKey() === focusedKey) {
         commitSelection();
       } else {
-        // Select the focused item
-        setSelectedKey(focusedKey);
-        closeMenu();
+        listState.selectionManager.select(focusedKey);
       }
     } else {
       commitValue();
@@ -514,12 +552,14 @@ export function createComboBoxState<T = unknown>(
   };
 
   // ---- Focus Handling ----
-  const [isFocused, setIsFocused] = createSignal(false);
-  let valueOnFocus = "";
+  const [isFocused, setIsFocused] = createInternalSignal(false);
 
+  // RAC useComboBoxState.ts:578-593 also keeps `valueOnFocus` and, on blur,
+  // calls `validation.commitValidation()` when the input value or the display
+  // value moved while focused. This hook has no validation state at all, so
+  // the binding was written and never read; #560 owes the whole wiring.
   const setFocused = (focused: boolean) => {
     if (focused) {
-      valueOnFocus = inputValue();
       if (menuTrigger() === "focus" && !getProps().isReadOnly) {
         open(null, "focus");
       }
@@ -532,42 +572,79 @@ export function createComboBoxState<T = unknown>(
   };
 
   // ---- Effects for Auto Open/Close ----
-  createEffect(() => {
-    const input = inputValue();
-    const filtered = filteredCollection();
-    const isOpen = overlayState.isOpen();
-    const last = lastValue();
-    const focused = isFocused();
-
-    // Auto-open when typing
-    if (
-      focused &&
-      (filtered.size > 0 || allowsEmptyCollection()) &&
-      !isOpen &&
-      input !== last &&
-      menuTrigger() !== "manual"
-    ) {
-      open(null, "input");
-    }
+  // RAC useComboBoxState.ts:408-496 is one effect: auto-open, auto-close,
+  // close-on-selection, then lastValue. Close-on-selection must not run as a
+  // later effect — after a fully-controlled commit the parent updates
+  // inputValue, a trailing close leaves !isOpen && input !== last, and
+  // auto-open reopens (D13 Enter re-announces "N options available.").
+  // lastDisplayValue starts as the current key so an initial selectedKey is
+  // not treated as a selection change (RAC lastValueRef = useRef(displayValue)).
+  let lastDisplayValue: Key | null | undefined = untrack(selectedKey);
+
+  createEffect(
+    () => ({
+      input: inputValue(),
+      filtered: filteredCollection(),
+      isOpen: overlayState.isOpen(),
+      last: lastValue(),
+      focused: isFocused(),
+      key: isMultiple() ? null : selectedKey(),
+      allowsEmpty: allowsEmptyCollection(),
+      trigger: menuTrigger(),
+      showingAll: showAllItems(),
+      inputControlled: isInputControlled(),
+      selectionControlled: isSelectionControlled(),
+    }),
+    ({
+      input,
+      filtered,
+      isOpen,
+      last,
+      focused,
+      key,
+      allowsEmpty,
+      trigger,
+      showingAll,
+      inputControlled,
+      selectionControlled,
+    }) => {
+      // Auto-open when typing
+      if (
+        focused &&
+        (filtered.size > 0 || allowsEmpty) &&
+        !isOpen &&
+        input !== last &&
+        trigger !== "manual"
+      ) {
+        open(null, "input");
+      }
 
-    // Auto-close when empty (unless showing all)
-    if (!showAllItems() && !allowsEmptyCollection() && isOpen && filtered.size === 0) {
-      closeMenu();
-    }
+      // Auto-close when empty (unless showing all)
+      if (!showingAll && !allowsEmpty && isOpen && filtered.size === 0) {
+        closeMenu();
+      }
 
-    // Clear focused key when input changes
-    if (input !== last) {
-      listState.setFocusedKey(null);
-      setShowAllItems(false);
+      // Close when an item is selected (RAC displayValue !== lastValueRef).
+      if (key != null && key !== lastDisplayValue) {
+        closeMenu();
+      }
 
-      // Clear selection when input is cleared (if not fully controlled)
-      if (input === "" && (!isInputControlled() || !isSelectionControlled())) {
-        setSelectedKey(null);
+      // Clear focused key when input changes
+      if (input !== last) {
+        listState.setFocusedKey(null);
+        setShowAllItems(false);
+
+        // Clear selection when input is cleared (if not fully controlled)
+        if (input === "" && (!inputControlled || !selectionControlled)) {
+          setSelectedKey(null);
+        }
+
+        setLastValue(input);
       }
 
-      setLastValue(input);
-    }
-  });
+      lastDisplayValue = key;
+    },
+  );
 
   // Keep the input text in sync with the selected item (single mode only).
   //
@@ -585,30 +662,30 @@ export function createComboBoxState<T = unknown>(
   // 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();
-    const item = key != null ? originalCollection().getItem(key) : null;
-    const textValue = item?.textValue ?? "";
-
-    // Only update if selection changed and not fully controlled
-    if (!isInputControlled() || !isSelectionControlled()) {
-      if (key != null && textValue !== untrack(inputValue)) {
-        setInputValue(textValue);
-        setLastValue(textValue);
+  createEffect(
+    () => {
+      if (isMultiple()) return null;
+      const key = selectedKey();
+      const item = key != null ? originalCollection().getItem(key) : null;
+      return {
+        key,
+        textValue: item?.textValue ?? "",
+        inputControlled: isInputControlled(),
+        selectionControlled: isSelectionControlled(),
+      };
+    },
+    (data) => {
+      if (!data) return;
+      const { key, textValue, inputControlled, selectionControlled } = data;
+      // Only update if selection changed and not fully controlled
+      if (!inputControlled || !selectionControlled) {
+        if (key != null && textValue !== untrack(inputValue)) {
+          setInputValue(textValue);
+          setLastValue(textValue);
+        }
       }
-    }
-  });
-
-  // Close when selection changes (only in single mode)
-  createEffect((prevKey: Key | null | undefined) => {
-    if (isMultiple()) return undefined;
-    const key = selectedKey();
-    if (key != null && key !== prevKey) {
-      closeMenu();
-    }
-    return key;
-  }, undefined);
+    },
+  );
 
   // ---- Selection Methods for ListState compatibility ----
   // These methods allow createOption to work with ComboBoxState
@@ -658,6 +735,7 @@ export function createComboBoxState<T = unknown>(
     selectedItem,
     setSelectedKey,
     selectedKeys,
+    setSelectedKeys,
     selectedItems,
     removeSelectedKey,
     inputValue,
@@ -690,6 +768,9 @@ export function createComboBoxState<T = unknown>(
 
 /**
  * Filter a collection based on input value.
+ * RAC `useComboBoxState.ts:644-672` copies nodes into a new `ListCollection`,
+ * which reassigns `index` (ListCollection.ts:51-53). Keeping the original
+ * `index` makes virtualized `aria-posinset` report the unfiltered position.
  */
 function filterCollection<T>(
   collection: Collection<T>,
@@ -701,19 +782,18 @@ function filterCollection<T>(
   }
 
   const filteredItems: CollectionNode<T>[] = [];
+  let index = 0;
 
   for (const item of collection) {
     if (item.type === "section") {
-      // Filter section children
       const filteredChildren: CollectionNode<T>[] = [];
       if (item.childNodes) {
         for (const child of item.childNodes) {
           if (child.type === "item" && filter(child.textValue, inputValue)) {
-            filteredChildren.push(child);
+            filteredChildren.push({ ...child, index: index++ });
           }
         }
       }
-      // Only include section if it has matching children
       if (filteredChildren.length > 0) {
         filteredItems.push({
           ...item,
@@ -722,109 +802,12 @@ function filterCollection<T>(
       }
     } else if (item.type === "item") {
       if (filter(item.textValue, inputValue)) {
-        filteredItems.push(item);
-      }
-    }
-  }
-
-  // Create a new collection from filtered items
-  return createFilteredCollection(filteredItems, collection);
-}
-
-/**
- * Create a filtered collection wrapper.
- */
-function createFilteredCollection<T>(
-  items: CollectionNode<T>[],
-  original: Collection<T>,
-): Collection<T> {
-  const itemMap = new Map<Key, CollectionNode<T>>();
-
-  for (const item of items) {
-    itemMap.set(item.key, item);
-    if (item.childNodes) {
-      for (const child of item.childNodes) {
-        itemMap.set(child.key, child);
+        filteredItems.push({ ...item, index: index++ });
       }
+    } else {
+      filteredItems.push({ ...item });
     }
   }
 
-  return {
-    get size() {
-      let count = 0;
-      for (const item of items) {
-        if (item.type === "item") {
-          count++;
-        } else if (item.childNodes) {
-          count += Array.from(item.childNodes).filter((c) => c.type === "item").length;
-        }
-      }
-      return count;
-    },
-    getItem(key: Key) {
-      return itemMap.get(key) ?? null;
-    },
-    getKeys() {
-      return itemMap.keys();
-    },
-    getFirstKey() {
-      for (const item of items) {
-        if (item.type === "item") return item.key;
-        if (item.childNodes) {
-          for (const child of item.childNodes) {
-            if (child.type === "item") return child.key;
-          }
-        }
-      }
-      return null;
-    },
-    getLastKey() {
-      for (let i = items.length - 1; i >= 0; i--) {
-        const item = items[i];
-        if (item.type === "item") return item.key;
-        if (item.childNodes) {
-          const children = Array.from(item.childNodes);
-          for (let j = children.length - 1; j >= 0; j--) {
-            if (children[j].type === "item") return children[j].key;
-          }
-        }
-      }
-      return null;
-    },
-    getKeyBefore(key: Key) {
-      return original.getKeyBefore(key);
-    },
-    getKeyAfter(key: Key) {
-      return original.getKeyAfter(key);
-    },
-    at(index: number) {
-      // Flatten items for indexing
-      let currentIndex = 0;
-      for (const item of items) {
-        if (item.type === "item") {
-          if (currentIndex === index) return item;
-          currentIndex++;
-        } else if (item.childNodes) {
-          for (const child of item.childNodes) {
-            if (child.type === "item") {
-              if (currentIndex === index) return child;
-              currentIndex++;
-            }
-          }
-        }
-      }
-      return null;
-    },
-    getChildren(key: Key) {
-      const item = itemMap.get(key);
-      return item?.childNodes ?? [];
-    },
-    getTextValue(key: Key) {
-      const item = itemMap.get(key);
-      return item?.textValue ?? "";
-    },
-    [Symbol.iterator]() {
-      return items[Symbol.iterator]();
-    },
-  };
+  return new ListCollection(filteredItems);
 }

package/src/data/createAsyncList.ts

@@ -1,12 +1,32 @@
+/*
+ * Copyright 2020 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/data/useAsyncList.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/data/useListData.ts
+
 /**
  * createAsyncList - SolidJS port of React Spectrum's useAsyncList
  *
  * Manages state for an immutable async loaded list data structure, and provides
  * convenience methods to update the data over time. Manages loading and error
  * states, pagination, and sorting.
+ *
+ * Ported from:
+ * - packages/react-stately/src/data/useAsyncList.ts
+ * - packages/react-stately/src/data/useListData.ts
  */
 
-import { createSignal, untrack } from "solid-js";
+import { untrack } from "solid-js";
+import { createInternalSignal } from "../utils";
 
 export type Key = string | number;
 export type Selection = "all" | Set<Key>;
@@ -149,7 +169,7 @@ export function createAsyncList<T, C = string>(options: AsyncListOptions<T, C>):
     initialFilterText = "",
   } = options;
 
-  const [state, setState] = createSignal<InternalState<T, C>>({
+  const [state, setState] = createInternalSignal<InternalState<T, C>>({
     loadingState: "idle",
     items: [],
     selectedKeys: initialSelectedKeys === "all" ? "all" : new Set(initialSelectedKeys || []),

package/src/data/createListData.ts

@@ -1,11 +1,28 @@
+/*
+ * Copyright 2020 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/data/useListData.ts
+
 /**
  * createListData - SolidJS port of React Spectrum's useListData
  *
  * Manages state for an immutable list data structure, and provides
  * convenience methods to update the data over time.
+ *
+ * Ported from packages/react-stately/src/data/useListData.ts.
  */
 
-import { createSignal, createMemo } from "solid-js";
+import { createMemo } from "solid-js";
+import { createInternalSignal } from "../utils";
 
 export type Key = string | number;
 export type Selection = "all" | Set<Key>;
@@ -88,7 +105,7 @@ export function createListData<T>(options: ListOptions<T>): ListData<T> {
     initialFilterText = "",
   } = options;
 
-  const [state, setState] = createSignal<ListState<T>>({
+  const [state, setState] = createInternalSignal<ListState<T>>({
     items: initialItems,
     selectedKeys: initialSelectedKeys === "all" ? "all" : new Set(initialSelectedKeys || []),
     filterText: initialFilterText,