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

package/src/table/createTreeGridState.ts

@@ -1,3 +1,17 @@
+/*
+ * Copyright 2023 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/table/useTreeGridState.ts
+
 /**
  * Tree grid state management for expandable Table rows.
  * Based on @react-stately/table/useTreeGridState (the `UNSTABLE_` tree-grid feature).
@@ -6,7 +20,9 @@
  * collection from it, and layers the expansion API on top of {@link createTableState}.
  */
 
-import { createMemo, createSignal, type Accessor } from "solid-js";
+import { createMemo } from "solid-js";
+import { createInternalSignal, propsAccessor, type MaybeAccessor } from "../utils";
+
 import { createTableState } from "./createTableState";
 import { createTableCollection, TableCollection } from "./TableCollection";
 import type { Key } from "../collections/types";
@@ -19,22 +35,22 @@ 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`.
-  const [internalExpandedKeys, setInternalExpandedKeys] = createSignal<"all" | Set<Key>>(
+  const [internalExpandedKeys, setInternalExpandedKeys] = createInternalSignal<"all" | Set<Key>>(
     getInitialExpanded(getOptions().UNSTABLE_defaultExpandedKeys),
   );
 
-  const expandedKeys = createMemo<"all" | Set<Key>>(() => {
+  const expandedKeys = (): "all" | Set<Key> => {
     const controlled = getOptions().UNSTABLE_expandedKeys;
     if (controlled !== undefined) {
       return convertExpanded(controlled);
     }
     return internalExpandedKeys();
-  });
+  };
 
   // Rebuild the tree collection whenever the expanded keys (or the data) change.
   const collection = createMemo(

package/src/table/types.ts

@@ -1,10 +1,43 @@
+/*
+ * 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.
+ */
+
+/*
+ * Copyright 2023 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-types/table/src/index.d.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/table/TableCollection.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/table/useTableState.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/table/useTreeGridState.ts
+
 /**
  * Table state types for Table components.
- * Based on @react-stately/table and @react-types/table.
+ * Ported from:
+ * - packages/react-stately/src/table/TableCollection.ts
+ * - packages/react-stately/src/table/useTableState.ts
+ * - packages/react-stately/src/table/useTreeGridState.ts
+ * - packages/@react-types/table/src/index.d.ts
  */
 
-import type { Key, FocusStrategy } from "../collections/types";
-import type { GridState, GridCollection, GridNode, GridNodeType } from "../grid/types";
+import type { Key } from "../collections/types";
+import type { GridState, GridCollection, GridNode } from "../grid/types";
 
 /**
  * Sort direction for table columns.
@@ -105,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

@@ -1,10 +1,25 @@
+/*
+ * 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/tabs/useTabListState.ts
+
 /**
  * State management for tab components.
- * Based on @react-stately/tabs.
+ * Ported from packages/react-stately/src/tabs/useTabListState.ts.
  */
 
-import { createComputed, createMemo, createSignal, type Accessor } from "solid-js";
-import { access, type MaybeAccessor } from "../utils";
+import { createEffect, createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
+import { createInternalSignal, propsAccessor, type MaybeAccessor } from "../utils";
 import { ListCollection } from "../collections/ListCollection";
 import type {
   Collection,
@@ -79,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();
@@ -163,7 +178,7 @@ export function createTabListState<T = unknown>(
     return findFirstNonDisabledKey();
   };
 
-  const [selectedKeyInternal, setSelectedKeyInternal] = createSignal<Key | null>(
+  const [selectedKeyInternal, setSelectedKeyInternal] = createInternalSignal<Key | null>(
     getInitialSelectedKey(),
   );
 
@@ -200,55 +215,60 @@ export function createTabListState<T = unknown>(
 
   const orientation: Accessor<TabOrientation> = () => getProps().orientation ?? "horizontal";
 
-  const [isFocused, setIsFocused] = createSignal(false);
-  const [focusedKey, setFocusedKeyInternal] = createSignal<Key | null>(null);
-  const [childFocusStrategy, setChildFocusStrategy] = createSignal<FocusStrategy | null>(null);
+  const [isFocused, setIsFocused] = createInternalSignal(false);
+  const [focusedKey, setFocusedKeyInternal] = createInternalSignal<Key | null>(null);
+  const [childFocusStrategy, setChildFocusStrategy] = createInternalSignal<FocusStrategy | null>(
+    null,
+  );
 
   const setFocusedKey = (key: Key | null, childStrategy?: FocusStrategy) => {
     setFocusedKeyInternal(key);
     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 (mirrors useTabListState's effect).
+  // 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();
-  createComputed(() => {
-    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) || (!focused && sel !== lastSelectedKey)) {
+        setFocusedKey(sel);
+      }
+      lastSelectedKey = sel;
+    },
+  );
 
   // Keep uncontrolled selection valid as items/disabled keys change.
-  createComputed(() => {
-    const p = getProps();
-    if (p.selectedKey !== undefined) return;
-
-    const coll = collection();
-    const current = selectedKeyInternal();
-    const currentExists = current !== null && coll.getItem(current) !== null;
-    const currentEnabled = current !== null && !isKeyDisabled(current);
-
-    if (currentExists && currentEnabled) return;
-
-    if (
-      p.defaultSelectedKey !== undefined &&
-      coll.getItem(p.defaultSelectedKey) !== null &&
-      !isKeyDisabled(p.defaultSelectedKey)
-    ) {
-      if (p.defaultSelectedKey !== current) {
-        setSelectedKeyInternal(p.defaultSelectedKey);
+  createEffect(
+    () => {
+      const p = getProps();
+      if (p.selectedKey !== undefined) return undefined;
+
+      const coll = collection();
+      if (coll.size === 0) return undefined;
+
+      const current = selectedKeyInternal();
+      const currentExists = current !== null && coll.getItem(current) !== null;
+      const currentEnabled = current !== null && !isKeyDisabled(current);
+      if (currentExists && currentEnabled) return undefined;
+
+      if (
+        p.defaultSelectedKey !== undefined &&
+        coll.getItem(p.defaultSelectedKey) !== null &&
+        !isKeyDisabled(p.defaultSelectedKey)
+      ) {
+        return p.defaultSelectedKey !== current ? p.defaultSelectedKey : undefined;
       }
-      return;
-    }
 
-    const nextKey = findFirstNonDisabledKey();
-    if (nextKey !== current) {
-      setSelectedKeyInternal(nextKey);
-    }
-  });
+      const nextKey = findFirstNonDisabledKey();
+      return nextKey !== current ? nextKey : undefined;
+    },
+    (nextKey) => {
+      if (nextKey !== undefined) setSelectedKeyInternal(nextKey);
+    },
+  );
 
   return {
     collection,

package/src/textfield/createTextFieldState.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/utils/useControlledState.ts
+
 /**
  * TextField state for Solid Stately
  *
@@ -7,8 +21,8 @@
  * as used by @react-aria/textfield.
  */
 
-import { createSignal, Accessor } from "solid-js";
-import { type MaybeAccessor, access } from "../utils";
+import { Accessor } from "solid-js";
+import { createInternalSignal, type MaybeAccessor, access } from "../utils";
 
 export interface TextFieldStateOptions {
   /** The current value (controlled). */
@@ -38,7 +52,7 @@ export function createTextFieldState(
   const initialProps = getProps();
   const initialValue = initialProps.value ?? initialProps.defaultValue ?? "";
 
-  const [internalValue, setInternalValue] = createSignal(initialValue);
+  const [internalValue, setInternalValue] = createInternalSignal(initialValue);
 
   const isControlled = () => getProps().value !== undefined;
 

package/src/toast/createToastState.ts

@@ -1,9 +1,25 @@
+/*
+ * 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/toast/useToastState.ts
+
 /**
  * Toast state management for SolidJS
  * Based on @react-stately/toast useToastState
  */
 
-import { createSignal, onCleanup, type Accessor } from "solid-js";
+import { flush, onCleanup } from "solid-js";
+import type { Accessor } from "solid-js";
+import { createInternalSignal, readNow } from "../utils";
 
 export interface ToastOptions {
   /** A timeout to automatically close the toast, in milliseconds. */
@@ -326,11 +342,20 @@ export class ToastQueue<T> {
  * Use this hook to subscribe to toast changes in your component.
  */
 export function createToastState<T>(props: ToastStateProps<T>): ToastState<T> {
-  const [visibleToasts, setVisibleToasts] = createSignal<QueuedToast<T>[]>([]);
+  const [visibleToasts, setVisibleToasts] = createInternalSignal<QueuedToast<T>[]>([]);
 
   // Subscribe to queue changes
   const unsubscribe = props.queue.subscribe((toasts) => {
     setVisibleToasts(toasts);
+    // Queue updates are typically called from event handlers or tests, not
+    // from effect apply. Flush so ToastRegion's Show sees the new length in
+    // the same turn (Solid 2 otherwise keeps the overlay unmounted until a
+    // later microtask).
+    try {
+      flush();
+    } catch {
+      // Ignore: flush is forbidden inside createEffect apply / createTrackedEffect.
+    }
   });
 
   onCleanup(() => {
@@ -338,7 +363,7 @@ export function createToastState<T>(props: ToastStateProps<T>): ToastState<T> {
   });
 
   return {
-    visibleToasts,
+    visibleToasts: () => readNow(visibleToasts),
     add: (content, options) => props.queue.add(content, options),
     close: (key) => props.queue.close(key),
     remove: (key) => props.queue.remove(key),

package/src/toggle/createToggleGroupState.ts

@@ -1,3 +1,17 @@
+/*
+ * Copyright 2024 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/toggle/useToggleGroupState.ts
+
 /**
  * Toggle group state for Solid Stately
  *
@@ -7,9 +21,8 @@
  * This is a port of @react-stately/toggle's useToggleGroupState.
  */
 
-import { createSignal } from "solid-js";
 import type { Key } from "../collections";
-import { type MaybeAccessor, access } from "../utils";
+import { access, createInternalSignal, readNow, type MaybeAccessor } from "../utils";
 
 export interface ToggleGroupProps {
   /**
@@ -57,7 +70,7 @@ export function createToggleGroupState(
   const getProps = () => access(props);
 
   const initialProps = getProps();
-  const [internalSelectedKeys, setInternalSelectedKeys] = createSignal<Set<Key>>(
+  const [internalSelectedKeys, setInternalSelectedKeys] = createInternalSignal<Set<Key>>(
     toKeySet(initialProps.defaultSelectedKeys),
   );
 
@@ -77,7 +90,9 @@ export function createToggleGroupState(
     const props = getProps();
     const mode = props.selectionMode ?? "single";
     const disallowEmptySelection = props.disallowEmptySelection ?? false;
-    const currentKeys = selectedKeys();
+    const currentKeys = isControlled()
+      ? toKeySet(props.selectedKeys)
+      : readNow(internalSelectedKeys);
 
     let nextKeys: Set<Key>;
     if (mode === "multiple") {
@@ -108,7 +123,7 @@ export function createToggleGroupState(
       return getProps().isDisabled ?? false;
     },
     get selectedKeys() {
-      return new Set(selectedKeys());
+      return new Set(isControlled() ? selectedKeys() : readNow(internalSelectedKeys));
     },
     toggleKey,
     setSelected,

package/src/toggle/createToggleState.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/toggle/useToggleState.ts
+
 /**
  * Toggle state for Solid Stately
  *
@@ -6,8 +20,8 @@
  * This is a 1:1 port of @react-stately/toggle's useToggleState.
  */
 
-import { createSignal, Accessor } from "solid-js";
-import { type MaybeAccessor, access } from "../utils";
+import { Accessor } from "solid-js";
+import { access, createInternalSignal, readNow, type MaybeAccessor } from "../utils";
 
 export interface ToggleStateOptions {
   /** Whether the element should be selected (controlled). */
@@ -40,7 +54,7 @@ export function createToggleState(props: MaybeAccessor<ToggleStateOptions> = {})
   const initialProps = getProps();
   const initialSelected = initialProps.isSelected ?? initialProps.defaultSelected ?? false;
 
-  const [internalSelected, setInternalSelected] = createSignal(initialSelected);
+  const [internalSelected, setInternalSelected] = createInternalSignal(initialSelected);
 
   const isControlled = () => getProps().isSelected !== undefined;
 
@@ -68,7 +82,8 @@ export function createToggleState(props: MaybeAccessor<ToggleStateOptions> = {})
       return;
     }
 
-    setSelected(!isSelected());
+    const selected = isControlled() ? (p.isSelected ?? false) : readNow(internalSelected);
+    setSelected(!selected);
   }
 
   return {