@proyecto-viviana/solidaria 0.1.3 → 0.2.0

package/src/dnd/createDrag.ts

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

package/src/dnd/createDraggableCollection.ts

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

package/src/dnd/createDraggableItem.ts

@@ -1,243 +0,0 @@
-/**
- * createDraggableItem - ARIA hook for draggable items within a collection.
- *
- * Provides accessibility props for items that can be dragged from a collection.
- */
-
-import { createMemo, type Accessor } from 'solid-js';
-import type { JSX } from 'solid-js';
-import type {
-  DraggableCollectionState,
-  DragPreviewRenderer,
-} from '@proyecto-viviana/solid-stately';
-import {
-  writeToDataTransfer,
-  DROP_OPERATION,
-  EFFECT_ALLOWED,
-  DROP_EFFECT_TO_DROP_OPERATION,
-  setGlobalAllowedDropOperations,
-  setGlobalDropEffect,
-  getGlobalDropEffect,
-} from './utils';
-
-export interface DraggableItemOptions {
-  /** The unique key of the item. */
-  key: string | number;
-  /** Whether the item has a separate drag button affordance. */
-  hasDragButton?: boolean;
-  /** Whether this item is disabled for dragging. */
-  isDisabled?: boolean;
-  /** Preview renderer function ref. */
-  preview?: { current: DragPreviewRenderer | null };
-}
-
-export interface DraggableItemAria {
-  /** Props for the draggable item element. */
-  dragProps: JSX.HTMLAttributes<HTMLElement>;
-  /** Props for the explicit drag button affordance, if any. */
-  dragButtonProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-  /** Whether the item is currently being dragged. */
-  isDragging: boolean;
-}
-
-/**
- * Creates ARIA props for a draggable item within a collection.
- *
- * @param options - Accessor returning item options
- * @param state - Draggable collection state
- * @returns Draggable item ARIA props
- */
-export function createDraggableItem(
-  options: Accessor<DraggableItemOptions>,
-  state: DraggableCollectionState
-): DraggableItemAria {
-  const getOptions = createMemo(() => options());
-
-  // Track position for drag move
-  let lastX = 0;
-  let lastY = 0;
-
-  const isDragging = createMemo(() => {
-    const key = getOptions().key;
-    return state.draggingKeys.has(key);
-  });
-
-  const getKeysForDrag = (): Set<string | number> => {
-    const { key } = getOptions();
-    // If the key is not selected, only drag that item
-    // If it is selected, drag all selected items
-    // For now, just return the single key
-    return new Set([key]);
-  };
-
-  const onDragStart = (e: DragEvent) => {
-    if (e.defaultPrevented) return;
-    e.stopPropagation();
-
-    const opts = getOptions();
-    if (opts.isDisabled || state.isDisabled) return;
-
-    const keys = getKeysForDrag();
-
-    // Start drag state
-    state.startDrag(keys, e.clientX, e.clientY);
-
-    // Get items and write to data transfer
-    const items = state.getItems(keys);
-    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 opts.preview?.current === 'function' && e.dataTransfer) {
-      opts.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];
-    const isInternal = false; // Would check global state
-    state.endDrag(e.clientX, e.clientY, dropOperation, isInternal);
-
-    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();
-
-      const opts = getOptions();
-      if (opts.isDisabled || state.isDisabled) return;
-
-      const keys = getKeysForDrag();
-      const rect = (e.target as HTMLElement).getBoundingClientRect();
-      state.startDrag(keys, rect.x + rect.width / 2, rect.y + rect.height / 2);
-    }
-  };
-
-  const dragProps = createMemo(() => {
-    const opts = getOptions();
-
-    if (opts.isDisabled || state.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 (!opts.hasDragButton) {
-      baseProps.onKeyDown = onKeyDown;
-      baseProps.onKeyUp = onKeyUp;
-    }
-
-    return baseProps;
-  });
-
-  const dragButtonProps = createMemo(() => {
-    const opts = getOptions();
-
-    if (opts.isDisabled || state.isDisabled) {
-      return {
-        disabled: true,
-      };
-    }
-
-    return {
-      type: 'button' as const,
-      'aria-label': 'Drag',
-      onKeyDown,
-      onKeyUp,
-    };
-  });
-
-  return {
-    get dragProps() {
-      return dragProps() as DraggableItemAria['dragProps'];
-    },
-    get dragButtonProps() {
-      return dragButtonProps() as DraggableItemAria['dragButtonProps'];
-    },
-    get isDragging() {
-      return isDragging();
-    },
-  };
-}