@proyecto-viviana/solidaria 0.4.2 → 0.6.0-rc.0

package/src/dnd/createDroppableItem.ts

@@ -1,31 +1,64 @@
+/*
+ * 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-aria/src/dnd/useDrop.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/dnd/useDroppableItem.ts
+
 /**
  * createDroppableItem - ARIA hook for droppable items within a collection.
  *
  * Provides accessibility props for items that can receive drops.
+ *
+ * Ported from:
+ * - packages/react-aria/src/dnd/useDroppableItem.ts
+ * - packages/react-aria/src/dnd/useDrop.ts
  */
 
-import { createMemo, type Accessor } from "solid-js";
-import type { JSX } from "solid-js";
+import { createMemo, createTrackedEffect } from "solid-js";
+import type { Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type {
+  DragType,
+  DragTypes,
   DroppableCollectionState,
   DropTarget,
   DropOperation,
 } from "@proyecto-viviana/solid-stately";
+import { getGlobalDraggingCollectionRef, getGlobalDraggingKeys } from "./createDraggableCollection";
+import { getGlobalDropCollectionRef, getDroppableCollectionRef } from "./createDroppableCollection";
+import { createDragSession, isVirtualDragging, registerDropItem } from "./DragManager";
 import {
   DragTypesImpl,
   DROP_OPERATION,
   DROP_OPERATION_ALLOWED,
   DROP_OPERATION_TO_DROP_EFFECT,
   getGlobalAllowedDropOperations,
+  getTypes,
 } from "./utils";
 
 export interface DroppableItemOptions {
-  /** The unique key of the item. */
-  key: string | number;
+  /** The unique key of the item. Used when `target` is omitted (`dropPosition: "on"`). */
+  key?: string | number;
+  /**
+   * The drop target this node represents. RAC `useDroppableItem.ts:27`.
+   * Drop indicators pass before/after/on; collection items default to `"on"`.
+   */
+  target?: DropTarget;
   /** Reference to the item element. */
   ref: Accessor<HTMLElement | null>;
   /** Whether this item is disabled for dropping. */
   isDisabled?: boolean;
+  /** The ref to the activate button. RAC `useDroppableItem.ts:29`. */
+  activateButtonRef?: Accessor<HTMLElement | null>;
 }
 
 export interface DroppableItemAria {
@@ -35,6 +68,31 @@ export interface DroppableItemAria {
   isDropTarget: boolean;
 }
 
+const wrapKeyboardTypes = (types: Set<string>): DragTypes => ({
+  has: (type: DragType | DragType[]) => {
+    if (typeof type === "string") return types.has(type);
+    if (Array.isArray(type)) return type.some((t) => typeof t === "string" && types.has(t));
+    return false;
+  },
+});
+
+const isInternalDropOperation = (state: DroppableCollectionState): boolean => {
+  // RAC `utils.ts:411-416` `isInternalDropOperation(droppableCollectionRef)`:
+  // dragging collection === this collection's ref (falling back to the global
+  // drop-collection ref if the WeakMap entry is not yet written).
+  const dragging = getGlobalDraggingCollectionRef();
+  const dropping = getDroppableCollectionRef(state)?.() ?? getGlobalDropCollectionRef();
+  return dragging != null && dragging === dropping;
+};
+
+const resolveTarget = (opts: DroppableItemOptions): DropTarget | null => {
+  if (opts.target) return opts.target;
+  if (opts.key != null) {
+    return { type: "item", key: opts.key, dropPosition: "on" };
+  }
+  return null;
+};
+
 /**
  * Creates ARIA props for a droppable item within a collection.
  *
@@ -47,18 +105,101 @@ export function createDroppableItem(
   state: DroppableCollectionState,
 ): DroppableItemAria {
   const getOptions = createMemo(() => options());
+  const resolvedTarget = createMemo(() => resolveTarget(getOptions()));
+  const dragSession = createDragSession();
 
   const isDropTarget = createMemo(() => {
-    const { key } = getOptions();
-    const target = state.target;
-    return target?.type === "item" && target.key === key;
+    const target = resolvedTarget();
+    if (target == null) return false;
+    if (typeof state.isDropTargetFor === "function") {
+      return state.isDropTargetFor(target);
+    }
+    // Tests and RAC-shaped mocks expose `isDropTarget(target)` or only `target`.
+    const predicate = (state as { isDropTarget?: unknown }).isDropTarget;
+    if (typeof predicate === "function") {
+      return Boolean((predicate as (dropTarget: DropTarget) => boolean)(target));
+    }
+    const current = state.target;
+    if (!current) return false;
+    if (current.type !== target.type) return false;
+    if (current.type === "root" && target.type === "root") return true;
+    if (current.type !== "item" || target.type !== "item") return false;
+    return current.key === target.key && current.dropPosition === target.dropPosition;
+  });
+
+  // RAC `useDroppableItem.ts:49-68`: register with DragManager once the node exists.
+  createTrackedEffect(() => {
+    const _s2Cleanups: Array<() => void> = [];
+
+    const el = getOptions().ref();
+    const target = resolvedTarget();
+    const activateButtonRef = getOptions().activateButtonRef;
+    if (!el || !target) return;
+    const unregister = registerDropItem({
+      element: el,
+      target,
+      getDropOperation: (types, allowedOperations) => {
+        return state.getDropOperation(
+          target,
+          wrapKeyboardTypes(types),
+          allowedOperations,
+          isInternalDropOperation(state),
+          getGlobalDraggingKeys(),
+        );
+      },
+      activateButtonRef,
+    });
+    _s2Cleanups.push(unregister);
+
+    return () => {
+      for (const c of _s2Cleanups) c();
+    };
+  });
+
+  // RAC `useDroppableItem.ts:84-88`: focus the node when it becomes the active
+  // virtual-drag target. Deferred to a microtask so this does not nest inside the
+  // `setTarget` Solid flush (`onDropEnter` → indicator mount). A rAF lost the
+  // race to collection focus under parallel Playwright workers.
+  createTrackedEffect(() => {
+    const _s2Cleanups: Array<() => void> = [];
+
+    const el = getOptions().ref();
+    if (!dragSession() || !isDropTarget() || !el) return;
+    let cancelled = false;
+    queueMicrotask(() => {
+      if (!cancelled && isVirtualDragging() && isDropTarget()) {
+        el.focus();
+      }
+    });
+    _s2Cleanups.push(() => {
+      cancelled = true;
+    });
+
+    return () => {
+      for (const c of _s2Cleanups) c();
+    };
+  });
+
+  const isValidDropTarget = createMemo(() => {
+    const session = dragSession();
+    const target = resolvedTarget();
+    if (!session || !target) return false;
+    return (
+      state.getDropOperation(
+        target,
+        wrapKeyboardTypes(getTypes(session.dragTarget.items)),
+        session.dragTarget.allowedDropOperations,
+        isInternalDropOperation(state),
+        getGlobalDraggingKeys(),
+      ) !== "cancel"
+    );
   });
 
   const getTarget = (dropPosition: "before" | "on" | "after"): DropTarget => {
     const { key } = getOptions();
     return {
       type: "item",
-      key,
+      key: key as string | number,
       dropPosition,
     };
   };
@@ -91,11 +232,10 @@ export function createDroppableItem(
     e.stopPropagation();
 
     const opts = getOptions();
-    if (opts.isDisabled) return;
+    if (opts.isDisabled || opts.key == null) return;
 
     // Determine drop position based on cursor position
     const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-    const x = e.clientX - rect.x;
     const y = e.clientY - rect.y;
     const height = rect.height;
 
@@ -124,7 +264,7 @@ export function createDroppableItem(
     e.stopPropagation();
 
     const opts = getOptions();
-    if (opts.isDisabled) return;
+    if (opts.isDisabled || opts.key == null) return;
 
     // Update drop position based on cursor
     const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
@@ -191,9 +331,16 @@ export function createDroppableItem(
 
   const dropProps = createMemo(() => {
     const opts = getOptions();
+    // RAC `useVirtualDrop.ts:61-70` + `useDroppableItem.ts:90-94`.
+    const session = dragSession();
+    const ariaHidden = !session || isValidDropTarget() ? undefined : "true";
+    const virtualProps: JSX.HTMLAttributes<HTMLElement> = {
+      onClick: () => {},
+      "aria-hidden": ariaHidden,
+    };
 
-    if (opts.isDisabled) {
-      return {};
+    if (opts.isDisabled || opts.key == null) {
+      return virtualProps;
     }
 
     return {
@@ -201,6 +348,7 @@ export function createDroppableItem(
       onDragOver,
       onDragLeave,
       onDrop,
+      ...virtualProps,
     };
   });
 

package/src/dnd/index.ts

@@ -22,11 +22,13 @@ export {
   createDroppableCollection,
   setGlobalDropCollectionRef,
   getGlobalDropCollectionRef,
+  getDroppableCollectionRef,
 } from "./createDroppableCollection";
 
 // Item hooks
 export { createDraggableItem } from "./createDraggableItem";
 export { createDroppableItem } from "./createDroppableItem";
+export { createDropIndicator } from "./createDropIndicator";
 
 // Types
 export type { AriaDragOptions, DragAria, AriaDropOptions, DropAria } from "./types";
@@ -41,6 +43,7 @@ export type {
 } from "./createDroppableCollection";
 export type { DraggableItemOptions, DraggableItemAria } from "./createDraggableItem";
 export type { DroppableItemOptions, DroppableItemAria } from "./createDroppableItem";
+export type { DropIndicatorOptions, DropIndicatorAria } from "./createDropIndicator";
 
 // Keyboard drag session (reactive mirror of the DragManager singleton), consumed
 // by drop indicators to self-focus while a drag is active.

package/src/dnd/intl/index.ts

@@ -1,12 +1,51 @@
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/ar-AE.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/bg-BG.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/cs-CZ.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/da-DK.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/de-DE.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/el-GR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/en-US.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/es-ES.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/et-EE.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/fi-FI.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/fr-FR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/he-IL.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/hr-HR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/hu-HU.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/it-IT.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/ja-JP.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/ko-KR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/lt-LT.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/lv-LV.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/nb-NO.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/nl-NL.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/pl-PL.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/pt-BR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/pt-PT.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/ro-RO.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/ru-RU.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/sk-SK.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/sl-SI.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/sr-SP.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/sv-SE.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/tr-TR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/uk-UA.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/zh-CN.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/intl/dnd/zh-TW.json
+
+// Ported from @react-aria/dnd intl catalog.
+
 /**
  * Drag and Drop internationalization strings.
  *
  * Copied verbatim from @react-aria/dnd (react-aria 3.50 / RAC 1.19) intl/dnd.
- * All keys are plain ICU MessageFormat strings (no compiled announcement
- * functions), so the port's LocalizedStringFormatter consumes them directly.
+ * All keys are plain ICU MessageFormat strings; createStringFormatter compiles
+ * the ones with arguments on first use (i18n/compileIcu.ts), so the JSON
+ * stays byte-identical to upstream. LocalizedStringDictionary resolves the
+ * locale fallback chain (locale → language → sibling region → en-US).
  */
 
-import type { LocalizedString, LocalizedStrings } from "@internationalized/string";
+import type { LocalizedStrings } from "@internationalized/string";
 
 import arAE from "./ar-AE.json" with { type: "json" };
 import bgBG from "./bg-BG.json" with { type: "json" };
@@ -73,67 +112,39 @@ export type DndIntlStrings = {
   insertAfter: string;
 };
 
-// `@internationalized/string`'s LocalizedStringFormatter only interpolates
-// variables when a message is a FUNCTION — a plain ICU-template string is
-// returned verbatim (`{itemText}` and friends never substituted). Upstream
-// react-aria compiles its intl JSON into functions at build time
-// (`@internationalized/string-compiler`); this port ships the raw JSON, so we
-// compile the SIMPLE `{var}` placeholders here at module load (mirroring the
-// hand-authored function forms in the color intl catalog). ICU plural/select
-// messages (any `{…,…}` group, e.g. `dragSelectedItems`) are left as strings —
-// they need the full ICU engine and are unused by the single-key drag path.
-const SIMPLE_PLACEHOLDER = /\{(\w+)\}/g;
-function compileSimpleIcu(message: string): LocalizedString {
-  if (!SIMPLE_PLACEHOLDER.test(message)) return message;
-  // Reset lastIndex (test() with /g advances it) before the plural probe.
-  SIMPLE_PLACEHOLDER.lastIndex = 0;
-  // Any comma inside a placeholder means real ICU (plural/select) — leave as-is.
-  if (/\{[^{}]*,[^{}]*\}/.test(message)) return message;
-  return (args?: Record<string, unknown>): string =>
-    message.replace(SIMPLE_PLACEHOLDER, (_match, key: string) => String(args?.[key] ?? ""));
-}
-
-function compileLocale(strings: Record<string, string>): Record<string, LocalizedString> {
-  const out: Record<string, LocalizedString> = {};
-  for (const key of Object.keys(strings)) {
-    out[key] = compileSimpleIcu(strings[key]);
-  }
-  return out;
-}
-
-export const dndIntlStrings: LocalizedStrings<keyof DndIntlStrings, LocalizedString> = {
-  "ar-AE": compileLocale(arAE),
-  "bg-BG": compileLocale(bgBG),
-  "cs-CZ": compileLocale(csCZ),
-  "da-DK": compileLocale(daDK),
-  "de-DE": compileLocale(deDE),
-  "el-GR": compileLocale(elGR),
-  "en-US": compileLocale(enUS),
-  "es-ES": compileLocale(esES),
-  "et-EE": compileLocale(etEE),
-  "fi-FI": compileLocale(fiFI),
-  "fr-FR": compileLocale(frFR),
-  "he-IL": compileLocale(heIL),
-  "hr-HR": compileLocale(hrHR),
-  "hu-HU": compileLocale(huHU),
-  "it-IT": compileLocale(itIT),
-  "ja-JP": compileLocale(jaJP),
-  "ko-KR": compileLocale(koKR),
-  "lt-LT": compileLocale(ltLT),
-  "lv-LV": compileLocale(lvLV),
-  "nb-NO": compileLocale(nbNO),
-  "nl-NL": compileLocale(nlNL),
-  "pl-PL": compileLocale(plPL),
-  "pt-BR": compileLocale(ptBR),
-  "pt-PT": compileLocale(ptPT),
-  "ro-RO": compileLocale(roRO),
-  "ru-RU": compileLocale(ruRU),
-  "sk-SK": compileLocale(skSK),
-  "sl-SI": compileLocale(slSI),
-  "sr-SP": compileLocale(srSP),
-  "sv-SE": compileLocale(svSE),
-  "tr-TR": compileLocale(trTR),
-  "uk-UA": compileLocale(ukUA),
-  "zh-CN": compileLocale(zhCN),
-  "zh-TW": compileLocale(zhTW),
+export const dndIntlStrings: LocalizedStrings<keyof DndIntlStrings, string> = {
+  "ar-AE": arAE,
+  "bg-BG": bgBG,
+  "cs-CZ": csCZ,
+  "da-DK": daDK,
+  "de-DE": deDE,
+  "el-GR": elGR,
+  "en-US": enUS,
+  "es-ES": esES,
+  "et-EE": etEE,
+  "fi-FI": fiFI,
+  "fr-FR": frFR,
+  "he-IL": heIL,
+  "hr-HR": hrHR,
+  "hu-HU": huHU,
+  "it-IT": itIT,
+  "ja-JP": jaJP,
+  "ko-KR": koKR,
+  "lt-LT": ltLT,
+  "lv-LV": lvLV,
+  "nb-NO": nbNO,
+  "nl-NL": nlNL,
+  "pl-PL": plPL,
+  "pt-BR": ptBR,
+  "pt-PT": ptPT,
+  "ro-RO": roRO,
+  "ru-RU": ruRU,
+  "sk-SK": skSK,
+  "sl-SI": slSI,
+  "sr-SP": srSP,
+  "sv-SE": svSE,
+  "tr-TR": trTR,
+  "uk-UA": ukUA,
+  "zh-CN": zhCN,
+  "zh-TW": zhTW,
 };

package/src/dnd/types.ts

@@ -1,8 +1,27 @@
+/*
+ * 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-aria/src/dnd/useDrag.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/dnd/useDrop.ts
+
 /**
  * Drag and Drop ARIA types for solidaria.
+ *
+ * Ported from:
+ * - packages/react-aria/src/dnd/useDrag.ts
+ * - packages/react-aria/src/dnd/useDrop.ts
  */
 
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type {
   DragItem,
   DragStartEvent,

package/src/dnd/utils.ts

@@ -1,5 +1,24 @@
+/*
+ * 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-aria/src/dnd/constants.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/dnd/utils.ts
+
 /**
  * Drag and Drop utilities for solidaria.
+ *
+ * Ported from:
+ * - packages/react-aria/src/dnd/constants.ts
+ * - packages/react-aria/src/dnd/utils.ts
  */
 
 import type {