@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/src/dnd/createDroppableItem.ts

@@ -4,20 +4,20 @@
  * Provides accessibility props for items that can receive drops.
  */
 
-import { createMemo, type Accessor } from 'solid-js';
-import type { JSX } from 'solid-js';
+import { createMemo, type Accessor } from "solid-js";
+import type { JSX } from "solid-js";
 import type {
   DroppableCollectionState,
   DropTarget,
   DropOperation,
-} from '@proyecto-viviana/solid-stately';
+} from "@proyecto-viviana/solid-stately";
 import {
   DragTypesImpl,
   DROP_OPERATION,
   DROP_OPERATION_ALLOWED,
   DROP_OPERATION_TO_DROP_EFFECT,
   getGlobalAllowedDropOperations,
-} from './utils';
+} from "./utils";
 
 export interface DroppableItemOptions {
   /** The unique key of the item. */
@@ -44,34 +44,30 @@ export interface DroppableItemAria {
  */
 export function createDroppableItem(
   options: Accessor<DroppableItemOptions>,
-  state: DroppableCollectionState
+  state: DroppableCollectionState,
 ): DroppableItemAria {
   const getOptions = createMemo(() => options());
 
   const isDropTarget = createMemo(() => {
     const { key } = getOptions();
     const target = state.target;
-    return target?.type === 'item' && target.key === key;
+    return target?.type === "item" && target.key === key;
   });
 
-  const getTarget = (dropPosition: 'before' | 'on' | 'after'): DropTarget => {
+  const getTarget = (dropPosition: "before" | "on" | "after"): DropTarget => {
     const { key } = getOptions();
     return {
-      type: 'item',
+      type: "item",
       key,
       dropPosition,
     };
   };
 
-  const getDropOperation = (
-    e: DragEvent,
-    target: DropTarget
-  ): DropOperation => {
-    if (!e.dataTransfer) return 'cancel';
+  const getDropOperation = (e: DragEvent, target: DropTarget): DropOperation => {
+    if (!e.dataTransfer) return "cancel";
 
     const types = new DragTypesImpl(e.dataTransfer);
-    let allowedBits =
-      DROP_OPERATION_ALLOWED[e.dataTransfer.effectAllowed] || DROP_OPERATION.all;
+    let allowedBits = DROP_OPERATION_ALLOWED[e.dataTransfer.effectAllowed] || DROP_OPERATION.all;
 
     // Use global allowed operations for internal drags
     const globalAllowed = getGlobalAllowedDropOperations();
@@ -80,9 +76,9 @@ export function createDroppableItem(
     }
 
     const allowedOperations: DropOperation[] = [];
-    if (allowedBits & DROP_OPERATION.move) allowedOperations.push('move');
-    if (allowedBits & DROP_OPERATION.copy) allowedOperations.push('copy');
-    if (allowedBits & DROP_OPERATION.link) allowedOperations.push('link');
+    if (allowedBits & DROP_OPERATION.move) allowedOperations.push("move");
+    if (allowedBits & DROP_OPERATION.copy) allowedOperations.push("copy");
+    if (allowedBits & DROP_OPERATION.link) allowedOperations.push("link");
 
     return state.getDropOperation(target, types, allowedOperations);
   };
@@ -103,21 +99,23 @@ export function createDroppableItem(
     const y = e.clientY - rect.y;
     const height = rect.height;
 
-    let dropPosition: 'before' | 'on' | 'after';
+    let dropPosition: "before" | "on" | "after";
     if (y < height * 0.25) {
-      dropPosition = 'before';
+      dropPosition = "before";
     } else if (y > height * 0.75) {
-      dropPosition = 'after';
+      dropPosition = "after";
     } else {
-      dropPosition = 'on';
+      dropPosition = "on";
     }
 
     const target = getTarget(dropPosition);
     const operation = getDropOperation(e, target);
 
-    if (operation !== 'cancel') {
+    if (operation !== "cancel") {
       state.setTarget(target);
-      e.dataTransfer!.dropEffect = DROP_OPERATION_TO_DROP_EFFECT[operation] as DataTransfer['dropEffect'];
+      e.dataTransfer!.dropEffect = DROP_OPERATION_TO_DROP_EFFECT[
+        operation
+      ] as DataTransfer["dropEffect"];
     }
   };
 
@@ -134,31 +132,33 @@ export function createDroppableItem(
     const y = e.clientY - rect.y;
     const height = rect.height;
 
-    let dropPosition: 'before' | 'on' | 'after';
+    let dropPosition: "before" | "on" | "after";
     if (y < height * 0.25) {
-      dropPosition = 'before';
+      dropPosition = "before";
     } else if (y > height * 0.75) {
-      dropPosition = 'after';
+      dropPosition = "after";
     } else {
-      dropPosition = 'on';
+      dropPosition = "on";
     }
 
     const target = getTarget(dropPosition);
     const operation = getDropOperation(e, target);
 
-    if (operation !== 'cancel') {
+    if (operation !== "cancel") {
       state.setTarget(target);
-      e.dataTransfer!.dropEffect = DROP_OPERATION_TO_DROP_EFFECT[operation] as DataTransfer['dropEffect'];
+      e.dataTransfer!.dropEffect = DROP_OPERATION_TO_DROP_EFFECT[
+        operation
+      ] as DataTransfer["dropEffect"];
 
       // Handle drop activate for 'on' position
       clearTimeout(dropActivateTimer);
-      if (dropPosition === 'on') {
+      if (dropPosition === "on") {
         dropActivateTimer = setTimeout(() => {
           state.activateTarget(x, y);
         }, DROP_ACTIVATE_TIMEOUT);
       }
     } else {
-      e.dataTransfer!.dropEffect = 'none';
+      e.dataTransfer!.dropEffect = "none";
     }
   };
 
@@ -174,7 +174,7 @@ export function createDroppableItem(
     if (!relatedTarget || !currentTarget.contains(relatedTarget)) {
       // Clear if no longer over this item
       const { key } = getOptions();
-      if (state.target?.type === 'item' && state.target.key === key) {
+      if (state.target?.type === "item" && state.target.key === key) {
         // State clearing handled by parent collection
       }
     }
@@ -206,7 +206,7 @@ export function createDroppableItem(
 
   return {
     get dropProps() {
-      return dropProps() as DroppableItemAria['dropProps'];
+      return dropProps() as DroppableItemAria["dropProps"];
     },
     get isDropTarget() {
       return isDropTarget();

package/src/dnd/index.ts

@@ -5,8 +5,8 @@
  */
 
 // Basic drag/drop hooks
-export { createDrag } from './createDrag';
-export { createDrop } from './createDrop';
+export { createDrag } from "./createDrag";
+export { createDrop } from "./createDrop";
 
 // Collection hooks
 export {
@@ -17,19 +17,30 @@ export {
   getGlobalDraggingKeys,
   setGlobalDraggingTypes,
   getGlobalDraggingTypes,
-} from './createDraggableCollection';
-export { createDroppableCollection, setGlobalDropCollectionRef, getGlobalDropCollectionRef } from './createDroppableCollection';
+} from "./createDraggableCollection";
+export {
+  createDroppableCollection,
+  setGlobalDropCollectionRef,
+  getGlobalDropCollectionRef,
+} from "./createDroppableCollection";
 
 // Item hooks
-export { createDraggableItem } from './createDraggableItem';
-export { createDroppableItem } from './createDroppableItem';
+export { createDraggableItem } from "./createDraggableItem";
+export { createDroppableItem } from "./createDroppableItem";
 
 // Types
-export type { AriaDragOptions, DragAria, AriaDropOptions, DropAria } from './types';
-export type { DraggableCollectionOptions, DraggableCollectionAria } from './createDraggableCollection';
-export type { DroppableCollectionOptions, DroppableCollectionAria, DropTargetDelegate } from './createDroppableCollection';
-export type { DraggableItemOptions, DraggableItemAria } from './createDraggableItem';
-export type { DroppableItemOptions, DroppableItemAria } from './createDroppableItem';
+export type { AriaDragOptions, DragAria, AriaDropOptions, DropAria } from "./types";
+export type {
+  DraggableCollectionOptions,
+  DraggableCollectionAria,
+} from "./createDraggableCollection";
+export type {
+  DroppableCollectionOptions,
+  DroppableCollectionAria,
+  DropTargetDelegate,
+} from "./createDroppableCollection";
+export type { DraggableItemOptions, DraggableItemAria } from "./createDraggableItem";
+export type { DroppableItemOptions, DroppableItemAria } from "./createDroppableItem";
 
 // Utilities
 export {
@@ -52,4 +63,4 @@ export {
   getGlobalDropEffect,
   setGlobalAllowedDropOperations,
   getGlobalAllowedDropOperations,
-} from './utils';
+} from "./utils";

package/src/dnd/types.ts

@@ -2,7 +2,7 @@
  * Drag and Drop ARIA types for solidaria.
  */
 
-import type { JSX } from 'solid-js';
+import type { JSX } from "solid-js";
 import type {
   DragItem,
   DragStartEvent,
@@ -16,7 +16,7 @@ import type {
   DropOperation,
   DragTypes,
   DragPreviewRenderer,
-} from '@proyecto-viviana/solid-stately';
+} from "@proyecto-viviana/solid-stately";
 
 export interface AriaDragOptions {
   /** A function that returns the items being dragged. */
@@ -50,10 +50,7 @@ export interface AriaDropOptions {
   /**
    * A function returning the drop operation to be performed.
    */
-  getDropOperation?: (
-    types: DragTypes,
-    allowedOperations: DropOperation[]
-  ) => DropOperation;
+  getDropOperation?: (types: DragTypes, allowedOperations: DropOperation[]) => DropOperation;
   /**
    * A function returning the drop operation for a specific point.
    */
@@ -61,7 +58,7 @@ export interface AriaDropOptions {
     types: DragTypes,
     allowedOperations: DropOperation[],
     x: number,
-    y: number
+    y: number,
   ) => DropOperation;
   /** Handler that is called when a valid drag enters the drop target. */
   onDropEnter?: (e: DropEnterEvent) => void;

package/src/dnd/utils.ts

@@ -4,25 +4,23 @@
 
 import type {
   DragItem,
+  DragType,
   DropItem,
   TextDropItem,
   FileDropItem,
   DirectoryDropItem,
   DropOperation,
-} from '@proyecto-viviana/solid-stately';
+} from "@proyecto-viviana/solid-stately";
+import { DIRECTORY_DRAG_TYPE } from "@proyecto-viviana/solid-stately";
 
 // Native drag types that can be transferred between applications
-export const NATIVE_DRAG_TYPES: Set<string> = new Set([
-  'text/plain',
-  'text/uri-list',
-  'text/html',
-]);
+export const NATIVE_DRAG_TYPES: Set<string> = new Set(["text/plain", "text/uri-list", "text/html"]);
 
 // Custom drag type for serializing multiple items
-export const CUSTOM_DRAG_TYPE = 'application/vnd.solidaria.items+json';
+export const CUSTOM_DRAG_TYPE = "application/vnd.solidaria.items+json";
 
 // Generic type for unknown file types
-export const GENERIC_TYPE = 'application/octet-stream';
+export const GENERIC_TYPE = "application/octet-stream";
 
 // Drop operation bit flags
 export enum DROP_OPERATION {
@@ -49,30 +47,30 @@ export const DROP_OPERATION_ALLOWED: Record<string, number> = {
 
 // Map from DROP_OPERATION to effectAllowed
 export const EFFECT_ALLOWED: Record<number, string> = {
-  [DROP_OPERATION.none]: 'none',
-  [DROP_OPERATION.move]: 'move',
-  [DROP_OPERATION.copy]: 'copy',
-  [DROP_OPERATION.copy | DROP_OPERATION.move]: 'copyMove',
-  [DROP_OPERATION.link]: 'link',
-  [DROP_OPERATION.link | DROP_OPERATION.move]: 'linkMove',
-  [DROP_OPERATION.copy | DROP_OPERATION.link]: 'copyLink',
-  [DROP_OPERATION.all]: 'all',
+  [DROP_OPERATION.none]: "none",
+  [DROP_OPERATION.move]: "move",
+  [DROP_OPERATION.copy]: "copy",
+  [DROP_OPERATION.copy | DROP_OPERATION.move]: "copyMove",
+  [DROP_OPERATION.link]: "link",
+  [DROP_OPERATION.link | DROP_OPERATION.move]: "linkMove",
+  [DROP_OPERATION.copy | DROP_OPERATION.link]: "copyLink",
+  [DROP_OPERATION.all]: "all",
 };
 
 // Map from dropEffect to DropOperation
 export const DROP_EFFECT_TO_DROP_OPERATION: Record<string, DropOperation> = {
-  none: 'cancel',
-  link: 'link',
-  copy: 'copy',
-  move: 'move',
+  none: "cancel",
+  link: "link",
+  copy: "copy",
+  move: "move",
 };
 
 // Map from DropOperation to dropEffect
 export const DROP_OPERATION_TO_DROP_EFFECT: Record<DropOperation, string> = {
-  cancel: 'none',
-  link: 'link',
-  copy: 'copy',
-  move: 'move',
+  cancel: "none",
+  link: "link",
+  copy: "copy",
+  move: "move",
 };
 
 /**
@@ -91,10 +89,7 @@ export function getTypes(items: DragItem[]): Set<string> {
 /**
  * Write drag items to a DataTransfer object.
  */
-export function writeToDataTransfer(
-  dataTransfer: DataTransfer,
-  items: DragItem[]
-): void {
+export function writeToDataTransfer(dataTransfer: DataTransfer, items: DragItem[]): void {
   const groupedByType = new Map<string, string[]>();
   let needsCustomData = false;
   const customData: object[] = [];
@@ -126,7 +121,7 @@ export function writeToDataTransfer(
   for (const [type, typeItems] of groupedByType) {
     if (NATIVE_DRAG_TYPES.has(type)) {
       // Join all items of this type with newlines
-      const data = typeItems.join('\n');
+      const data = typeItems.join("\n");
       dataTransfer.items.add(data, type);
     } else {
       // Set first item for non-native types
@@ -158,7 +153,7 @@ export function readFromDataTransfer(dataTransfer: DataTransfer): DropItem[] {
       const parsed = JSON.parse(data);
       for (const item of parsed) {
         items.push({
-          kind: 'text',
+          kind: "text",
           types: new Set(Object.keys(item)),
           getText: (type) => Promise.resolve(item[type]),
         });
@@ -174,10 +169,10 @@ export function readFromDataTransfer(dataTransfer: DataTransfer): DropItem[] {
     const stringItems = new Map<string, string>();
 
     for (const item of dataTransfer.items) {
-      if (item.kind === 'string') {
+      if (item.kind === "string") {
         const type = item.type || GENERIC_TYPE;
         stringItems.set(type, dataTransfer.getData(item.type));
-      } else if (item.kind === 'file') {
+      } else if (item.kind === "file") {
         const file = item.getAsFile();
         if (file) {
           items.push(createFileItem(file));
@@ -187,9 +182,9 @@ export function readFromDataTransfer(dataTransfer: DataTransfer): DropItem[] {
 
     if (stringItems.size > 0) {
       items.push({
-        kind: 'text',
+        kind: "text",
         types: new Set(stringItems.keys()),
-        getText: (type) => Promise.resolve(stringItems.get(type) ?? ''),
+        getText: (type) => Promise.resolve(stringItems.get(type) ?? ""),
       });
     }
   }
@@ -202,7 +197,7 @@ export function readFromDataTransfer(dataTransfer: DataTransfer): DropItem[] {
  */
 function createFileItem(file: File): FileDropItem {
   return {
-    kind: 'file',
+    kind: "file",
     type: file.type || GENERIC_TYPE,
     name: file.name,
     getText: () => file.text(),
@@ -223,7 +218,7 @@ export class DragTypesImpl {
 
     for (const item of dataTransfer.items) {
       if (item.type !== CUSTOM_DRAG_TYPE) {
-        if (item.kind === 'file') {
+        if (item.kind === "file") {
           hasFiles = true;
         }
         if (item.type) {
@@ -235,18 +230,36 @@ export class DragTypesImpl {
     }
 
     // Safari doesn't expose file types until drop
-    this.includesUnknownTypes =
-      !hasFiles && dataTransfer.types.includes('Files');
+    this.includesUnknownTypes = !hasFiles && dataTransfer.types.includes("Files");
   }
 
-  has(type: string | symbol): boolean {
+  has(type: DragType | DragType[]): boolean {
+    if (Array.isArray(type)) {
+      return type.some((t) => this.has(t));
+    }
+
     if (
       this.includesUnknownTypes ||
-      (typeof type === 'symbol' && this.types.has(GENERIC_TYPE))
+      (type === DIRECTORY_DRAG_TYPE && this.types.has(GENERIC_TYPE)) ||
+      type === "*/*"
     ) {
       return true;
     }
-    return typeof type === 'string' && this.types.has(type);
+
+    if (typeof type === "string") {
+      // Wildcard MIME match, e.g. "image/*" accepts "image/png".
+      if (type.endsWith("/*")) {
+        for (const key of this.types) {
+          if (key.startsWith(type.slice(0, -2))) {
+            return true;
+          }
+        }
+        return false;
+      }
+      return this.types.has(type);
+    }
+
+    return false;
   }
 }
 
@@ -254,23 +267,21 @@ export class DragTypesImpl {
  * Check if a drop item is a text item.
  */
 export function isTextDropItem(dropItem: DropItem): dropItem is TextDropItem {
-  return dropItem.kind === 'text';
+  return dropItem.kind === "text";
 }
 
 /**
  * Check if a drop item is a file item.
  */
 export function isFileDropItem(dropItem: DropItem): dropItem is FileDropItem {
-  return dropItem.kind === 'file';
+  return dropItem.kind === "file";
 }
 
 /**
  * Check if a drop item is a directory item.
  */
-export function isDirectoryDropItem(
-  dropItem: DropItem
-): dropItem is DirectoryDropItem {
-  return dropItem.kind === 'directory';
+export function isDirectoryDropItem(dropItem: DropItem): dropItem is DirectoryDropItem {
+  return dropItem.kind === "directory";
 }
 
 // Global state for tracking drag operations