@proyecto-viviana/solidaria 0.2.5 → 0.3.0

package/src/dnd/createDrag.ts

@@ -1,209 +1,218 @@
-/**
- * createDrag - ARIA hook for drag operations.
- *
- * Provides accessibility props for draggable elements with support for
- * mouse, touch, and keyboard interactions.
- */
-
-import { createMemo, type Accessor } from 'solid-js';
-import { createDragState } from '@proyecto-viviana/solid-stately';
-import type { AriaDragOptions, DragAria } from './types';
-import {
-  writeToDataTransfer,
-  DROP_OPERATION,
-  EFFECT_ALLOWED,
-  DROP_EFFECT_TO_DROP_OPERATION,
-  setGlobalAllowedDropOperations,
-  setGlobalDropEffect,
-  getGlobalDropEffect,
-} from './utils';
-
-/**
- * Creates ARIA props for a draggable element.
- *
- * @param props - Accessor returning drag options
- * @returns Drag ARIA props and state
- */
-export function createDrag(props: Accessor<AriaDragOptions>): DragAria {
-  const getProps = createMemo(() => props());
-
-  // Create drag state
-  const state = createDragState(() => ({
-    getItems: getProps().getItems,
-    getAllowedDropOperations: getProps().getAllowedDropOperations,
-    onDragStart: getProps().onDragStart,
-    onDragMove: getProps().onDragMove,
-    onDragEnd: getProps().onDragEnd,
-    isDisabled: getProps().isDisabled,
-    hasDragButton: getProps().hasDragButton,
-    preview: getProps().preview,
-  }));
-
-  // Track position for drag move
-  let lastX = 0;
-  let lastY = 0;
-
-  const onDragStart = (e: DragEvent) => {
-    if (e.defaultPrevented) return;
-    e.stopPropagation();
-
-    const p = getProps();
-
-    // Call state handler
-    state.startDrag(e.clientX, e.clientY);
-
-    // Get items and write to data transfer
-    const items = state.getItems();
-    e.dataTransfer?.clearData?.();
-    if (e.dataTransfer) {
-      writeToDataTransfer(e.dataTransfer, items);
-    }
-
-    // Set allowed drop operations
-    let allowed = DROP_OPERATION.all;
-    const allowedOps = state.getAllowedDropOperations();
-    if (allowedOps.length > 0) {
-      allowed = DROP_OPERATION.none;
-      for (const op of allowedOps) {
-        allowed |= DROP_OPERATION[op] || DROP_OPERATION.none;
-      }
-    }
-
-    setGlobalAllowedDropOperations(allowed);
-    const effectAllowed = EFFECT_ALLOWED[allowed] || 'none';
-    if (e.dataTransfer) {
-      e.dataTransfer.effectAllowed =
-        (effectAllowed === 'cancel' ? 'none' : effectAllowed) as DataTransfer['effectAllowed'];
-    }
-
-    // Handle custom preview
-    if (typeof p.preview?.current === 'function' && e.dataTransfer) {
-      p.preview.current(items, (node, userX, userY) => {
-        if (!node || !e.dataTransfer) return;
-
-        const size = node.getBoundingClientRect();
-        const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-        let defaultX = e.clientX - rect.x;
-        let defaultY = e.clientY - rect.y;
-
-        if (defaultX > size.width || defaultY > size.height) {
-          defaultX = size.width / 2;
-          defaultY = size.height / 2;
-        }
-
-        let offsetX = typeof userX === 'number' ? userX : defaultX;
-        let offsetY = typeof userY === 'number' ? userY : defaultY;
-
-        offsetX = Math.max(0, Math.min(offsetX, size.width));
-        offsetY = Math.max(0, Math.min(offsetY, size.height));
-
-        e.dataTransfer.setDragImage(node, offsetX, offsetY);
-      });
-    }
-
-    lastX = e.clientX;
-    lastY = e.clientY;
-  };
-
-  const onDrag = (e: DragEvent) => {
-    e.stopPropagation();
-
-    if (e.clientX === lastX && e.clientY === lastY) {
-      return;
-    }
-
-    state.moveDrag(e.clientX, e.clientY);
-
-    lastX = e.clientX;
-    lastY = e.clientY;
-  };
-
-  const onDragEnd = (e: DragEvent) => {
-    e.stopPropagation();
-
-    let dropEffect: string = e.dataTransfer?.dropEffect ?? 'none';
-    // Chrome Android fix - use global drop effect
-    if (getGlobalDropEffect()) {
-      dropEffect = getGlobalDropEffect()!;
-    }
-
-    const dropOperation = DROP_EFFECT_TO_DROP_OPERATION[dropEffect];
-    state.endDrag(e.clientX, e.clientY, dropOperation);
-
-    setGlobalAllowedDropOperations(DROP_OPERATION.none);
-    setGlobalDropEffect(undefined);
-  };
-
-  // Keyboard/screen reader drag initiation
-  const onKeyDown = (e: KeyboardEvent) => {
-    if (e.key === 'Enter' && e.target === e.currentTarget) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  };
-
-  const onKeyUp = (e: KeyboardEvent) => {
-    if (e.key === 'Enter' && e.target === e.currentTarget) {
-      e.preventDefault();
-      e.stopPropagation();
-      // Would initiate keyboard-based drag mode
-      // This is a simplified version - full implementation needs DragManager
-      const rect = (e.target as HTMLElement).getBoundingClientRect();
-      state.startDrag(rect.x + rect.width / 2, rect.y + rect.height / 2);
-    }
-  };
-
-  const dragProps = createMemo(() => {
-    const p = getProps();
-
-    if (p.isDisabled) {
-      return {
-        draggable: false as const,
-      };
-    }
-
-    const baseProps: Record<string, unknown> = {
-      draggable: true as const,
-      onDragStart,
-      onDrag,
-      onDragEnd,
-    };
-
-    // Add keyboard handlers if no separate drag button
-    if (!p.hasDragButton) {
-      baseProps.onKeyDown = onKeyDown;
-      baseProps.onKeyUp = onKeyUp;
-    }
-
-    return baseProps;
-  });
-
-  const dragButtonProps = createMemo(() => {
-    const p = getProps();
-
-    if (p.isDisabled) {
-      return {
-        disabled: true,
-      };
-    }
-
-    return {
-      type: 'button' as const,
-      'aria-label': 'Drag',
-      onKeyDown,
-      onKeyUp,
-    };
-  });
-
-  return {
-    get dragProps() {
-      return dragProps() as DragAria['dragProps'];
-    },
-    get dragButtonProps() {
-      return dragButtonProps() as DragAria['dragButtonProps'];
-    },
-    get isDragging() {
-      return state.isDragging;
-    },
-  };
-}
+/**
+ * createDrag - ARIA hook for drag operations.
+ *
+ * Provides accessibility props for draggable elements with support for
+ * mouse, touch, and keyboard interactions.
+ */
+
+import { createMemo, type Accessor } from "solid-js";
+import { createDragState } from "@proyecto-viviana/solid-stately";
+import type { AriaDragOptions, DragAria } from "./types";
+import {
+  getTypes,
+  writeToDataTransfer,
+  DROP_OPERATION,
+  EFFECT_ALLOWED,
+  DROP_EFFECT_TO_DROP_OPERATION,
+  setGlobalAllowedDropOperations,
+  setGlobalDropEffect,
+  getGlobalDropEffect,
+} from "./utils";
+import { setGlobalDraggingTypes } from "./createDraggableCollection";
+
+/**
+ * Creates ARIA props for a draggable element.
+ *
+ * @param props - Accessor returning drag options
+ * @returns Drag ARIA props and state
+ */
+export function createDrag(props: Accessor<AriaDragOptions>): DragAria {
+  const getProps = createMemo(() => props());
+
+  const state = createDragState(() => ({
+    getItems: getProps().getItems,
+    getAllowedDropOperations: getProps().getAllowedDropOperations,
+    onDragStart: getProps().onDragStart,
+    onDragMove: getProps().onDragMove,
+    onDragEnd: getProps().onDragEnd,
+    isDisabled: getProps().isDisabled,
+    hasDragButton: getProps().hasDragButton,
+    preview: getProps().preview,
+  }));
+
+  let lastX = 0;
+  let lastY = 0;
+
+  const onDragStart = (e: DragEvent) => {
+    if (e.defaultPrevented) return;
+    e.stopPropagation();
+
+    const p = getProps();
+
+    state.startDrag(e.clientX, e.clientY);
+
+    const items = state.getItems();
+    setGlobalDraggingTypes(getTypes(items));
+    e.dataTransfer?.clearData?.();
+    if (e.dataTransfer) {
+      writeToDataTransfer(e.dataTransfer, items);
+    }
+
+    let allowed = DROP_OPERATION.all;
+    const allowedOps = state.getAllowedDropOperations();
+    if (allowedOps.length > 0) {
+      allowed = DROP_OPERATION.none;
+      for (const op of allowedOps) {
+        allowed |= DROP_OPERATION[op] || DROP_OPERATION.none;
+      }
+    }
+
+    setGlobalAllowedDropOperations(allowed);
+    const effectAllowed = EFFECT_ALLOWED[allowed] || "none";
+    if (e.dataTransfer) {
+      e.dataTransfer.effectAllowed = (
+        effectAllowed === "cancel" ? "none" : effectAllowed
+      ) as DataTransfer["effectAllowed"];
+    }
+
+    if (typeof p.preview?.current === "function" && e.dataTransfer) {
+      p.preview.current(items, (node, userX, userY) => {
+        if (!node || !e.dataTransfer) return;
+
+        const size = node.getBoundingClientRect();
+        const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+        let defaultX = e.clientX - rect.x;
+        let defaultY = e.clientY - rect.y;
+
+        if (defaultX > size.width || defaultY > size.height) {
+          defaultX = size.width / 2;
+          defaultY = size.height / 2;
+        }
+
+        let offsetX = typeof userX === "number" ? userX : defaultX;
+        let offsetY = typeof userY === "number" ? userY : defaultY;
+
+        offsetX = Math.max(0, Math.min(offsetX, size.width));
+        offsetY = Math.max(0, Math.min(offsetY, size.height));
+
+        e.dataTransfer.setDragImage(node, offsetX, offsetY);
+      });
+    }
+
+    lastX = e.clientX;
+    lastY = e.clientY;
+  };
+
+  const onDrag = (e: DragEvent) => {
+    e.stopPropagation();
+
+    if (e.clientX === lastX && e.clientY === lastY) {
+      return;
+    }
+
+    state.moveDrag(e.clientX, e.clientY);
+
+    lastX = e.clientX;
+    lastY = e.clientY;
+  };
+
+  const onDragEnd = (e: DragEvent) => {
+    e.stopPropagation();
+
+    let dropEffect: string = e.dataTransfer?.dropEffect ?? "none";
+    // Chrome Android fix - use global drop effect
+    if (getGlobalDropEffect()) {
+      dropEffect = getGlobalDropEffect()!;
+    }
+
+    const dropOperation = DROP_EFFECT_TO_DROP_OPERATION[dropEffect];
+    state.endDrag(e.clientX, e.clientY, dropOperation);
+
+    setGlobalAllowedDropOperations(DROP_OPERATION.none);
+    setGlobalDraggingTypes(new Set());
+    setGlobalDropEffect(undefined);
+  };
+
+  // Keyboard/screen reader drag initiation
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Enter" && e.target === e.currentTarget) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+
+  const onKeyUp = (e: KeyboardEvent) => {
+    if (e.key === "Enter" && e.target === e.currentTarget) {
+      e.preventDefault();
+      e.stopPropagation();
+      // Would initiate keyboard-based drag mode
+      // This is a simplified version - full implementation needs DragManager
+      const rect = (e.target as HTMLElement).getBoundingClientRect();
+      state.startDrag(rect.x + rect.width / 2, rect.y + rect.height / 2);
+      const items = state.getItems();
+      setGlobalDraggingTypes(getTypes(items));
+      let allowed = DROP_OPERATION.all;
+      const allowedOps = state.getAllowedDropOperations();
+      if (allowedOps.length > 0) {
+        allowed = DROP_OPERATION.none;
+        for (const op of allowedOps) {
+          allowed |= DROP_OPERATION[op] || DROP_OPERATION.none;
+        }
+      }
+      setGlobalAllowedDropOperations(allowed);
+    }
+  };
+
+  const dragProps = createMemo(() => {
+    const p = getProps();
+
+    if (p.isDisabled) {
+      return {
+        draggable: false as const,
+      };
+    }
+
+    const baseProps: Record<string, unknown> = {
+      draggable: true as const,
+      onDragStart,
+      onDrag,
+      onDragEnd,
+    };
+
+    if (!p.hasDragButton) {
+      baseProps.onKeyDown = onKeyDown;
+      baseProps.onKeyUp = onKeyUp;
+    }
+
+    return baseProps;
+  });
+
+  const dragButtonProps = createMemo(() => {
+    const p = getProps();
+
+    if (p.isDisabled) {
+      return {
+        disabled: true,
+      };
+    }
+
+    return {
+      type: "button" as const,
+      "aria-label": "Drag",
+      onKeyDown,
+      onKeyUp,
+    };
+  });
+
+  return {
+    get dragProps() {
+      return dragProps() as DragAria["dragProps"];
+    },
+    get dragButtonProps() {
+      return dragButtonProps() as DragAria["dragButtonProps"];
+    },
+    get isDragging() {
+      return state.isDragging;
+    },
+  };
+}

package/src/dnd/createDraggableCollection.ts

@@ -1,63 +1,96 @@
-/**
- * createDraggableCollection - ARIA hook for draggable collection items.
- *
- * Provides accessibility support for dragging items from a collection
- * component like ListBox, GridList, or Table.
- */
-
-import { createMemo, createEffect, onCleanup, type Accessor } from 'solid-js';
-import type { DraggableCollectionState } from '@proyecto-viviana/solid-stately';
-
-// Global state for tracking the dragging collection
-let globalDraggingCollectionRef: HTMLElement | null = null;
-
-export function setGlobalDraggingCollectionRef(ref: HTMLElement | null): void {
-  globalDraggingCollectionRef = ref;
-}
-
-export function getGlobalDraggingCollectionRef(): HTMLElement | null {
-  return globalDraggingCollectionRef;
-}
-
-export interface DraggableCollectionOptions {
-  /** Reference to the collection element. */
-  ref: Accessor<HTMLElement | null>;
-}
-
-export interface DraggableCollectionAria {
-  /** The draggable collection state. */
-  state: DraggableCollectionState;
-}
-
-/**
- * Creates ARIA support for a draggable collection.
- *
- * @param _options - Collection options
- * @param state - Draggable collection state
- * @returns Draggable collection ARIA result
- */
-export function createDraggableCollection(
-  options: DraggableCollectionOptions,
-  state: DraggableCollectionState
-): DraggableCollectionAria {
-  const ref = createMemo(() => options.ref());
-
-  // Track dragging state globally
-  createEffect(() => {
-    const currentRef = ref();
-    if (state.draggingKeys.size > 0 && globalDraggingCollectionRef !== currentRef) {
-      setGlobalDraggingCollectionRef(currentRef);
-    }
-  });
-
-  // Clean up on unmount
-  onCleanup(() => {
-    if (globalDraggingCollectionRef === ref()) {
-      setGlobalDraggingCollectionRef(null);
-    }
-  });
-
-  return {
-    state,
-  };
-}
+/**
+ * createDraggableCollection - ARIA hook for draggable collection items.
+ *
+ * Provides accessibility support for dragging items from a collection
+ * component like ListBox, GridList, or Table.
+ */
+
+import { createMemo, createEffect, onCleanup, type Accessor } from "solid-js";
+import type { DraggableCollectionState } from "@proyecto-viviana/solid-stately";
+import { getTypes } from "./utils";
+
+// Global state for tracking the dragging collection
+let globalDraggingCollectionRef: HTMLElement | null = null;
+let globalDraggingKeys: Set<string | number> = new Set();
+let globalDraggingTypes: Set<string> = new Set();
+
+export function setGlobalDraggingCollectionRef(ref: HTMLElement | null): void {
+  globalDraggingCollectionRef = ref;
+}
+
+export function getGlobalDraggingCollectionRef(): HTMLElement | null {
+  return globalDraggingCollectionRef;
+}
+
+export function setGlobalDraggingKeys(keys: Set<string | number>): void {
+  globalDraggingKeys = new Set(keys);
+}
+
+export function getGlobalDraggingKeys(): Set<string | number> {
+  return new Set(globalDraggingKeys);
+}
+
+export function setGlobalDraggingTypes(types: Set<string>): void {
+  globalDraggingTypes = new Set(types);
+}
+
+export function getGlobalDraggingTypes(): Set<string> {
+  return new Set(globalDraggingTypes);
+}
+
+export interface DraggableCollectionOptions {
+  /** Reference to the collection element. */
+  ref: Accessor<HTMLElement | null>;
+}
+
+export interface DraggableCollectionAria {
+  /** The draggable collection state. */
+  state: DraggableCollectionState;
+}
+
+/**
+ * Creates ARIA support for a draggable collection.
+ *
+ * @param _options - Collection options
+ * @param state - Draggable collection state
+ * @returns Draggable collection ARIA result
+ */
+export function createDraggableCollection(
+  options: DraggableCollectionOptions,
+  state: DraggableCollectionState,
+): DraggableCollectionAria {
+  const ref = createMemo(() => options.ref());
+
+  // Track dragging state globally
+  createEffect(() => {
+    const currentRef = ref();
+    if (state.draggingKeys.size > 0) {
+      if (globalDraggingCollectionRef !== currentRef) {
+        setGlobalDraggingCollectionRef(currentRef);
+      }
+      setGlobalDraggingKeys(state.draggingKeys);
+      setGlobalDraggingTypes(getTypes(state.getItems(state.draggingKeys)));
+      return;
+    }
+
+    // Clear global drag tracking when this collection is no longer dragging.
+    if (globalDraggingCollectionRef === currentRef) {
+      setGlobalDraggingCollectionRef(null);
+      setGlobalDraggingKeys(new Set());
+      setGlobalDraggingTypes(new Set());
+    }
+  });
+
+  // Clean up on unmount
+  onCleanup(() => {
+    if (globalDraggingCollectionRef === ref()) {
+      setGlobalDraggingCollectionRef(null);
+      setGlobalDraggingKeys(new Set());
+      setGlobalDraggingTypes(new Set());
+    }
+  });
+
+  return {
+    state,
+  };
+}