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

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.

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, onCleanup } from "solid-js";
+import type { Accessor } from "solid-js";
+import { createInternalSignal, access, type MaybeAccessor } from "../utils";
 import { ListCollection } from "../collections/ListCollection";
 import type {
   Collection,
@@ -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,9 +215,11 @@ 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);
@@ -211,44 +228,70 @@ export function createTabListState<T = unknown>(
 
   // 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).
+  // roving tabIndex stays on the selected tab. Predicate matches useTabListState.
+  // RAC writes in useEffect (after paint). A tracking-phase write would copy
+  // inside setSelectedKey, so D4 capture of pointerup/click would already see
+  // tabindex 0. Subscribe in compute; write on the next animation frame in apply.
   let lastSelectedKey: Key | null = selectedKey();
-  createComputed(() => {
+  let selectedToFocusedFrame: number | null = null;
+  const copySelectedToFocusedKey = () => {
+    selectedToFocusedFrame = null;
     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) {
+        setFocusedKey(sel);
+        lastSelectedKey = sel;
+        return;
+      }
+
+      if (!focused && sel !== lastSelectedKey) {
+        if (selectedToFocusedFrame != null) return;
+        selectedToFocusedFrame = requestAnimationFrame(copySelectedToFocusedKey);
+      }
+    },
+  );
+  onCleanup(() => {
+    if (selectedToFocusedFrame == null) return;
+    cancelAnimationFrame(selectedToFocusedFrame);
+    selectedToFocusedFrame = null;
   });
 
   // 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 {