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

package/src/grid/createGridState.ts

@@ -1,72 +1,82 @@
 /**
  * Grid state management for Table and GridList components.
- * Based on @react-stately/grid/useGridState.
+ * Based on packages/react-stately/src/grid/useGridState.ts.
  */
 
-import { createSignal, createEffect, createMemo, on, type Accessor } from "solid-js";
+import { createEffect, createMemo } from "solid-js";
 import type { GridState, GridStateOptions, GridCollection, GridNode } from "./types";
 import type { Key, FocusStrategy, SelectionBehavior, Selection } from "../collections/types";
+import { createInternalSignal, propsAccessor, type MaybeAccessor } from "../utils";
 
 /**
  * Creates state management for a grid component.
  * Handles row selection, focus management, and keyboard navigation state.
  */
 export function createGridState<T extends object, C extends GridCollection<T> = GridCollection<T>>(
-  options: Accessor<GridStateOptions<T, C>>,
+  options: MaybeAccessor<GridStateOptions<T, C>>,
 ): GridState<T, C> {
-  const getOptions = () => options();
+  const getOptions = propsAccessor(options);
 
   const disabledKeys = createMemo(() => {
     const keys = getOptions().disabledKeys;
     return keys ? new Set(keys) : new Set<Key>();
   });
 
-  const [isFocused, setIsFocused] = createSignal(false);
-  const [focusedKey, setFocusedKeyInternal] = createSignal<Key | null>(null);
-  const [childFocusStrategy, setChildFocusStrategy] = createSignal<FocusStrategy | null>(null);
-  const [isKeyboardNavigationDisabled, setKeyboardNavigationDisabled] = createSignal(false);
+  const [isFocused, setIsFocused] = createInternalSignal(false);
+  const [focusedKey, setFocusedKeyInternal] = createInternalSignal<Key | null>(null);
+  const [childFocusStrategy, setChildFocusStrategy] = createInternalSignal<FocusStrategy | null>(
+    null,
+  );
+  const [isKeyboardNavigationDisabled, setKeyboardNavigationDisabled] = createInternalSignal(false);
 
-  const [internalSelectedKeys, setInternalSelectedKeys] = createSignal<"all" | Set<Key>>(
+  const [internalSelectedKeys, setInternalSelectedKeys] = createInternalSignal<"all" | Set<Key>>(
     getInitialSelection(getOptions().defaultSelectedKeys),
   );
-  const [anchorKey, setAnchorKey] = createSignal<Key | null>(null);
+  const [anchorKey, setAnchorKey] = createInternalSignal<Key | null>(null);
 
-  const selectedKeys = createMemo(() => {
+  const selectedKeys = (): "all" | Set<Key> => {
     const opts = getOptions();
     if (opts.selectedKeys !== undefined) {
       return normalizeSelection(opts.selectedKeys);
     }
     return internalSelectedKeys();
-  });
+  };
 
   const selectionMode = createMemo(() => getOptions().selectionMode ?? "none");
   const selectionBehaviorProp = (): SelectionBehavior => getOptions().selectionBehavior ?? "toggle";
   const [selectionBehaviorState, setSelectionBehaviorState] =
-    createSignal<SelectionBehavior>(selectionBehaviorProp());
+    createInternalSignal<SelectionBehavior>(selectionBehaviorProp());
   const selectionBehavior = createMemo(() => selectionBehaviorState());
   const disallowEmptySelection = createMemo(() => getOptions().disallowEmptySelection ?? false);
   const disabledBehavior = createMemo(() => getOptions().disabledBehavior ?? "all");
 
   const focusMode = createMemo(() => getOptions().focusMode ?? "row");
 
-  createEffect(
-    on(selectionBehaviorProp, (behavior) => {
+  let lastSelectionBehavior = selectionBehaviorProp();
+  createEffect(selectionBehaviorProp, (behavior) => {
+    if (behavior !== lastSelectionBehavior) {
       setSelectionBehaviorState(behavior);
-    }),
-  );
-
-  createEffect(() => {
-    const keys = selectedKeys();
-    if (
-      selectionBehaviorProp() === "replace" &&
-      selectionBehaviorState() === "toggle" &&
-      keys !== "all" &&
-      keys.size === 0
-    ) {
-      setSelectionBehaviorState("replace");
+      lastSelectionBehavior = behavior;
     }
   });
 
+  createEffect(
+    () => ({
+      prop: selectionBehaviorProp(),
+      keys: selectedKeys(),
+    }),
+    ({ prop, keys }) => {
+      if (
+        prop === "replace" &&
+        selectionBehaviorState() === "toggle" &&
+        keys !== "all" &&
+        keys.size === 0
+      ) {
+        setSelectionBehaviorState("replace");
+      }
+    },
+  );
+
   const setFocusedKey = (key: Key | null, strategy: FocusStrategy = "first") => {
     const opts = getOptions();
     const collection = opts.collection;
@@ -88,84 +98,138 @@ export function createGridState<T extends object, C extends GridCollection<T> =
     setChildFocusStrategy(strategy);
   };
 
-  // Reset focused key if the item is deleted from the collection
-  let cachedCollection: C | null = null;
+  // Reset focused key if the item is deleted from the collection.
+  // Seed the cache at factory time so the first effect run (Solid 2 flushes
+  // effects, they do not run synchronously) can still see a deletion.
+  let cachedCollection: C | null = getOptions().collection;
 
   createEffect(
-    on(
-      () => getOptions().collection,
-      (collection) => {
-        const currentFocusedKey = focusedKey();
-
-        if (
-          currentFocusedKey != null &&
-          cachedCollection &&
-          !collection.getItem(currentFocusedKey)
-        ) {
-          // The focused item was deleted, find a new one to focus
-          const node = cachedCollection.getItem(currentFocusedKey);
-          const parentNode =
-            node?.parentKey != null &&
-            (node.type === "cell" || node.type === "rowheader" || node.type === "column")
-              ? cachedCollection.getItem(node.parentKey)
-              : node;
-
-          if (!parentNode) {
-            setFocusedKeyInternal(null);
-            cachedCollection = collection;
-            return;
-          }
-
-          const cachedRows = cachedCollection.rows;
-          const rows = collection.rows;
-          const diff = cachedRows.length - rows.length;
+    () => ({
+      collection: getOptions().collection,
+      currentFocusedKey: focusedKey(),
+      disabled: disabledKeys(),
+    }),
+    ({ collection, currentFocusedKey, disabled }) => {
+      if (currentFocusedKey != null && cachedCollection && !collection.getItem(currentFocusedKey)) {
+        // The focused item was deleted, find a new one to focus
+        const node = cachedCollection.getItem(currentFocusedKey);
+        const parentNode =
+          node?.parentKey != null &&
+          (node.type === "cell" || node.type === "rowheader" || node.type === "column")
+            ? cachedCollection.getItem(node.parentKey)
+            : node;
+
+        if (!parentNode) {
+          setFocusedKeyInternal(null);
+          cachedCollection = collection;
+          return;
+        }
 
-          let index = Math.min(
-            diff > 1 ? Math.max(parentNode.index - diff + 1, 0) : parentNode.index,
-            rows.length - 1,
-          );
+        const cachedRows = cachedCollection.rows;
+        const rows = collection.rows;
+        const diff = cachedRows.length - rows.length;
+
+        let index = Math.min(
+          diff > 1 ? Math.max(parentNode.index - diff + 1, 0) : parentNode.index,
+          rows.length - 1,
+        );
+
+        let newRow: GridNode<T> | null = null;
+
+        // Search forward once from the deleted position, then backward once.
+        // The previous direction-switching loop could bounce forever between
+        // two disabled rows when the focused row was deleted.
+        for (let i = Math.max(0, index); i < rows.length; i++) {
+          const row = rows[i];
+          if (!disabled.has(row.key) && row.type !== "headerrow") {
+            newRow = row;
+            break;
+          }
+        }
 
-          let newRow: GridNode<T> | null = null;
-          while (index >= 0) {
-            const row = rows[index];
-            if (!disabledKeys().has(row.key) && row.type !== "headerrow") {
+        if (newRow === null) {
+          for (let i = index - 1; i >= 0; i--) {
+            const row = rows[i];
+            if (!disabled.has(row.key) && row.type !== "headerrow") {
               newRow = row;
               break;
             }
-            // Find next, not disabled row
-            if (index < rows.length - 1) {
-              index++;
-            } else {
-              // Otherwise, find previous, not disabled row
-              if (index > parentNode.index) {
-                index = parentNode.index;
-              }
-              index--;
-            }
           }
+        }
 
-          if (newRow) {
-            const childNodes = newRow.hasChildNodes ? [...collection.getChildren(newRow.key)] : [];
-            const keyToFocus =
-              newRow.hasChildNodes && parentNode !== node && node && node.index < childNodes.length
-                ? childNodes[node.index].key
-                : newRow.key;
-            setFocusedKeyInternal(keyToFocus);
-          } else {
-            setFocusedKeyInternal(null);
-          }
+        if (newRow) {
+          const childNodes = newRow.hasChildNodes ? [...collection.getChildren(newRow.key)] : [];
+          const keyToFocus =
+            newRow.hasChildNodes && parentNode !== node && node && node.index < childNodes.length
+              ? childNodes[node.index].key
+              : newRow.key;
+          setFocusedKeyInternal(keyToFocus);
+        } else {
+          setFocusedKeyInternal(null);
         }
+      }
 
-        cachedCollection = collection;
-      },
-    ),
+      cachedCollection = collection;
+    },
   );
 
   // Selection methods
+  const getSelectionKey = (key: Key): Key | null => {
+    const collection = getOptions().collection;
+    let item = collection.getItem(key);
+
+    if (!item) {
+      return key;
+    }
+
+    // Cells and other child nodes select their parent row.
+    while (item && item.type !== "item" && item.parentKey != null) {
+      item = collection.getItem(item.parentKey);
+    }
+
+    return item?.type === "item" ? item.key : null;
+  };
+
+  const canSelectItem = (key: Key): boolean => {
+    if (selectionMode() === "none" || disabledKeys().has(key)) {
+      return false;
+    }
+
+    const item = getOptions().collection.getItem(key);
+    return !!item && item.type === "item" && !item.isDisabled && !item.props?.isDisabled;
+  };
+
+  const getSelectAllKeys = (): Key[] => {
+    return getOptions()
+      .collection.rows.filter((row) => row.type === "item" && canSelectItem(row.key))
+      .map((row) => row.key);
+  };
+
+  const isEmpty = createMemo(() => {
+    const keys = selectedKeys();
+    return keys !== "all" && keys.size === 0;
+  });
+
+  const isSelectAll = createMemo(() => {
+    const keys = selectedKeys();
+    if (isEmpty()) return false;
+
+    if (keys === "all") {
+      return true;
+    }
+
+    return getSelectAllKeys().every((key) => keys.has(key));
+  });
+
   const isSelected = (key: Key): boolean => {
+    if (selectionMode() === "none") return false;
+
+    const selectionKey = getSelectionKey(key);
+    if (selectionKey == null) return false;
+
     const keys = selectedKeys();
-    if (keys === "all") return true;
-    return keys.has(key);
+    if (keys === "all") return canSelectItem(selectionKey);
+    return keys.has(selectionKey);
   };
 
   const isDisabled = (key: Key): boolean => {
@@ -196,49 +260,62 @@ export function createGridState<T extends object, C extends GridCollection<T> =
   };
 
   const toggleSelection = (key: Key) => {
-    if (isDisabled(key)) return;
     if (selectionMode() === "none") return;
 
+    const selectionKey = getSelectionKey(key);
+    if (selectionKey == null) return;
+
     const current = selectedKeys();
 
     if (selectionMode() === "single") {
-      if (isSelected(key) && !disallowEmptySelection()) {
+      if (isSelected(selectionKey) && !disallowEmptySelection()) {
         updateSelection(new Set());
-      } else {
-        updateSelection(new Set([key]));
+      } else if (canSelectItem(selectionKey)) {
+        updateSelection(new Set([selectionKey]));
       }
       return;
     }
 
     // Multiple selection
-    if (current === "all") {
-      // Can't toggle when all selected without knowing all keys
-      return;
-    }
-
-    const newSelection = new Set(current);
-    if (newSelection.has(key)) {
+    const newSelection = new Set(current === "all" ? getSelectAllKeys() : current);
+    if (newSelection.has(selectionKey)) {
       if (newSelection.size > 1 || !disallowEmptySelection()) {
-        newSelection.delete(key);
+        newSelection.delete(selectionKey);
       }
-    } else {
-      newSelection.add(key);
+    } else if (canSelectItem(selectionKey)) {
+      newSelection.add(selectionKey);
     }
 
     updateSelection(newSelection);
-    setAnchorKey(key);
+    setAnchorKey(selectionKey);
   };
 
   const replaceSelection = (key: Key) => {
-    if (isDisabled(key)) return;
     if (selectionMode() === "none") return;
 
-    updateSelection(new Set([key]));
-    setAnchorKey(key);
+    const selectionKey = getSelectionKey(key);
+    if (selectionKey == null) return;
+
+    updateSelection(canSelectItem(selectionKey) ? new Set([selectionKey]) : new Set());
+    setAnchorKey(selectionKey);
   };
 
   const setSelectedKeys = (keys: Selection | Iterable<Key>) => {
-    updateSelection(normalizeSelection(keys));
+    if (selectionMode() === "none") return;
+    if (keys === "all") {
+      updateSelection("all");
+      return;
+    }
+
+    const selection = new Set<Key>();
+    for (const key of keys) {
+      const selectionKey = getSelectionKey(key);
+      if (selectionKey != null) {
+        selection.add(selectionKey);
+        if (selectionMode() === "single") break;
+      }
+    }
+    updateSelection(selection);
   };
 
   const extendSelection = (toKey: Key) => {
@@ -248,7 +325,7 @@ export function createGridState<T extends object, C extends GridCollection<T> =
       return;
     }
 
-    const anchor = anchorKey();
+    const anchor = anchorKey() ?? focusedKey();
     if (!anchor) {
       replaceSelection(toKey);
       return;
@@ -274,7 +351,9 @@ export function createGridState<T extends object, C extends GridCollection<T> =
 
   const selectAll = () => {
     if (selectionMode() !== "multiple") return;
-    updateSelection("all");
+    if (!isSelectAll()) {
+      updateSelection("all");
+    }
   };
 
   const clearSelection = () => {
@@ -285,7 +364,7 @@ export function createGridState<T extends object, C extends GridCollection<T> =
   const toggleSelectAll = () => {
     if (selectionMode() !== "multiple") return;
 
-    if (selectedKeys() === "all") {
+    if (isSelectAll()) {
       clearSelection();
     } else {
       selectAll();
@@ -326,6 +405,12 @@ export function createGridState<T extends object, C extends GridCollection<T> =
     get selectedKeys() {
       return selectedKeys();
     },
+    get isEmpty() {
+      return isEmpty();
+    },
+    get isSelectAll() {
+      return isSelectAll();
+    },
     isSelected,
     isDisabled,
     setFocusedKey,

package/src/grid/types.ts

@@ -1,6 +1,23 @@
+/*
+ * 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/grid/GridCollection.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/grid/useGridState.ts
+
 /**
  * Grid collection types for Table and GridList components.
- * Based on @react-types/grid.
+ * Ported from:
+ * - packages/react-stately/src/grid/GridCollection.ts
+ * - packages/react-stately/src/grid/useGridState.ts
  */
 
 import type { Key, FocusStrategy, Selection, SelectionBehavior } from "../collections/types";
@@ -145,6 +162,10 @@ export interface GridState<T, C extends GridCollection<T> = GridCollection<T>> {
   readonly disallowEmptySelection: boolean;
   /** The currently selected keys. */
   readonly selectedKeys: "all" | Set<Key>;
+  /** Whether no rows are selected. */
+  readonly isEmpty: boolean;
+  /** Whether every selectable row is selected. */
+  readonly isSelectAll: boolean;
   /** Check if a key is selected. */
   isSelected(key: Key): boolean;
   /** Check if a key is disabled. */

package/src/index.ts

@@ -15,6 +15,19 @@ export {
 
 export { createTextFieldState, type TextFieldStateOptions, type TextFieldState } from "./textfield";
 
+export {
+  createTokenFieldState,
+  TokenFieldValue,
+  type TokenFieldStateOptions,
+  type TokenFieldState,
+  type TokenFieldSegment,
+  type TextSegment,
+  type TokenSegment,
+  type Position,
+  type SelectedRange,
+  type TokenFieldValueOptions,
+} from "./tokenfield";
+
 export {
   createCheckboxGroupState,
   type CheckboxGroupProps,
@@ -65,10 +78,16 @@ export {
   type SingleSelectListState,
   createMenuState,
   createMenuTriggerState,
+  createSubmenuTriggerState,
   type MenuStateProps,
   type MenuState,
+  type MenuTriggerType,
+  type MenuTriggerProps,
   type MenuTriggerStateProps,
   type MenuTriggerState,
+  type RootMenuTriggerState,
+  type SubmenuTriggerProps,
+  type SubmenuTriggerState,
 } from "./collections";
 
 // Selection (module-compat aliases)
@@ -82,7 +101,7 @@ export {
 } from "./selection";
 
 // Menu (module-compat aliases)
-export { useMenuTriggerState } from "./menu";
+export { useMenuTriggerState, useSubmenuTriggerState } from "./menu";
 
 // Datepicker (module-compat aliases)
 export {
@@ -97,13 +116,24 @@ export {
   type SegmentType,
 } from "./datepicker";
 
-export { createSelectState, type SelectStateProps, type SelectState } from "./select";
+export {
+  createSelectState,
+  type SelectStateProps,
+  type SelectState,
+  type SelectSelectionMode,
+  type SelectValueType,
+  type SelectChangeValueType,
+} from "./select";
 
 export {
   createComboBoxState,
   defaultContainsFilter,
   type ComboBoxState,
   type ComboBoxStateProps,
+  type ComboBoxValidationValue,
+  type ComboBoxSelectionMode,
+  type ComboBoxValueType,
+  type ComboBoxChangeValueType,
   type FilterFn,
   type MenuTriggerAction,
 } from "./combobox";
@@ -355,6 +385,7 @@ export {
   type DropStateOptions,
   type DropState,
   createDraggableCollectionState,
+  getKeysForDrag,
   type DraggableCollectionStateOptions,
   type DraggableCollectionState,
   createDroppableCollectionState,

package/src/menu/index.ts

@@ -8,10 +8,17 @@
 export {
   createMenuState,
   createMenuTriggerState,
+  createSubmenuTriggerState,
   type MenuStateProps,
   type MenuState,
+  type MenuTriggerType,
+  type MenuTriggerProps,
   type MenuTriggerStateProps,
   type MenuTriggerState,
+  type RootMenuTriggerState,
+  type SubmenuTriggerProps,
+  type SubmenuTriggerState,
 } from "../collections/createMenuState";
 
 export { createMenuTriggerState as useMenuTriggerState } from "../collections/createMenuState";
+export { createSubmenuTriggerState as useSubmenuTriggerState } from "../collections/createMenuState";