@proyecto-viviana/solidaria 0.1.3 → 0.2.0

package/src/dnd/createDrop.ts

@@ -1,321 +0,0 @@
-/**
- * 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

@@ -1,293 +0,0 @@
-/**
- * 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'];
-    },
-  };
-}