@pyreon/dnd 0.11.5 → 0.11.6

package/src/types.ts

@@ -2,7 +2,7 @@
 export type DragData = Record<string, unknown>
 
 /** Position of a drop relative to the target element. */
-export type DropEdge = "top" | "bottom" | "left" | "right"
+export type DropEdge = 'top' | 'bottom' | 'left' | 'right'
 
 /** Drop location information. */
 export interface DropLocation {
@@ -66,7 +66,7 @@ export interface UseSortableOptions<T> {
   /** Called with the reordered items after a drop. */
   onReorder: (items: T[]) => void
   /** Sort axis. Default: "vertical". */
-  axis?: "vertical" | "horizontal"
+  axis?: 'vertical' | 'horizontal'
 }
 
 export interface UseSortableResult {

package/src/use-drag-monitor.ts

@@ -1,6 +1,6 @@
-import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"
-import { onCleanup, signal } from "@pyreon/reactivity"
-import type { DragData } from "./types"
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
+import { onCleanup, signal } from '@pyreon/reactivity'
+import type { DragData } from './types'
 
 export interface UseDragMonitorOptions {
   /** Called on any drag start in the page. */

package/src/use-draggable.ts

@@ -1,6 +1,6 @@
-import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"
-import { onCleanup, signal } from "@pyreon/reactivity"
-import type { DragData, UseDraggableOptions, UseDraggableResult } from "./types"
+import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
+import { onCleanup, signal } from '@pyreon/reactivity'
+import type { DragData, UseDraggableOptions, UseDraggableResult } from './types'
 
 /**
  * Make an element draggable with signal-driven state.
@@ -32,7 +32,7 @@ export function useDraggable<T extends DragData = DragData>(
     if (!el) return
 
     const resolveData = () =>
-      typeof options.data === "function" ? (options.data as () => T)() : options.data
+      typeof options.data === 'function' ? (options.data as () => T)() : options.data
 
     const handle = options.handle?.()
     cleanup = draggable({
@@ -41,7 +41,7 @@ export function useDraggable<T extends DragData = DragData>(
       getInitialData: resolveData,
       canDrag: () => {
         const disabled = options.disabled
-        if (typeof disabled === "function") return !disabled()
+        if (typeof disabled === 'function') return !disabled()
         return !disabled
       },
       onDragStart: () => {

package/src/use-droppable.ts

@@ -1,6 +1,6 @@
-import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"
-import { onCleanup, signal } from "@pyreon/reactivity"
-import type { DragData, UseDroppableOptions, UseDroppableResult } from "./types"
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
+import { onCleanup, signal } from '@pyreon/reactivity'
+import type { DragData, UseDroppableOptions, UseDroppableResult } from './types'
 
 /**
  * Make an element a drop target with signal-driven state.
@@ -36,7 +36,7 @@ export function useDroppable<T extends DragData = DragData>(
       element: el,
       getData: () => {
         if (!options.data) return {}
-        return typeof options.data === "function" ? (options.data as () => T)() : options.data
+        return typeof options.data === 'function' ? (options.data as () => T)() : options.data
       },
       canDrop: ({ source }) => {
         if (!options.canDrop) return true

package/src/use-file-drop.ts

@@ -1,9 +1,9 @@
 import {
   dropTargetForExternal,
   monitorForExternal,
-} from "@atlaskit/pragmatic-drag-and-drop/external/adapter"
-import { containsFiles, getFiles } from "@atlaskit/pragmatic-drag-and-drop/external/file"
-import { onCleanup, signal } from "@pyreon/reactivity"
+} from '@atlaskit/pragmatic-drag-and-drop/external/adapter'
+import { containsFiles, getFiles } from '@atlaskit/pragmatic-drag-and-drop/external/file'
+import { onCleanup, signal } from '@pyreon/reactivity'
 
 export interface UseFileDropOptions {
   /** Element getter for the drop zone. */
@@ -55,10 +55,10 @@ export function useFileDrop(options: UseFileDropOptions): UseFileDropResult {
 
   function matchesAccept(file: File, accept: string[]): boolean {
     return accept.some((pattern) => {
-      if (pattern.startsWith(".")) {
+      if (pattern.startsWith('.')) {
         return file.name.toLowerCase().endsWith(pattern.toLowerCase())
       }
-      if (pattern.endsWith("/*")) {
+      if (pattern.endsWith('/*')) {
         return file.type.startsWith(pattern.slice(0, -1))
       }
       return file.type === pattern
@@ -88,7 +88,7 @@ export function useFileDrop(options: UseFileDropOptions): UseFileDropResult {
         element: el,
         canDrop: ({ source }) => {
           const disabled = options.disabled
-          if (typeof disabled === "function" ? disabled() : disabled) return false
+          if (typeof disabled === 'function' ? disabled() : disabled) return false
           return containsFiles({ source })
         },
         onDragEnter: () => isOver.set(true),

package/src/use-sortable.ts

@@ -1,16 +1,16 @@
-import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine"
-import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"
-import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element"
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine'
+import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
+import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element'
 import {
   attachClosestEdge,
   type Edge,
   extractClosestEdge,
-} from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge"
-import { onCleanup, signal } from "@pyreon/reactivity"
-import type { DropEdge, UseSortableOptions, UseSortableResult } from "./types"
+} from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge'
+import { onCleanup, signal } from '@pyreon/reactivity'
+import type { DropEdge, UseSortableOptions, UseSortableResult } from './types'
 
-const SORT_KEY = "__pyreon_sortable_key"
-const SORT_ID = "__pyreon_sortable_id"
+const SORT_KEY = '__pyreon_sortable_key'
+const SORT_ID = '__pyreon_sortable_id'
 
 let _sortableCounter = 0
 
@@ -58,7 +58,7 @@ export function useSortable<T>(options: UseSortableOptions<T>): UseSortableResul
   const activeId = signal<string | number | null>(null)
   const overId = signal<string | number | null>(null)
   const overEdge = signal<DropEdge | null>(null)
-  const axis = options.axis ?? "vertical"
+  const axis = options.axis ?? 'vertical'
 
   const cleanups: (() => void)[] = []
 
@@ -80,7 +80,7 @@ export function useSortable<T>(options: UseSortableOptions<T>): UseSortableResul
 
     // Determine insert position based on closest edge
     const rawInsert =
-      edge === "bottom" || edge === "right"
+      edge === 'bottom' || edge === 'right'
         ? dropIndex >= dragIndex
           ? dropIndex
           : dropIndex + 1
@@ -121,8 +121,8 @@ export function useSortable<T>(options: UseSortableOptions<T>): UseSortableResul
     const keyHandler = (e: KeyboardEvent) => {
       if (!e.altKey) return
 
-      const isUp = axis === "vertical" ? e.key === "ArrowUp" : e.key === "ArrowLeft"
-      const isDown = axis === "vertical" ? e.key === "ArrowDown" : e.key === "ArrowRight"
+      const isUp = axis === 'vertical' ? e.key === 'ArrowUp' : e.key === 'ArrowLeft'
+      const isDown = axis === 'vertical' ? e.key === 'ArrowDown' : e.key === 'ArrowRight'
       if (!isUp && !isDown) return
 
       const focused = document.activeElement as HTMLElement | null
@@ -148,7 +148,7 @@ export function useSortable<T>(options: UseSortableOptions<T>): UseSortableResul
 
       // Restore focus after DOM update
       requestAnimationFrame(() => {
-        const items = el.querySelectorAll("[data-pyreon-sort-key]")
+        const items = el.querySelectorAll('[data-pyreon-sort-key]')
         for (const item of items) {
           if ((item as HTMLElement).dataset.pyreonSortKey === focusedKey) {
             ;(item as HTMLElement).focus()
@@ -158,18 +158,18 @@ export function useSortable<T>(options: UseSortableOptions<T>): UseSortableResul
       })
     }
 
-    el.addEventListener("keydown", keyHandler)
-    cleanups.push(() => el.removeEventListener("keydown", keyHandler))
+    el.addEventListener('keydown', keyHandler)
+    cleanups.push(() => el.removeEventListener('keydown', keyHandler))
   }
 
   function itemRef(key: string | number): (el: HTMLElement) => void {
     return (el: HTMLElement) => {
       el.dataset.pyreonSortKey = String(key)
-      if (!el.hasAttribute("tabindex")) el.setAttribute("tabindex", "0")
-      el.setAttribute("role", "listitem")
-      el.setAttribute("aria-roledescription", "sortable item")
+      if (!el.hasAttribute('tabindex')) el.setAttribute('tabindex', '0')
+      el.setAttribute('role', 'listitem')
+      el.setAttribute('aria-roledescription', 'sortable item')
 
-      const allowedEdges: Edge[] = axis === "vertical" ? ["top", "bottom"] : ["left", "right"]
+      const allowedEdges: Edge[] = axis === 'vertical' ? ['top', 'bottom'] : ['left', 'right']
 
       const cleanup = combine(
         draggable({