@proyecto-viviana/solid-stately 0.2.4 → 0.3.0

package/src/dnd/createDropState.ts

@@ -1,212 +1,202 @@
-/**
- * Drop state management for solid-stately.
- *
- * Provides reactive state for drop target operations.
- */
-
-import { createSignal, createMemo, type Accessor } from 'solid-js';
-import type {
-  DropItem,
-  DropEnterEvent,
-  DropMoveEvent,
-  DropExitEvent,
-  DropActivateEvent,
-  DropEvent,
-  DropOperation,
-  DragTypes,
-} from './types';
-
-export interface DropStateOptions {
-  /**
-   * A function returning the drop operation to be performed.
-   */
-  getDropOperation?: (
-    types: DragTypes,
-    allowedOperations: DropOperation[]
-  ) => DropOperation;
-  /**
-   * A function returning the drop operation for a specific point.
-   */
-  getDropOperationForPoint?: (
-    types: DragTypes,
-    allowedOperations: DropOperation[],
-    x: number,
-    y: number
-  ) => DropOperation;
-  /** Handler that is called when a valid drag enters the drop target. */
-  onDropEnter?: (e: DropEnterEvent) => void;
-  /** Handler that is called when a valid drag is moved within the drop target. */
-  onDropMove?: (e: DropMoveEvent) => void;
-  /** Handler that is called after a valid drag is held over the drop target. */
-  onDropActivate?: (e: DropActivateEvent) => void;
-  /** Handler that is called when a valid drag exits the drop target. */
-  onDropExit?: (e: DropExitEvent) => void;
-  /** Handler that is called when a valid drag is dropped on the drop target. */
-  onDrop?: (e: DropEvent) => void;
-  /** Whether there is a separate drop button affordance. */
-  hasDropButton?: boolean;
-  /** Whether the drop target is disabled. */
-  isDisabled?: boolean;
-}
-
-export interface DropState {
-  /** Whether the drop target is currently being hovered or focused. */
-  readonly isDropTarget: boolean;
-  /** Whether the drop target is disabled. */
-  readonly isDisabled: boolean;
-  /** Whether there is a drop button. */
-  readonly hasDropButton: boolean;
-  /** Enter the drop target. */
-  enterTarget(x: number, y: number): void;
-  /** Move within the drop target. */
-  moveInTarget(x: number, y: number): void;
-  /** Exit the drop target. */
-  exitTarget(x: number, y: number): void;
-  /** Activate the drop target (after holding). */
-  activateTarget(x: number, y: number): void;
-  /** Perform a drop on the target. */
-  drop(x: number, y: number, items: DropItem[], dropOperation: DropOperation): void;
-  /** Get the drop operation for given types. */
-  getDropOperation(types: DragTypes, allowedOperations: DropOperation[]): DropOperation;
-  /** Get the drop operation for a specific point. */
-  getDropOperationForPoint(
-    types: DragTypes,
-    allowedOperations: DropOperation[],
-    x: number,
-    y: number
-  ): DropOperation;
-}
-
-/**
- * Creates drop state for managing drop target operations.
- *
- * @param props - Accessor returning drop state options
- * @returns Drop state object
- */
-export function createDropState(
-  props: Accessor<DropStateOptions>
-): DropState {
-  const getProps = createMemo(() => props());
-
-  const [isDropTarget, setIsDropTarget] = createSignal(false);
-
-  const enterTarget = (x: number, y: number) => {
-    const p = getProps();
-    if (p.isDisabled) return;
-
-    setIsDropTarget(true);
-
-    if (typeof p.onDropEnter === 'function') {
-      p.onDropEnter({
-        type: 'dropenter',
-        x,
-        y,
-      });
-    }
-  };
-
-  const moveInTarget = (x: number, y: number) => {
-    const p = getProps();
-    if (!isDropTarget() || p.isDisabled) return;
-
-    if (typeof p.onDropMove === 'function') {
-      p.onDropMove({
-        type: 'dropmove',
-        x,
-        y,
-      });
-    }
-  };
-
-  const exitTarget = (x: number, y: number) => {
-    const p = getProps();
-
-    setIsDropTarget(false);
-
-    if (typeof p.onDropExit === 'function') {
-      p.onDropExit({
-        type: 'dropexit',
-        x,
-        y,
-      });
-    }
-  };
-
-  const activateTarget = (x: number, y: number) => {
-    const p = getProps();
-    if (p.isDisabled) return;
-
-    if (typeof p.onDropActivate === 'function') {
-      p.onDropActivate({
-        type: 'dropactivate',
-        x,
-        y,
-      });
-    }
-  };
-
-  const drop = (
-    x: number,
-    y: number,
-    items: DropItem[],
-    dropOperation: DropOperation
-  ) => {
-    const p = getProps();
-    if (p.isDisabled) return;
-
-    setIsDropTarget(false);
-
-    if (typeof p.onDrop === 'function') {
-      p.onDrop({
-        type: 'drop',
-        x,
-        y,
-        items,
-        dropOperation,
-      });
-    }
-  };
-
-  const getDropOperation = (
-    types: DragTypes,
-    allowedOperations: DropOperation[]
-  ): DropOperation => {
-    const p = getProps();
-    if (typeof p.getDropOperation === 'function') {
-      return p.getDropOperation(types, allowedOperations);
-    }
-    return allowedOperations[0] ?? 'cancel';
-  };
-
-  const getDropOperationForPoint = (
-    types: DragTypes,
-    allowedOperations: DropOperation[],
-    x: number,
-    y: number
-  ): DropOperation => {
-    const p = getProps();
-    if (typeof p.getDropOperationForPoint === 'function') {
-      return p.getDropOperationForPoint(types, allowedOperations, x, y);
-    }
-    return getDropOperation(types, allowedOperations);
-  };
-
-  return {
-    get isDropTarget() {
-      return isDropTarget();
-    },
-    get isDisabled() {
-      return getProps().isDisabled ?? false;
-    },
-    get hasDropButton() {
-      return getProps().hasDropButton ?? false;
-    },
-    enterTarget,
-    moveInTarget,
-    exitTarget,
-    activateTarget,
-    drop,
-    getDropOperation,
-    getDropOperationForPoint,
-  };
-}
+/**
+ * Drop state management for solid-stately.
+ *
+ * Provides reactive state for drop target operations.
+ */
+
+import { createSignal, createMemo, type Accessor } from "solid-js";
+import type {
+  DropItem,
+  DropEnterEvent,
+  DropMoveEvent,
+  DropExitEvent,
+  DropActivateEvent,
+  DropEvent,
+  DropOperation,
+  DragTypes,
+} from "./types";
+
+export interface DropStateOptions {
+  /**
+   * A function returning the drop operation to be performed.
+   */
+  getDropOperation?: (types: DragTypes, allowedOperations: DropOperation[]) => DropOperation;
+  /**
+   * A function returning the drop operation for a specific point.
+   */
+  getDropOperationForPoint?: (
+    types: DragTypes,
+    allowedOperations: DropOperation[],
+    x: number,
+    y: number,
+  ) => DropOperation;
+  /** Handler that is called when a valid drag enters the drop target. */
+  onDropEnter?: (e: DropEnterEvent) => void;
+  /** Handler that is called when a valid drag is moved within the drop target. */
+  onDropMove?: (e: DropMoveEvent) => void;
+  /** Handler that is called after a valid drag is held over the drop target. */
+  onDropActivate?: (e: DropActivateEvent) => void;
+  /** Handler that is called when a valid drag exits the drop target. */
+  onDropExit?: (e: DropExitEvent) => void;
+  /** Handler that is called when a valid drag is dropped on the drop target. */
+  onDrop?: (e: DropEvent) => void;
+  /** Whether there is a separate drop button affordance. */
+  hasDropButton?: boolean;
+  /** Whether the drop target is disabled. */
+  isDisabled?: boolean;
+}
+
+export interface DropState {
+  /** Whether the drop target is currently being hovered or focused. */
+  readonly isDropTarget: boolean;
+  /** Whether the drop target is disabled. */
+  readonly isDisabled: boolean;
+  /** Whether there is a drop button. */
+  readonly hasDropButton: boolean;
+  /** Enter the drop target. */
+  enterTarget(x: number, y: number): void;
+  /** Move within the drop target. */
+  moveInTarget(x: number, y: number): void;
+  /** Exit the drop target. */
+  exitTarget(x: number, y: number): void;
+  /** Activate the drop target (after holding). */
+  activateTarget(x: number, y: number): void;
+  /** Perform a drop on the target. */
+  drop(x: number, y: number, items: DropItem[], dropOperation: DropOperation): void;
+  /** Get the drop operation for given types. */
+  getDropOperation(types: DragTypes, allowedOperations: DropOperation[]): DropOperation;
+  /** Get the drop operation for a specific point. */
+  getDropOperationForPoint(
+    types: DragTypes,
+    allowedOperations: DropOperation[],
+    x: number,
+    y: number,
+  ): DropOperation;
+}
+
+/**
+ * Creates drop state for managing drop target operations.
+ *
+ * @param props - Accessor returning drop state options
+ * @returns Drop state object
+ */
+export function createDropState(props: Accessor<DropStateOptions>): DropState {
+  const getProps = createMemo(() => props());
+
+  const [isDropTarget, setIsDropTarget] = createSignal(false);
+
+  const enterTarget = (x: number, y: number) => {
+    const p = getProps();
+    if (p.isDisabled) return;
+
+    setIsDropTarget(true);
+
+    if (typeof p.onDropEnter === "function") {
+      p.onDropEnter({
+        type: "dropenter",
+        x,
+        y,
+      });
+    }
+  };
+
+  const moveInTarget = (x: number, y: number) => {
+    const p = getProps();
+    if (!isDropTarget() || p.isDisabled) return;
+
+    if (typeof p.onDropMove === "function") {
+      p.onDropMove({
+        type: "dropmove",
+        x,
+        y,
+      });
+    }
+  };
+
+  const exitTarget = (x: number, y: number) => {
+    const p = getProps();
+
+    setIsDropTarget(false);
+
+    if (typeof p.onDropExit === "function") {
+      p.onDropExit({
+        type: "dropexit",
+        x,
+        y,
+      });
+    }
+  };
+
+  const activateTarget = (x: number, y: number) => {
+    const p = getProps();
+    if (p.isDisabled) return;
+
+    if (typeof p.onDropActivate === "function") {
+      p.onDropActivate({
+        type: "dropactivate",
+        x,
+        y,
+      });
+    }
+  };
+
+  const drop = (x: number, y: number, items: DropItem[], dropOperation: DropOperation) => {
+    const p = getProps();
+    if (p.isDisabled) return;
+
+    setIsDropTarget(false);
+
+    if (typeof p.onDrop === "function") {
+      p.onDrop({
+        type: "drop",
+        x,
+        y,
+        items,
+        dropOperation,
+      });
+    }
+  };
+
+  const getDropOperation = (
+    types: DragTypes,
+    allowedOperations: DropOperation[],
+  ): DropOperation => {
+    const p = getProps();
+    if (typeof p.getDropOperation === "function") {
+      return p.getDropOperation(types, allowedOperations);
+    }
+    return allowedOperations[0] ?? "cancel";
+  };
+
+  const getDropOperationForPoint = (
+    types: DragTypes,
+    allowedOperations: DropOperation[],
+    x: number,
+    y: number,
+  ): DropOperation => {
+    const p = getProps();
+    if (typeof p.getDropOperationForPoint === "function") {
+      return p.getDropOperationForPoint(types, allowedOperations, x, y);
+    }
+    return getDropOperation(types, allowedOperations);
+  };
+
+  return {
+    get isDropTarget() {
+      return isDropTarget();
+    },
+    get isDisabled() {
+      return getProps().isDisabled ?? false;
+    },
+    get hasDropButton() {
+      return getProps().hasDropButton ?? false;
+    },
+    enterTarget,
+    moveInTarget,
+    exitTarget,
+    activateTarget,
+    drop,
+    getDropOperation,
+    getDropOperationForPoint,
+  };
+}

package/src/dnd/createDroppableCollectionState.d.ts

@@ -3,66 +3,93 @@
  *
  * Provides reactive state for accepting drops onto a collection.
  */
-import { type Accessor } from 'solid-js';
-import type { DropItem, DropTarget, DropOperation, DragTypes, DroppableCollectionEnterEvent, DroppableCollectionActivateEvent, DroppableCollectionExitEvent, DroppableCollectionDropEvent, DroppableCollectionInsertDropEvent, DroppableCollectionRootDropEvent, DroppableCollectionOnItemDropEvent, DroppableCollectionReorderEvent, ItemDropTarget } from './types';
+import { type Accessor } from "solid-js";
+import type {
+  DropItem,
+  DropTarget,
+  DropOperation,
+  DragTypes,
+  DroppableCollectionEnterEvent,
+  DroppableCollectionActivateEvent,
+  DroppableCollectionExitEvent,
+  DroppableCollectionDropEvent,
+  DroppableCollectionInsertDropEvent,
+  DroppableCollectionRootDropEvent,
+  DroppableCollectionOnItemDropEvent,
+  DroppableCollectionReorderEvent,
+  ItemDropTarget,
+} from "./types";
 export interface DroppableCollectionStateOptions {
-    /**
-     * The drag types that the droppable collection accepts.
-     * @default 'all'
-     */
-    acceptedDragTypes?: 'all' | Array<string | symbol>;
-    /**
-     * A function returning the drop operation to be performed.
-     */
-    getDropOperation?: (target: DropTarget, types: DragTypes, allowedOperations: DropOperation[]) => DropOperation;
-    /** Handler that is called when a valid drag enters a drop target. */
-    onDropEnter?: (e: DroppableCollectionEnterEvent) => void;
-    /** Handler that is called after a valid drag is held over a drop target. */
-    onDropActivate?: (e: DroppableCollectionActivateEvent) => void;
-    /** Handler that is called when a valid drag exits a drop target. */
-    onDropExit?: (e: DroppableCollectionExitEvent) => void;
-    /** Handler that is called when a valid drag is dropped. */
-    onDrop?: (e: DroppableCollectionDropEvent) => void;
-    /** Handler that is called when external items are dropped "between" items. */
-    onInsert?: (e: DroppableCollectionInsertDropEvent) => void;
-    /** Handler that is called when external items are dropped on the collection's root. */
-    onRootDrop?: (e: DroppableCollectionRootDropEvent) => void;
-    /** Handler that is called when items are dropped "on" an item. */
-    onItemDrop?: (e: DroppableCollectionOnItemDropEvent) => void;
-    /** Handler that is called when items are reordered within the collection. */
-    onReorder?: (e: DroppableCollectionReorderEvent) => void;
-    /** Handler that is called when items are moved within the source collection. */
-    onMove?: (e: DroppableCollectionReorderEvent) => void;
-    /** A function returning whether a given target is a valid "on" drop target. */
-    shouldAcceptItemDrop?: (target: ItemDropTarget, types: DragTypes) => boolean;
-    /** Whether the droppable collection is disabled. */
-    isDisabled?: boolean;
+  /**
+   * The drag types that the droppable collection accepts.
+   * @default 'all'
+   */
+  acceptedDragTypes?: "all" | Array<string | symbol>;
+  /**
+   * A function returning the drop operation to be performed.
+   */
+  getDropOperation?: (
+    target: DropTarget,
+    types: DragTypes,
+    allowedOperations: DropOperation[],
+  ) => DropOperation;
+  /** Handler that is called when a valid drag enters a drop target. */
+  onDropEnter?: (e: DroppableCollectionEnterEvent) => void;
+  /** Handler that is called after a valid drag is held over a drop target. */
+  onDropActivate?: (e: DroppableCollectionActivateEvent) => void;
+  /** Handler that is called when a valid drag exits a drop target. */
+  onDropExit?: (e: DroppableCollectionExitEvent) => void;
+  /** Handler that is called when a valid drag is dropped. */
+  onDrop?: (e: DroppableCollectionDropEvent) => void;
+  /** Handler that is called when external items are dropped "between" items. */
+  onInsert?: (e: DroppableCollectionInsertDropEvent) => void;
+  /** Handler that is called when external items are dropped on the collection's root. */
+  onRootDrop?: (e: DroppableCollectionRootDropEvent) => void;
+  /** Handler that is called when items are dropped "on" an item. */
+  onItemDrop?: (e: DroppableCollectionOnItemDropEvent) => void;
+  /** Handler that is called when items are reordered within the collection. */
+  onReorder?: (e: DroppableCollectionReorderEvent) => void;
+  /** Handler that is called when items are moved within the source collection. */
+  onMove?: (e: DroppableCollectionReorderEvent) => void;
+  /** A function returning whether a given target is a valid "on" drop target. */
+  shouldAcceptItemDrop?: (target: ItemDropTarget, types: DragTypes) => boolean;
+  /** Whether the droppable collection is disabled. */
+  isDisabled?: boolean;
 }
 export interface DroppableCollectionState {
-    /** Whether a drag is currently over the collection. */
-    readonly isDropTarget: boolean;
-    /** The current drop target within the collection. */
-    readonly target: DropTarget | null;
-    /** Whether the collection is disabled for drops. */
-    readonly isDisabled: boolean;
-    /** Set the current drop target. */
-    setTarget(target: DropTarget | null): void;
-    /** Check if a drag type is accepted. */
-    isAccepted(types: DragTypes): boolean;
-    /** Enter the collection with a drop target. */
-    enterTarget(target: DropTarget, x: number, y: number): void;
-    /** Move to a new target within the collection. */
-    moveToTarget(target: DropTarget, x: number, y: number): void;
-    /** Exit the collection. */
-    exitTarget(x: number, y: number): void;
-    /** Activate the current target. */
-    activateTarget(x: number, y: number): void;
-    /** Perform a drop on the collection. */
-    drop(items: DropItem[], dropOperation: DropOperation, isInternal: boolean, draggingKeys?: Set<string | number>): void;
-    /** Get the drop operation for a target. */
-    getDropOperation(target: DropTarget, types: DragTypes, allowedOperations: DropOperation[]): DropOperation;
-    /** Check if an item drop should be accepted. */
-    shouldAcceptItemDrop(target: ItemDropTarget, types: DragTypes): boolean;
+  /** Whether a drag is currently over the collection. */
+  readonly isDropTarget: boolean;
+  /** The current drop target within the collection. */
+  readonly target: DropTarget | null;
+  /** Whether the collection is disabled for drops. */
+  readonly isDisabled: boolean;
+  /** Set the current drop target. */
+  setTarget(target: DropTarget | null): void;
+  /** Check if a drag type is accepted. */
+  isAccepted(types: DragTypes): boolean;
+  /** Enter the collection with a drop target. */
+  enterTarget(target: DropTarget, x: number, y: number): void;
+  /** Move to a new target within the collection. */
+  moveToTarget(target: DropTarget, x: number, y: number): void;
+  /** Exit the collection. */
+  exitTarget(x: number, y: number): void;
+  /** Activate the current target. */
+  activateTarget(x: number, y: number): void;
+  /** Perform a drop on the collection. */
+  drop(
+    items: DropItem[],
+    dropOperation: DropOperation,
+    isInternal: boolean,
+    draggingKeys?: Set<string | number>,
+  ): void;
+  /** Get the drop operation for a target. */
+  getDropOperation(
+    target: DropTarget,
+    types: DragTypes,
+    allowedOperations: DropOperation[],
+  ): DropOperation;
+  /** Check if an item drop should be accepted. */
+  shouldAcceptItemDrop(target: ItemDropTarget, types: DragTypes): boolean;
 }
 /**
  * Symbol for directory drag type.
@@ -74,5 +101,7 @@ export declare const DIRECTORY_DRAG_TYPE: symbol;
  * @param props - Accessor returning droppable collection options
  * @returns Droppable collection state object
  */
-export declare function createDroppableCollectionState(props: Accessor<DroppableCollectionStateOptions>): DroppableCollectionState;
-//# sourceMappingURL=createDroppableCollectionState.d.ts.map
+export declare function createDroppableCollectionState(
+  props: Accessor<DroppableCollectionStateOptions>,
+): DroppableCollectionState;
+//# sourceMappingURL=createDroppableCollectionState.d.ts.map