@proyecto-viviana/solidaria 0.2.2 → 0.2.3

package/src/dnd/createDrag.ts

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

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

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