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

package/src/dnd/createDroppableCollectionState.ts

@@ -1,17 +1,33 @@
+/*
+ * 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/dnd/useDroppableCollectionState.ts
+
 /**
  * Droppable collection state management for solid-stately.
  *
  * Provides reactive state for accepting drops onto a collection.
+ *
+ * Ported from packages/react-stately/src/dnd/useDroppableCollectionState.ts.
  */
 
-import { createSignal, createMemo, type Accessor } from "solid-js";
+import { createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
 import type {
   DropItem,
   DropTarget,
   DropOperation,
   DragTypes,
   DroppableCollectionEnterEvent,
-  DroppableCollectionMoveEvent,
   DroppableCollectionActivateEvent,
   DroppableCollectionExitEvent,
   DroppableCollectionDropEvent,
@@ -21,7 +37,19 @@ import type {
   DroppableCollectionReorderEvent,
   ItemDropTarget,
 } from "./types";
-import type { Collection } from "../collections/types";
+import type { Key } from "../collections/types";
+import { createInternalSignal } from "../utils";
+
+/**
+ * The slice of a host collection drop-target state needs: neighbor walk and
+ * parent-key identity. Grid/Table/Tree collections are not `CollectionNode`
+ * lists (cells exist), so this stays structural instead of `Collection<unknown>`.
+ */
+export interface DroppableCollectionLike {
+  getItem(key: Key): { type?: string; parentKey?: Key | null } | null;
+  getKeyBefore(key: Key): Key | null;
+  getKeyAfter(key: Key): Key | null;
+}
 
 export interface DroppableCollectionStateOptions {
   /**
@@ -59,12 +87,13 @@ export interface DroppableCollectionStateOptions {
   shouldAcceptItemDrop?: (target: ItemDropTarget, types: DragTypes) => boolean;
   /**
    * The host collection. Used by the default drop-operation feature detection to
-   * confirm a reorder stays within the same parent and to prevent dropping an
-   * item onto itself or a descendant. Optional: a flat collection (e.g. a plain
-   * ListBox) is always "within parent" and has no descendants, so omitting it is
-   * faithful for flat hosts.
+   * confirm a reorder stays within the same parent, to prevent dropping an item
+   * onto itself or a descendant, and to treat after(item)/before(next) as one
+   * gap. Optional: a flat collection (e.g. a plain ListBox) is always "within
+   * parent" and has no descendants, so omitting it is faithful for those hosts
+   * except opposite-gap matching.
    */
-  collection?: Collection<unknown>;
+  collection?: DroppableCollectionLike;
   /** Whether the droppable collection is disabled. */
   isDisabled?: boolean;
 }
@@ -111,6 +140,19 @@ export interface DroppableCollectionState {
   ): DropOperation;
   /** Check if an item drop should be accepted. */
   shouldAcceptItemDrop(target: ItemDropTarget, types: DragTypes): boolean;
+  /**
+   * RAC `isDropTarget(target)`: whether `target` is the current drop target,
+   * including the before/after pair that names the same gap between two items.
+   * Named `isDropTargetFor` because `isDropTarget` is already the collection-
+   * level boolean on this port.
+   */
+  isDropTargetFor(target: DropTarget | null): boolean;
+  /**
+   * The host collection from the options. RAC always has one
+   * (`useDroppableCollectionState.ts:46-48`); this port's option is optional,
+   * so the field is undefined when the host omits it.
+   */
+  readonly collection: DroppableCollectionLike | undefined;
 }
 
 /**
@@ -129,8 +171,8 @@ export function createDroppableCollectionState(
 ): DroppableCollectionState {
   const getProps = createMemo(() => props());
 
-  const [isDropTarget, setIsDropTarget] = createSignal(false);
-  const [target, setTarget] = createSignal<DropTarget | null>(null);
+  const [isDropTarget, setIsDropTarget] = createInternalSignal(false);
+  const [target, setTarget] = createInternalSignal<DropTarget | null>(null);
 
   const isAccepted = (types: DragTypes): boolean => {
     const p = getProps();
@@ -438,6 +480,37 @@ export function createDroppableCollectionState(
     return true;
   };
 
+  const isDropTargetFor = (dropTarget: DropTarget | null): boolean => {
+    const current = target();
+    if (!current || !dropTarget) return false;
+    if (targetsEqual(current, dropTarget)) return true;
+
+    // RAC `useDroppableCollectionState.ts:216-228`: after(item) and
+    // before(next) name the same gap. Collection only mounts one of them.
+    if (
+      dropTarget.type !== "item" ||
+      current.type !== "item" ||
+      dropTarget.key === current.key ||
+      dropTarget.dropPosition === current.dropPosition ||
+      dropTarget.dropPosition === "on" ||
+      current.dropPosition === "on"
+    ) {
+      return false;
+    }
+
+    const collection = getProps().collection;
+    if (!collection) return false;
+    return (
+      dropTargetsEqual(getOppositeTarget(collection, dropTarget), current) ||
+      dropTargetsEqual(dropTarget, getOppositeTarget(collection, current))
+    );
+  };
+
+  const assignTarget = (newTarget: DropTarget | null) => {
+    if (isDropTargetFor(newTarget)) return;
+    setTarget(newTarget);
+  };
+
   return {
     get isDropTarget() {
       return isDropTarget();
@@ -448,7 +521,7 @@ export function createDroppableCollectionState(
     get isDisabled() {
       return getProps().isDisabled ?? false;
     },
-    setTarget,
+    setTarget: assignTarget,
     isAccepted,
     enterTarget,
     moveToTarget,
@@ -457,6 +530,11 @@ export function createDroppableCollectionState(
     drop,
     getDropOperation,
     shouldAcceptItemDrop,
+    isDropTargetFor,
+    // RAC `useDroppableCollectionState.ts:175-176`.
+    get collection() {
+      return getProps().collection;
+    },
   };
 }
 
@@ -464,6 +542,14 @@ export function createDroppableCollectionState(
  * Check if two drop targets are equal.
  */
 function targetsEqual(a: DropTarget, b: DropTarget): boolean {
+  return dropTargetsEqual(a, b);
+}
+
+function dropTargetsEqual(
+  a: DropTarget | null | undefined,
+  b: DropTarget | null | undefined,
+): boolean {
+  if (!a || !b) return false;
   if (a.type !== b.type) return false;
   if (a.type === "root" && b.type === "root") return true;
   if (a.type === "item" && b.type === "item") {
@@ -471,3 +557,33 @@ function targetsEqual(a: DropTarget, b: DropTarget): boolean {
   }
   return false;
 }
+
+function nextItemKey(
+  collection: DroppableCollectionLike,
+  fromKey: Key,
+  direction: "before" | "after",
+) {
+  let key =
+    direction === "before" ? collection.getKeyBefore(fromKey) : collection.getKeyAfter(fromKey);
+  while (key != null) {
+    const node = collection.getItem(key);
+    if (node?.type === "item") return key;
+    key = direction === "before" ? collection.getKeyBefore(key) : collection.getKeyAfter(key);
+  }
+  return null;
+}
+
+function getOppositeTarget(
+  collection: DroppableCollectionLike,
+  target: ItemDropTarget,
+): ItemDropTarget | null {
+  if (target.dropPosition === "before") {
+    const prevKey = nextItemKey(collection, target.key, "before");
+    return prevKey != null ? { type: "item", key: prevKey, dropPosition: "after" } : null;
+  }
+  if (target.dropPosition === "after") {
+    const nextKey = nextItemKey(collection, target.key, "after");
+    return nextKey != null ? { type: "item", key: nextKey, dropPosition: "before" } : null;
+  }
+  return null;
+}

package/src/dnd/index.ts

@@ -52,8 +52,11 @@ export { createDropState, type DropStateOptions, type DropState } from "./create
 
 export {
   createDraggableCollectionState,
+  getKeysForDrag,
   type DraggableCollectionStateOptions,
   type DraggableCollectionState,
+  type DraggableCollectionLike,
+  type DraggableCollectionNode,
 } from "./createDraggableCollectionState";
 
 export {
@@ -61,4 +64,5 @@ export {
   DIRECTORY_DRAG_TYPE,
   type DroppableCollectionStateOptions,
   type DroppableCollectionState,
+  type DroppableCollectionLike,
 } from "./createDroppableCollectionState";

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/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 {
@@ -112,6 +121,18 @@ export const DEFAULT_VALIDATION_RESULT: ValidationResult = {
 /** Context for server-side validation errors. */
 export const FormValidationContext = createContext<ValidationErrors>({});
 
+// Form publishes one proxy so field setup does not freeze the first map.
+// The symbol reads the current validationErrors object. A new object resets
+// the clear flag, matching the pin's context identity check.
+const validationErrorsSource = Symbol.for("proyecto-viviana.validationErrorsSource");
+
+function validationErrorsIdentity(errors: ValidationErrors): ValidationErrors {
+  const source = (errors as ValidationErrors & Record<symbol, ValidationErrors | undefined>)[
+    validationErrorsSource
+  ];
+  return source ?? errors;
+}
+
 /** Private prop key for passing validation state to children. */
 export const privateValidationStateProp = "__formValidationState" + Date.now();
 
@@ -197,15 +218,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 +239,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) {
@@ -228,40 +252,48 @@ export function createFormValidationState<T>(props: FormValidationProps<T>): For
     return [];
   });
 
-  // Track server errors clearing
-  const [lastServerErrors, setLastServerErrors] = createSignal(serverErrors);
-  const [isServerErrorCleared, setServerErrorCleared] = createSignal(false);
-
-  createEffect(() => {
-    if (serverErrors !== lastServerErrors()) {
-      setLastServerErrors(serverErrors);
-      setServerErrorCleared(false);
-    }
-  });
+  // Track server errors clearing. Compare the map object, not the proxy.
+  const [lastServerErrors, setLastServerErrors] = createInternalSignal(
+    validationErrorsIdentity(serverErrors),
+  );
+  const [isServerErrorCleared, setServerErrorCleared] = createInternalSignal(false);
+
+  createEffect(
+    () => ({ errors: validationErrorsIdentity(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 +346,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);