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

package/src/dnd/types.ts

@@ -1,7 +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-types/shared/src/dnd.d.ts
+
 /**
  * Drag and Drop types for solid-stately.
  *
  * Core types for drag and drop operations, matching React Aria's DnD API.
+ *
+ * Ported from packages/@react-types/shared/src/dnd.d.ts.
  */
 
 /** The type of drop operation to perform. */

package/src/flags/flags.ts

@@ -0,0 +1,25 @@
+/*
+ * 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/flags/flags.ts
+
+let shadowDOMEnabled = false;
+
+/** Enables React Stately's opt-in Shadow DOM behavior across the port stack. */
+export function enableShadowDOM(): void {
+  shadowDOMEnabled = true;
+}
+
+/** Returns whether opt-in Shadow DOM behavior is enabled. */
+export function shadowDOM(): boolean {
+  return shadowDOMEnabled;
+}

package/src/form/createFormValidationState.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/form/useFormValidationState.ts
+
 /**
  * createFormValidationState for solid-stately
  *
@@ -7,14 +21,9 @@
  * Port of react-stately's useFormValidationState.
  */
 
-import {
-  type Accessor,
-  createContext,
-  createEffect,
-  createMemo,
-  createSignal,
-  useContext,
-} from "solid-js";
+import { createContext, createEffect, createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
+import { createInternalSignal, useContextOptional } from "../utils";
 
 /** Standard HTML ValidityState interface. */
 export interface ValidityState {
@@ -197,15 +206,17 @@ export function createFormValidationState<T>(props: FormValidationProps<T>): For
       : null,
   );
 
-  // Client-side validation
-  const clientError = createMemo<ValidationResult | null>(() => {
+  // Client-side validation. Compute live so commitValidation sees a value
+  // that was written in this same turn (Solid 2 memos stay committed until flush).
+  const computeClientError = (): ValidationResult | null => {
     const validate = props.validate;
     if (!validate || props.value == null) {
       return null;
     }
     const validateErrors = runValidate(validate, props.value);
     return getValidationResult(validateErrors);
-  });
+  };
+  const clientError = createMemo<ValidationResult | null>(computeClientError);
 
   // Built-in validation (skip if valid)
   const builtinValidation = createMemo<ValidationResult | undefined>(() => {
@@ -216,8 +227,9 @@ export function createFormValidationState<T>(props: FormValidationProps<T>): For
     return builtinValidationProp;
   });
 
-  // Server errors from context
-  const serverErrors = useContext(FormValidationContext);
+  // Server errors from context. Optional: hook factories and tests call this
+  // outside a component / FormValidationContext provider.
+  const serverErrors = useContextOptional(FormValidationContext) ?? {};
   const serverErrorMessages = createMemo(() => {
     const name = props.name;
     if (name) {
@@ -229,39 +241,45 @@ export function createFormValidationState<T>(props: FormValidationProps<T>): For
   });
 
   // Track server errors clearing
-  const [lastServerErrors, setLastServerErrors] = createSignal(serverErrors);
-  const [isServerErrorCleared, setServerErrorCleared] = createSignal(false);
-
-  createEffect(() => {
-    if (serverErrors !== lastServerErrors()) {
-      setLastServerErrors(serverErrors);
-      setServerErrorCleared(false);
-    }
-  });
+  const [lastServerErrors, setLastServerErrors] = createInternalSignal(serverErrors);
+  const [isServerErrorCleared, setServerErrorCleared] = createInternalSignal(false);
+
+  createEffect(
+    () => ({ errors: serverErrors, last: lastServerErrors() }),
+    ({ errors, last }) => {
+      if (errors !== last) {
+        setLastServerErrors(errors);
+        setServerErrorCleared(false);
+      }
+    },
+  );
 
   const serverError = createMemo<ValidationResult | null>(() =>
     getValidationResult(isServerErrorCleared() ? [] : serverErrorMessages()),
   );
 
   // Track validation state
-  const [currentValidity, setCurrentValidity] = createSignal(DEFAULT_VALIDATION_RESULT);
-  const [commitQueued, setCommitQueued] = createSignal(false);
+  const [currentValidity, setCurrentValidity] = createInternalSignal(DEFAULT_VALIDATION_RESULT);
+  const [commitQueued, setCommitQueued] = createInternalSignal(false);
 
   let nextValidation = DEFAULT_VALIDATION_RESULT;
   let lastError = DEFAULT_VALIDATION_RESULT;
 
   // Commit validation effect
-  createEffect(() => {
-    if (!commitQueued()) {
-      return;
-    }
-    setCommitQueued(false);
-    const error = clientError() || builtinValidation() || nextValidation;
-    if (!isEqualValidation(error, lastError)) {
-      lastError = error;
-      setCurrentValidity(error);
-    }
-  });
+  createEffect(
+    () => ({
+      queued: commitQueued(),
+      error: clientError() || builtinValidation() || nextValidation,
+    }),
+    ({ queued, error }) => {
+      if (!queued) return;
+      setCommitQueued(false);
+      if (!isEqualValidation(error, lastError)) {
+        lastError = error;
+        setCurrentValidity(error);
+      }
+    },
+  );
 
   // Realtime validation (for native input state)
   const realtimeValidation = createMemo<ValidationResult>(
@@ -314,7 +332,7 @@ export function createFormValidationState<T>(props: FormValidationProps<T>): For
     commitValidation() {
       // Commit validation state so the user sees it on blur/change/submit.
       if (validationBehavior() === "native") {
-        const error = clientError() || builtinValidation() || nextValidation;
+        const error = computeClientError() || builtinValidation() || nextValidation;
         if (!isEqualValidation(error, lastError)) {
           lastError = error;
           setCurrentValidity(error);

package/src/grid/createGridState.ts

@@ -1,11 +1,13 @@
 /**
  * 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 { Accessor } from "solid-js";
 import type { GridState, GridStateOptions, GridCollection, GridNode } from "./types";
 import type { Key, FocusStrategy, SelectionBehavior, Selection } from "../collections/types";
+import { createInternalSignal } from "../utils";
 
 /**
  * Creates state management for a grid component.
@@ -21,52 +23,53 @@ export function createGridState<T extends object, C extends GridCollection<T> =
     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(selectionBehaviorProp, (behavior) => {
+    setSelectionBehaviorState(behavior);
+  });
+
   createEffect(
-    on(selectionBehaviorProp, (behavior) => {
-      setSelectionBehaviorState(behavior);
+    () => ({
+      prop: selectionBehaviorProp(),
+      state: selectionBehaviorState(),
+      keys: selectedKeys(),
     }),
+    ({ prop, state, keys }) => {
+      if (prop === "replace" && state === "toggle" && keys !== "all" && keys.size === 0) {
+        setSelectionBehaviorState("replace");
+      }
+    },
   );
 
-  createEffect(() => {
-    const keys = selectedKeys();
-    if (
-      selectionBehaviorProp() === "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 +91,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 +253,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 +318,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 +344,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 +357,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 +398,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. */