@proyecto-viviana/solidaria 0.2.2 → 0.2.4

package/src/dnd/createDrop.ts

@@ -0,0 +1,321 @@
+/**
+ * createDrop - ARIA hook for drop operations.
+ *
+ * Provides accessibility props for drop target elements with support for
+ * mouse, touch, and keyboard interactions.
+ */
+
+import { createMemo, type Accessor } from 'solid-js';
+import { createDropState } from '@proyecto-viviana/solid-stately';
+import type { AriaDropOptions, DropAria } from './types';
+import {
+  readFromDataTransfer,
+  DragTypesImpl,
+  DROP_OPERATION,
+  DROP_OPERATION_ALLOWED,
+  DROP_OPERATION_TO_DROP_EFFECT,
+  DROP_EFFECT_TO_DROP_OPERATION,
+  setGlobalDropEffect,
+  getGlobalAllowedDropOperations,
+} from './utils';
+import type { DropOperation } from '@proyecto-viviana/solid-stately';
+
+const DROP_ACTIVATE_TIMEOUT = 800;
+
+/**
+ * Creates ARIA props for a drop target element.
+ *
+ * @param props - Accessor returning drop options
+ * @returns Drop ARIA props and state
+ */
+export function createDrop(props: Accessor<AriaDropOptions>): DropAria {
+  const getProps = createMemo(() => props());
+
+  // Create drop state
+  const state = createDropState(() => ({
+    getDropOperation: getProps().getDropOperation,
+    onDropEnter: getProps().onDropEnter,
+    onDropMove: getProps().onDropMove,
+    onDropActivate: getProps().onDropActivate,
+    onDropExit: getProps().onDropExit,
+    onDrop: getProps().onDrop,
+    isDisabled: getProps().isDisabled,
+  }));
+
+  // Track internal state
+  let x = 0;
+  let y = 0;
+  let dragOverElements = new Set<Element>();
+  let dropEffect: DataTransfer['dropEffect'] = 'none';
+  let allowedOperations = DROP_OPERATION.all;
+  let dropActivateTimer: ReturnType<typeof setTimeout> | undefined;
+
+  const fireDropEnter = (e: DragEvent) => {
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    state.enterTarget(e.clientX - rect.x, e.clientY - rect.y);
+  };
+
+  const fireDropExit = (e: DragEvent) => {
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    state.exitTarget(e.clientX - rect.x, e.clientY - rect.y);
+  };
+
+  const getAllowedOperations = (e: DragEvent): number => {
+    let allowed = DROP_OPERATION_ALLOWED[e.dataTransfer?.effectAllowed ?? 'none'] ?? DROP_OPERATION.none;
+
+    // Use global allowed operations if set (for internal drags)
+    const globalAllowed = getGlobalAllowedDropOperations();
+    if (globalAllowed) {
+      allowed &= globalAllowed;
+    }
+
+    // Handle modifier keys for operation switching
+    let modifierAllowed = DROP_OPERATION.none;
+
+    // macOS: Alt=copy, Ctrl=link, Cmd=move
+    // Windows/Linux: Alt=link, Shift=move, Ctrl=copy
+    const isMac = typeof navigator !== 'undefined' && /mac/i.test(navigator.platform);
+
+    if (isMac) {
+      if (e.altKey) modifierAllowed |= DROP_OPERATION.copy;
+      if (e.ctrlKey) modifierAllowed |= DROP_OPERATION.link;
+      if (e.metaKey) modifierAllowed |= DROP_OPERATION.move;
+    } else {
+      if (e.altKey) modifierAllowed |= DROP_OPERATION.link;
+      if (e.shiftKey) modifierAllowed |= DROP_OPERATION.move;
+      if (e.ctrlKey) modifierAllowed |= DROP_OPERATION.copy;
+    }
+
+    if (modifierAllowed) {
+      return allowed & modifierAllowed;
+    }
+
+    return allowed;
+  };
+
+  const allowedOperationsToArray = (ops: number): DropOperation[] => {
+    const result: DropOperation[] = [];
+    if (ops & DROP_OPERATION.move) result.push('move');
+    if (ops & DROP_OPERATION.copy) result.push('copy');
+    if (ops & DROP_OPERATION.link) result.push('link');
+    return result;
+  };
+
+  const getDropOperationForAllowed = (allowed: number, operation: DropOperation): DropOperation => {
+    const op = DROP_OPERATION[operation];
+    return allowed & op ? operation : 'cancel';
+  };
+
+  const onDragEnter = (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    dragOverElements.add(e.target as Element);
+    if (dragOverElements.size > 1) {
+      return;
+    }
+
+    const p = getProps();
+    const allowedOpsBits = getAllowedOperations(e);
+    const allowedOps = allowedOperationsToArray(allowedOpsBits);
+    let dropOp: DropOperation = allowedOps[0] ?? 'cancel';
+
+    if (typeof p.getDropOperation === 'function' && e.dataTransfer) {
+      const types = new DragTypesImpl(e.dataTransfer);
+      dropOp = getDropOperationForAllowed(
+        allowedOpsBits,
+        p.getDropOperation(types, allowedOps)
+      );
+    }
+
+    if (typeof p.getDropOperationForPoint === 'function' && e.dataTransfer) {
+      const types = new DragTypesImpl(e.dataTransfer);
+      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+      dropOp = getDropOperationForAllowed(
+        allowedOpsBits,
+        p.getDropOperationForPoint(types, allowedOps, e.clientX - rect.x, e.clientY - rect.y)
+      );
+    }
+
+    x = e.clientX;
+    y = e.clientY;
+    allowedOperations = allowedOpsBits;
+    dropEffect = (DROP_OPERATION_TO_DROP_EFFECT[dropOp] || 'none') as DataTransfer['dropEffect'];
+
+    if (e.dataTransfer) {
+      e.dataTransfer.dropEffect = dropEffect;
+    }
+
+    if (dropOp !== 'cancel') {
+      fireDropEnter(e);
+    }
+  };
+
+  const onDragOver = (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const allowedOpsBits = getAllowedOperations(e);
+
+    // Skip if position and operations haven't changed
+    if (e.clientX === x && e.clientY === y && allowedOpsBits === allowedOperations) {
+      if (e.dataTransfer) {
+        e.dataTransfer.dropEffect = dropEffect;
+      }
+      return;
+    }
+
+    x = e.clientX;
+    y = e.clientY;
+
+    const prevDropEffect = dropEffect;
+    const p = getProps();
+
+    // Update drop effect if allowed operations changed
+    if (allowedOpsBits !== allowedOperations) {
+      const allowedOps = allowedOperationsToArray(allowedOpsBits);
+      let dropOp: DropOperation = allowedOps[0] ?? 'cancel';
+
+      if (typeof p.getDropOperation === 'function' && e.dataTransfer) {
+        const types = new DragTypesImpl(e.dataTransfer);
+        dropOp = getDropOperationForAllowed(
+          allowedOpsBits,
+          p.getDropOperation(types, allowedOps)
+        );
+      }
+      dropEffect = (DROP_OPERATION_TO_DROP_EFFECT[dropOp] || 'none') as DataTransfer['dropEffect'];
+    }
+
+    // Check point-specific operation
+    if (typeof p.getDropOperationForPoint === 'function' && e.dataTransfer) {
+      const types = new DragTypesImpl(e.dataTransfer);
+      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+      const dropOp = getDropOperationForAllowed(
+        allowedOpsBits,
+        p.getDropOperationForPoint(types, allowedOperationsToArray(allowedOpsBits), x - rect.x, y - rect.y)
+      );
+      dropEffect = (DROP_OPERATION_TO_DROP_EFFECT[dropOp] || 'none') as DataTransfer['dropEffect'];
+    }
+
+    allowedOperations = allowedOpsBits;
+
+    if (e.dataTransfer) {
+      e.dataTransfer.dropEffect = dropEffect;
+    }
+
+    // Fire enter/exit events on drop effect change
+    if (dropEffect === 'none' && prevDropEffect !== 'none') {
+      fireDropExit(e);
+    } else if (dropEffect !== 'none' && prevDropEffect === 'none') {
+      fireDropEnter(e);
+    }
+
+    // Fire move event
+    if (dropEffect !== 'none') {
+      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+      state.moveInTarget(x - rect.x, y - rect.y);
+    }
+
+    // Handle drop activate timer
+    clearTimeout(dropActivateTimer);
+
+    if (typeof p.onDropActivate === 'function' && dropEffect !== 'none') {
+      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+      const activateX = x - rect.x;
+      const activateY = y - rect.y;
+      dropActivateTimer = setTimeout(() => {
+        state.activateTarget(activateX, activateY);
+      }, DROP_ACTIVATE_TIMEOUT);
+    }
+  };
+
+  const onDragLeave = (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // Track drag over elements (WebKit workaround for relatedTarget being null)
+    dragOverElements.delete(e.target as Element);
+
+    // Remove elements no longer in DOM
+    for (const element of dragOverElements) {
+      if (!e.currentTarget || !(e.currentTarget as Element).contains(element)) {
+        dragOverElements.delete(element);
+      }
+    }
+
+    if (dragOverElements.size > 0) {
+      return;
+    }
+
+    if (dropEffect !== 'none') {
+      fireDropExit(e);
+    }
+
+    clearTimeout(dropActivateTimer);
+  };
+
+  const onDropHandler = (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // Track drop effect globally for Chrome Android
+    setGlobalDropEffect(dropEffect);
+
+    const p = getProps();
+    if (typeof p.onDrop === 'function' && e.dataTransfer) {
+      const items = readFromDataTransfer(e.dataTransfer);
+      const dropOperation = DROP_EFFECT_TO_DROP_OPERATION[dropEffect];
+      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+
+      state.drop(e.clientX - rect.x, e.clientY - rect.y, items, dropOperation);
+    }
+
+    dragOverElements.clear();
+    fireDropExit(e);
+    clearTimeout(dropActivateTimer);
+  };
+
+  const dropProps = createMemo(() => {
+    const p = getProps();
+
+    if (p.isDisabled) {
+      return {};
+    }
+
+    const baseProps: Record<string, unknown> = {
+      onDragEnter,
+      onDragOver,
+      onDragLeave,
+      onDrop: onDropHandler,
+    };
+
+    return baseProps;
+  });
+
+  const dropButtonProps = createMemo(() => {
+    const p = getProps();
+
+    if (p.isDisabled) {
+      return {
+        disabled: true,
+      };
+    }
+
+    return {
+      type: 'button' as const,
+      'aria-label': 'Drop',
+    };
+  });
+
+  return {
+    get dropProps() {
+      return dropProps() as DropAria['dropProps'];
+    },
+    get isDropTarget() {
+      return state.isDropTarget;
+    },
+    get dropButtonProps() {
+      return dropButtonProps() as DropAria['dropButtonProps'];
+    },
+  };
+}

package/src/dnd/createDroppableCollection.ts

@@ -0,0 +1,293 @@
+/**
+ * createDroppableCollection - ARIA hook for droppable collection targets.
+ *
+ * Provides accessibility support for dropping items into a collection
+ * component like ListBox, GridList, or Table.
+ */
+
+import { createMemo, onCleanup, type Accessor } from 'solid-js';
+import type { JSX } from 'solid-js';
+import type {
+  DroppableCollectionState,
+  DropTarget,
+  DropOperation,
+  DropItem,
+  DragTypes,
+} from '@proyecto-viviana/solid-stately';
+import { createDrop } from './createDrop';
+import { getGlobalDraggingCollectionRef } from './createDraggableCollection';
+
+// Global state for tracking the drop collection
+let globalDropCollectionRef: HTMLElement | null = null;
+
+export function setGlobalDropCollectionRef(ref: HTMLElement | null): void {
+  globalDropCollectionRef = ref;
+}
+
+export function getGlobalDropCollectionRef(): HTMLElement | null {
+  return globalDropCollectionRef;
+}
+
+export interface DropTargetDelegate {
+  /**
+   * Returns a drop target from a point within the collection.
+   */
+  getDropTargetFromPoint(
+    x: number,
+    y: number,
+    isValidDropTarget: (target: DropTarget) => boolean
+  ): DropTarget | null;
+}
+
+export interface DroppableCollectionOptions {
+  /** Reference to the collection element. */
+  ref: Accessor<HTMLElement | null>;
+  /** A delegate that provides drop targets for pointer coordinates. */
+  dropTargetDelegate: DropTargetDelegate;
+  /** Handler called when items are dropped to be inserted. */
+  onInsert?: (e: {
+    items: DropItem[];
+    target: DropTarget;
+    dropOperation: DropOperation;
+  }) => void;
+  /** Handler called when items are dropped on the root. */
+  onRootDrop?: (e: { items: DropItem[]; dropOperation: DropOperation }) => void;
+  /** Handler called when items are dropped on an item. */
+  onItemDrop?: (e: {
+    items: DropItem[];
+    target: DropTarget;
+    dropOperation: DropOperation;
+    isInternal: boolean;
+  }) => void;
+  /** Handler called when items are reordered within the collection. */
+  onReorder?: (e: {
+    keys: Set<string | number>;
+    target: DropTarget;
+    dropOperation: DropOperation;
+  }) => void;
+  /** Handler called when items are moved within/between collections. */
+  onMove?: (e: {
+    keys: Set<string | number>;
+    target: DropTarget;
+    dropOperation: DropOperation;
+  }) => void;
+  /** Handler called when the drop target is activated (held over). */
+  onDropActivate?: (e: { target: DropTarget; x: number; y: number }) => void;
+  /** Whether the collection is disabled for dropping. */
+  isDisabled?: boolean;
+  /** Accepted drag types. 'all' accepts any type. */
+  acceptedDragTypes?: 'all' | string[];
+}
+
+export interface DroppableCollectionAria {
+  /** Props to spread on the collection element. */
+  collectionProps: JSX.HTMLAttributes<HTMLElement>;
+}
+
+/**
+ * Creates ARIA support for a droppable collection.
+ *
+ * @param options - Collection options accessor
+ * @param state - Droppable collection state
+ * @returns Droppable collection ARIA result
+ */
+export function createDroppableCollection(
+  options: Accessor<DroppableCollectionOptions>,
+  state: DroppableCollectionState
+): DroppableCollectionAria {
+  const getOptions = createMemo(() => options());
+
+  // Track the next target during drag operations
+  let nextTarget: DropTarget | null = null;
+  let currentDropOperation: DropOperation | null = null;
+
+  const isInternalDropOperation = (): boolean => {
+    const ref = getOptions().ref();
+    const draggingRef = getGlobalDraggingCollectionRef();
+    return ref !== null && draggingRef === ref;
+  };
+
+  const getDropOperationForTarget = (
+    target: DropTarget,
+    types: DragTypes,
+    allowedOperations: DropOperation[]
+  ): DropOperation => {
+    return state.getDropOperation(target, types, allowedOperations);
+  };
+
+  // Create base drop behavior
+  const drop = createDrop(() => ({
+    isDisabled: getOptions().isDisabled,
+    getDropOperationForPoint: (types, allowedOperations, x, y) => {
+      const opts = getOptions();
+      const isValidDropTarget = (target: DropTarget) =>
+        getDropOperationForTarget(target, types, allowedOperations) !== 'cancel';
+
+      const target = opts.dropTargetDelegate.getDropTargetFromPoint(
+        x,
+        y,
+        isValidDropTarget
+      );
+
+      if (!target) {
+        currentDropOperation = 'cancel';
+        nextTarget = null;
+        return 'cancel';
+      }
+
+      currentDropOperation = getDropOperationForTarget(
+        target,
+        types,
+        allowedOperations
+      );
+
+      // If target doesn't accept, try root
+      if (currentDropOperation === 'cancel') {
+        const rootTarget: DropTarget = { type: 'root' };
+        const rootOp = getDropOperationForTarget(
+          rootTarget,
+          types,
+          allowedOperations
+        );
+        if (rootOp !== 'cancel') {
+          nextTarget = rootTarget;
+          currentDropOperation = rootOp;
+          return currentDropOperation;
+        }
+      }
+
+      // Update drop collection ref
+      const ref = opts.ref();
+      if (target && currentDropOperation !== 'cancel' && ref !== globalDropCollectionRef) {
+        setGlobalDropCollectionRef(ref);
+      }
+
+      nextTarget = currentDropOperation === 'cancel' ? null : target;
+      return currentDropOperation;
+    },
+    onDropEnter: () => {
+      if (nextTarget) {
+        state.setTarget(nextTarget);
+      }
+    },
+    onDropMove: () => {
+      if (nextTarget) {
+        state.setTarget(nextTarget);
+      }
+    },
+    onDropExit: () => {
+      setGlobalDropCollectionRef(null);
+      state.setTarget(null);
+    },
+    onDropActivate: (e) => {
+      const opts = getOptions();
+      if (state.target?.type === 'item' && typeof opts.onDropActivate === 'function') {
+        opts.onDropActivate({
+          target: state.target,
+          x: e.x,
+          y: e.y,
+        });
+      }
+    },
+    onDrop: (e) => {
+      const opts = getOptions();
+      setGlobalDropCollectionRef(opts.ref());
+
+      if (state.target) {
+        handleDrop(e.items, state.target, e.dropOperation);
+      }
+    },
+  }));
+
+  const handleDrop = async (
+    items: DropItem[],
+    target: DropTarget,
+    dropOperation: DropOperation
+  ) => {
+    const opts = getOptions();
+    const isInternal = isInternalDropOperation();
+
+    // Filter items by accepted types
+    let filteredItems = items;
+    const acceptedTypes = opts.acceptedDragTypes;
+    if (acceptedTypes && acceptedTypes !== 'all') {
+      filteredItems = items.filter((item) => {
+        const itemTypes =
+          item.kind === 'file'
+            ? new Set([item.type])
+            : item.kind === 'text'
+              ? item.types
+              : new Set<string>();
+        return acceptedTypes.some((type) => itemTypes.has(type));
+      });
+    }
+
+    if (filteredItems.length === 0) return;
+
+    // Call appropriate handlers based on target type
+    if (target.type === 'root' && opts.onRootDrop) {
+      await opts.onRootDrop({ items: filteredItems, dropOperation });
+    }
+
+    if (target.type === 'item') {
+      if (target.dropPosition === 'on' && opts.onItemDrop) {
+        await opts.onItemDrop({
+          items: filteredItems,
+          target,
+          dropOperation,
+          isInternal,
+        });
+      }
+
+      // Handle move for internal operations
+      if (opts.onMove && isInternal) {
+        // Would get dragging keys from global state
+        await opts.onMove({
+          keys: new Set(),
+          target,
+          dropOperation,
+        });
+      }
+
+      if (target.dropPosition !== 'on') {
+        if (!isInternal && opts.onInsert) {
+          await opts.onInsert({
+            items: filteredItems,
+            target,
+            dropOperation,
+          });
+        }
+
+        if (isInternal && opts.onReorder) {
+          // Would get dragging keys from global state
+          await opts.onReorder({
+            keys: new Set(),
+            target,
+            dropOperation,
+          });
+        }
+      }
+    }
+  };
+
+  // Clean up on unmount
+  onCleanup(() => {
+    const ref = getOptions().ref();
+    if (globalDropCollectionRef === ref) {
+      setGlobalDropCollectionRef(null);
+    }
+  });
+
+  const collectionProps = createMemo(() => {
+    const baseDropProps = drop.dropProps;
+    return {
+      ...baseDropProps,
+    };
+  });
+
+  return {
+    get collectionProps() {
+      return collectionProps() as DroppableCollectionAria['collectionProps'];
+    },
+  };
+}