@spark-ui/hooks 11.6.1 → 11.7.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [11.7.0](https://github.com/leboncoin/spark-web/compare/v11.6.1...v11.7.0) (2025-11-24)
+
+### Bug Fixes
+
+- **hooks:** make generic usage optional on useSortableList ([e435a16](https://github.com/leboncoin/spark-web/commit/e435a1614201599a19dc2cc5125b88e474a4c32a))
+
+### Features
+
+- **hooks:** useSortableList hook ([dd34c3d](https://github.com/leboncoin/spark-web/commit/dd34c3d7856f3fe4426c55d7e7600f0e2df38aa7))
+
 ## [11.6.1](https://github.com/leboncoin/spark-web/compare/v11.6.0...v11.6.1) (2025-11-21)
 
 **Note:** Version bump only for package @spark-ui/hooks

package/dist/use-sortable-list/index.d.mts

@@ -0,0 +1,98 @@
+import { Ref } from 'react';
+
+interface UseSortableListOptions<T> {
+    /**
+     * The list of items to be sortable
+     */
+    items: T[];
+    /**
+     * Callback called when items are reordered
+     * @param newItems - The reordered items array
+     */
+    onReorder: (newItems: T[]) => void;
+    /**
+     * Function to generate a unique key for each item
+     * @param item - The item to generate a key for
+     * @returns A unique string key for the item
+     */
+    getItemKey: (item: T) => string;
+}
+interface SortableItemProps<TElement extends HTMLElement = HTMLElement> {
+    /**
+     * Whether the item is draggable
+     */
+    draggable: boolean;
+    /**
+     * Handler for drag start event
+     */
+    onDragStart: (e: React.DragEvent) => void;
+    /**
+     * Handler for drag enter event
+     */
+    onDragEnter: (e: React.DragEvent) => void;
+    /**
+     * Handler for drag over event
+     */
+    onDragOver: (e: React.DragEvent) => void;
+    /**
+     * Handler for drag leave event
+     */
+    onDragLeave: (e: React.DragEvent) => void;
+    /**
+     * Handler for drag end event
+     */
+    onDragEnd: (e: React.DragEvent) => void;
+    /**
+     * Handler for drop event
+     */
+    onDrop: (e: React.DragEvent) => void;
+    /**
+     * Handler for keyboard navigation
+     */
+    onKeyDown: (e: React.KeyboardEvent) => void;
+    /**
+     * Tab index for keyboard navigation
+     */
+    tabIndex: number;
+    /**
+     * Ref callback to attach to the item element
+     */
+    ref: Ref<TElement>;
+}
+interface UseSortableListReturn<T> {
+    /**
+     * Get props to spread on a sortable item element (includes ref)
+     * @param item - The item to get props for
+     * @param index - The current index of the item in the list
+     * @returns Props object to spread on the element
+     */
+    getItemProps: <TElement extends HTMLElement = HTMLElement>(item: T, index: number) => SortableItemProps<TElement>;
+}
+/**
+ * Hook to make a list of items sortable via drag and drop and keyboard navigation
+ *
+ * @example
+ * ```tsx
+ * const { getItemProps } = useSortableList({
+ *   items: myItems,
+ *   onReorder: setMyItems,
+ *   getItemKey: (item) => item.id
+ * })
+ *
+ * return (
+ *   <ul>
+ *     {myItems.map((item, index) => (
+ *       <li
+ *         key={getItemKey(item)}
+ *         {...getItemProps(item, index)}
+ *       >
+ *         {item.name}
+ *       </li>
+ *     ))}
+ *   </ul>
+ * )
+ * ```
+ */
+declare function useSortableList<T>({ items, onReorder, getItemKey, }: UseSortableListOptions<T>): UseSortableListReturn<T>;
+
+export { type SortableItemProps, type UseSortableListOptions, type UseSortableListReturn, useSortableList };

package/dist/use-sortable-list/index.d.ts

@@ -0,0 +1,98 @@
+import { Ref } from 'react';
+
+interface UseSortableListOptions<T> {
+    /**
+     * The list of items to be sortable
+     */
+    items: T[];
+    /**
+     * Callback called when items are reordered
+     * @param newItems - The reordered items array
+     */
+    onReorder: (newItems: T[]) => void;
+    /**
+     * Function to generate a unique key for each item
+     * @param item - The item to generate a key for
+     * @returns A unique string key for the item
+     */
+    getItemKey: (item: T) => string;
+}
+interface SortableItemProps<TElement extends HTMLElement = HTMLElement> {
+    /**
+     * Whether the item is draggable
+     */
+    draggable: boolean;
+    /**
+     * Handler for drag start event
+     */
+    onDragStart: (e: React.DragEvent) => void;
+    /**
+     * Handler for drag enter event
+     */
+    onDragEnter: (e: React.DragEvent) => void;
+    /**
+     * Handler for drag over event
+     */
+    onDragOver: (e: React.DragEvent) => void;
+    /**
+     * Handler for drag leave event
+     */
+    onDragLeave: (e: React.DragEvent) => void;
+    /**
+     * Handler for drag end event
+     */
+    onDragEnd: (e: React.DragEvent) => void;
+    /**
+     * Handler for drop event
+     */
+    onDrop: (e: React.DragEvent) => void;
+    /**
+     * Handler for keyboard navigation
+     */
+    onKeyDown: (e: React.KeyboardEvent) => void;
+    /**
+     * Tab index for keyboard navigation
+     */
+    tabIndex: number;
+    /**
+     * Ref callback to attach to the item element
+     */
+    ref: Ref<TElement>;
+}
+interface UseSortableListReturn<T> {
+    /**
+     * Get props to spread on a sortable item element (includes ref)
+     * @param item - The item to get props for
+     * @param index - The current index of the item in the list
+     * @returns Props object to spread on the element
+     */
+    getItemProps: <TElement extends HTMLElement = HTMLElement>(item: T, index: number) => SortableItemProps<TElement>;
+}
+/**
+ * Hook to make a list of items sortable via drag and drop and keyboard navigation
+ *
+ * @example
+ * ```tsx
+ * const { getItemProps } = useSortableList({
+ *   items: myItems,
+ *   onReorder: setMyItems,
+ *   getItemKey: (item) => item.id
+ * })
+ *
+ * return (
+ *   <ul>
+ *     {myItems.map((item, index) => (
+ *       <li
+ *         key={getItemKey(item)}
+ *         {...getItemProps(item, index)}
+ *       >
+ *         {item.name}
+ *       </li>
+ *     ))}
+ *   </ul>
+ * )
+ * ```
+ */
+declare function useSortableList<T>({ items, onReorder, getItemKey, }: UseSortableListOptions<T>): UseSortableListReturn<T>;
+
+export { type SortableItemProps, type UseSortableListOptions, type UseSortableListReturn, useSortableList };

package/dist/use-sortable-list/index.js

@@ -0,0 +1,128 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/use-sortable-list/index.ts
+var use_sortable_list_exports = {};
+__export(use_sortable_list_exports, {
+  useSortableList: () => useSortableList
+});
+module.exports = __toCommonJS(use_sortable_list_exports);
+
+// src/use-sortable-list/useSortableList.tsx
+var import_react = require("react");
+function useSortableList({
+  items,
+  onReorder,
+  getItemKey
+}) {
+  const itemRefs = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const handleDragStart = (e, index) => {
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", index.toString());
+    e.currentTarget.style.opacity = "var(--opacity-dim-3)";
+  };
+  const handleDragEnter = (e) => {
+    e.preventDefault();
+    e.currentTarget.setAttribute("data-drag-over", "true");
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+  };
+  const handleDragLeave = (e) => {
+    const relatedTarget = e.relatedTarget;
+    const currentTarget = e.currentTarget;
+    if (!relatedTarget || !currentTarget.contains(relatedTarget)) {
+      e.currentTarget.removeAttribute("data-drag-over");
+    }
+  };
+  const handleDragEnd = (e) => {
+    ;
+    e.currentTarget.style.opacity = "";
+    e.currentTarget.removeAttribute("data-drag-over");
+  };
+  const handleDrop = (e, dropIndex) => {
+    e.preventDefault();
+    e.currentTarget.removeAttribute("data-drag-over");
+    const dragIndex = parseInt(e.dataTransfer.getData("text/plain"), 10);
+    if (!isNaN(dragIndex) && dragIndex !== dropIndex && dragIndex >= 0 && dragIndex < items.length) {
+      const newItems = [...items];
+      const [removed] = newItems.splice(dragIndex, 1);
+      if (removed) {
+        newItems.splice(dropIndex, 0, removed);
+        onReorder(newItems);
+      }
+    }
+  };
+  const handleKeyDown = (e, _item, index) => {
+    let direction = 0;
+    if (e.key === "ArrowUp") {
+      direction = -1;
+    } else if (e.key === "ArrowDown") {
+      direction = 1;
+    } else {
+      return;
+    }
+    const targetIndex = index + direction;
+    if (targetIndex < 0 || targetIndex >= items.length) return;
+    e.preventDefault();
+    const newItems = [...items];
+    const currentItem = newItems[index];
+    const targetItem = newItems[targetIndex];
+    if (currentItem && targetItem) {
+      ;
+      [newItems[index], newItems[targetIndex]] = [targetItem, currentItem];
+      onReorder(newItems);
+      requestAnimationFrame(() => {
+        const itemKey = getItemKey(currentItem);
+        const element = itemRefs.current.get(itemKey);
+        element?.focus();
+      });
+    }
+  };
+  const getItemProps = (item, index) => {
+    const itemKey = getItemKey(item);
+    return {
+      draggable: true,
+      onDragStart: (e) => handleDragStart(e, index),
+      onDragEnter: handleDragEnter,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDragEnd: handleDragEnd,
+      onDrop: (e) => handleDrop(e, index),
+      onKeyDown: (e) => handleKeyDown(e, item, index),
+      tabIndex: 0,
+      ref: (node) => {
+        if (node) {
+          itemRefs.current.set(itemKey, node);
+        } else {
+          itemRefs.current.delete(itemKey);
+        }
+      }
+    };
+  };
+  return {
+    getItemProps
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useSortableList
+});
+//# sourceMappingURL=index.js.map

package/dist/use-sortable-list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/use-sortable-list/index.ts","../../src/use-sortable-list/useSortableList.tsx"],"sourcesContent":["export { useSortableList } from './useSortableList'\nexport type {\n  UseSortableListOptions,\n  UseSortableListReturn,\n  SortableItemProps,\n} from './useSortableList'\n","/* eslint-disable max-lines-per-function */\nimport { Ref, useRef } from 'react'\n\nexport interface UseSortableListOptions<T> {\n  /**\n   * The list of items to be sortable\n   */\n  items: T[]\n  /**\n   * Callback called when items are reordered\n   * @param newItems - The reordered items array\n   */\n  onReorder: (newItems: T[]) => void\n  /**\n   * Function to generate a unique key for each item\n   * @param item - The item to generate a key for\n   * @returns A unique string key for the item\n   */\n  getItemKey: (item: T) => string\n}\n\nexport interface SortableItemProps<TElement extends HTMLElement = HTMLElement> {\n  /**\n   * Whether the item is draggable\n   */\n  draggable: boolean\n  /**\n   * Handler for drag start event\n   */\n  onDragStart: (e: React.DragEvent) => void\n  /**\n   * Handler for drag enter event\n   */\n  onDragEnter: (e: React.DragEvent) => void\n  /**\n   * Handler for drag over event\n   */\n  onDragOver: (e: React.DragEvent) => void\n  /**\n   * Handler for drag leave event\n   */\n  onDragLeave: (e: React.DragEvent) => void\n  /**\n   * Handler for drag end event\n   */\n  onDragEnd: (e: React.DragEvent) => void\n  /**\n   * Handler for drop event\n   */\n  onDrop: (e: React.DragEvent) => void\n  /**\n   * Handler for keyboard navigation\n   */\n  onKeyDown: (e: React.KeyboardEvent) => void\n  /**\n   * Tab index for keyboard navigation\n   */\n  tabIndex: number\n  /**\n   * Ref callback to attach to the item element\n   */\n  ref: Ref<TElement>\n}\n\nexport interface UseSortableListReturn<T> {\n  /**\n   * Get props to spread on a sortable item element (includes ref)\n   * @param item - The item to get props for\n   * @param index - The current index of the item in the list\n   * @returns Props object to spread on the element\n   */\n  getItemProps: <TElement extends HTMLElement = HTMLElement>(\n    item: T,\n    index: number\n  ) => SortableItemProps<TElement>\n}\n\n/**\n * Hook to make a list of items sortable via drag and drop and keyboard navigation\n *\n * @example\n * ```tsx\n * const { getItemProps } = useSortableList({\n *   items: myItems,\n *   onReorder: setMyItems,\n *   getItemKey: (item) => item.id\n * })\n *\n * return (\n *   <ul>\n *     {myItems.map((item, index) => (\n *       <li\n *         key={getItemKey(item)}\n *         {...getItemProps(item, index)}\n *       >\n *         {item.name}\n *       </li>\n *     ))}\n *   </ul>\n * )\n * ```\n */\nexport function useSortableList<T>({\n  items,\n  onReorder,\n  getItemKey,\n}: UseSortableListOptions<T>): UseSortableListReturn<T> {\n  // Refs to maintain focus after keyboard reordering\n  // Uses a key based on the item rather than index\n  const itemRefs = useRef<Map<string, HTMLElement>>(new Map())\n\n  const handleDragStart = (e: React.DragEvent, index: number) => {\n    e.dataTransfer.effectAllowed = 'move'\n    e.dataTransfer.setData('text/plain', index.toString())\n    // Apply inline style for opacity during drag\n    ;(e.currentTarget as HTMLElement).style.opacity = 'var(--opacity-dim-3)'\n  }\n\n  const handleDragEnter = (e: React.DragEvent) => {\n    e.preventDefault()\n    e.currentTarget.setAttribute('data-drag-over', 'true')\n  }\n\n  const handleDragOver = (e: React.DragEvent) => {\n    e.preventDefault()\n    e.dataTransfer.dropEffect = 'move'\n  }\n\n  const handleDragLeave = (e: React.DragEvent) => {\n    // Only remove the attribute if we're actually leaving the element\n    // (not just moving to a child element)\n    const relatedTarget = e.relatedTarget as Node | null\n    const currentTarget = e.currentTarget as Node\n\n    if (!relatedTarget || !currentTarget.contains(relatedTarget)) {\n      e.currentTarget.removeAttribute('data-drag-over')\n    }\n  }\n\n  const handleDragEnd = (e: React.DragEvent) => {\n    // Remove inline style for opacity\n    ;(e.currentTarget as HTMLElement).style.opacity = ''\n    e.currentTarget.removeAttribute('data-drag-over')\n  }\n\n  const handleDrop = (e: React.DragEvent, dropIndex: number) => {\n    e.preventDefault()\n    e.currentTarget.removeAttribute('data-drag-over')\n\n    const dragIndex = parseInt(e.dataTransfer.getData('text/plain'), 10)\n\n    if (\n      !isNaN(dragIndex) &&\n      dragIndex !== dropIndex &&\n      dragIndex >= 0 &&\n      dragIndex < items.length\n    ) {\n      const newItems = [...items]\n      const [removed] = newItems.splice(dragIndex, 1)\n      if (removed) {\n        newItems.splice(dropIndex, 0, removed)\n        onReorder(newItems)\n      }\n    }\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent, _item: T, index: number) => {\n    // Determine direction\n    let direction = 0\n    if (e.key === 'ArrowUp') {\n      direction = -1\n    } else if (e.key === 'ArrowDown') {\n      direction = 1\n    } else {\n      return\n    }\n\n    const targetIndex = index + direction\n\n    // Validate move is within bounds\n    if (targetIndex < 0 || targetIndex >= items.length) return\n\n    e.preventDefault()\n\n    // Create new array and swap items\n    const newItems = [...items]\n    const currentItem = newItems[index]\n    const targetItem = newItems[targetIndex]\n\n    if (currentItem && targetItem) {\n      ;[newItems[index], newItems[targetIndex]] = [targetItem, currentItem]\n      onReorder(newItems)\n\n      // Maintain focus on the moved item\n      requestAnimationFrame(() => {\n        const itemKey = getItemKey(currentItem)\n        const element = itemRefs.current.get(itemKey)\n        element?.focus()\n      })\n    }\n  }\n\n  const getItemProps = <TElement extends HTMLElement = HTMLElement>(\n    item: T,\n    index: number\n  ): SortableItemProps<TElement> => {\n    const itemKey = getItemKey(item)\n\n    return {\n      draggable: true,\n      onDragStart: e => handleDragStart(e, index),\n      onDragEnter: handleDragEnter,\n      onDragOver: handleDragOver,\n      onDragLeave: handleDragLeave,\n      onDragEnd: handleDragEnd,\n      onDrop: e => handleDrop(e, index),\n      onKeyDown: e => handleKeyDown(e, item, index),\n      tabIndex: 0,\n      ref: (node: TElement | null) => {\n        if (node) {\n          itemRefs.current.set(itemKey, node as HTMLElement)\n        } else {\n          itemRefs.current.delete(itemKey)\n        }\n      },\n    }\n  }\n\n  return {\n    getItemProps,\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/use-sortable-list/index.mjs

@@ -0,0 +1,101 @@
+// src/use-sortable-list/useSortableList.tsx
+import { useRef } from "react";
+function useSortableList({
+  items,
+  onReorder,
+  getItemKey
+}) {
+  const itemRefs = useRef(/* @__PURE__ */ new Map());
+  const handleDragStart = (e, index) => {
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", index.toString());
+    e.currentTarget.style.opacity = "var(--opacity-dim-3)";
+  };
+  const handleDragEnter = (e) => {
+    e.preventDefault();
+    e.currentTarget.setAttribute("data-drag-over", "true");
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+  };
+  const handleDragLeave = (e) => {
+    const relatedTarget = e.relatedTarget;
+    const currentTarget = e.currentTarget;
+    if (!relatedTarget || !currentTarget.contains(relatedTarget)) {
+      e.currentTarget.removeAttribute("data-drag-over");
+    }
+  };
+  const handleDragEnd = (e) => {
+    ;
+    e.currentTarget.style.opacity = "";
+    e.currentTarget.removeAttribute("data-drag-over");
+  };
+  const handleDrop = (e, dropIndex) => {
+    e.preventDefault();
+    e.currentTarget.removeAttribute("data-drag-over");
+    const dragIndex = parseInt(e.dataTransfer.getData("text/plain"), 10);
+    if (!isNaN(dragIndex) && dragIndex !== dropIndex && dragIndex >= 0 && dragIndex < items.length) {
+      const newItems = [...items];
+      const [removed] = newItems.splice(dragIndex, 1);
+      if (removed) {
+        newItems.splice(dropIndex, 0, removed);
+        onReorder(newItems);
+      }
+    }
+  };
+  const handleKeyDown = (e, _item, index) => {
+    let direction = 0;
+    if (e.key === "ArrowUp") {
+      direction = -1;
+    } else if (e.key === "ArrowDown") {
+      direction = 1;
+    } else {
+      return;
+    }
+    const targetIndex = index + direction;
+    if (targetIndex < 0 || targetIndex >= items.length) return;
+    e.preventDefault();
+    const newItems = [...items];
+    const currentItem = newItems[index];
+    const targetItem = newItems[targetIndex];
+    if (currentItem && targetItem) {
+      ;
+      [newItems[index], newItems[targetIndex]] = [targetItem, currentItem];
+      onReorder(newItems);
+      requestAnimationFrame(() => {
+        const itemKey = getItemKey(currentItem);
+        const element = itemRefs.current.get(itemKey);
+        element?.focus();
+      });
+    }
+  };
+  const getItemProps = (item, index) => {
+    const itemKey = getItemKey(item);
+    return {
+      draggable: true,
+      onDragStart: (e) => handleDragStart(e, index),
+      onDragEnter: handleDragEnter,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDragEnd: handleDragEnd,
+      onDrop: (e) => handleDrop(e, index),
+      onKeyDown: (e) => handleKeyDown(e, item, index),
+      tabIndex: 0,
+      ref: (node) => {
+        if (node) {
+          itemRefs.current.set(itemKey, node);
+        } else {
+          itemRefs.current.delete(itemKey);
+        }
+      }
+    };
+  };
+  return {
+    getItemProps
+  };
+}
+export {
+  useSortableList
+};
+//# sourceMappingURL=index.mjs.map

package/dist/use-sortable-list/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/use-sortable-list/useSortableList.tsx"],"sourcesContent":["/* eslint-disable max-lines-per-function */\nimport { Ref, useRef } from 'react'\n\nexport interface UseSortableListOptions<T> {\n  /**\n   * The list of items to be sortable\n   */\n  items: T[]\n  /**\n   * Callback called when items are reordered\n   * @param newItems - The reordered items array\n   */\n  onReorder: (newItems: T[]) => void\n  /**\n   * Function to generate a unique key for each item\n   * @param item - The item to generate a key for\n   * @returns A unique string key for the item\n   */\n  getItemKey: (item: T) => string\n}\n\nexport interface SortableItemProps<TElement extends HTMLElement = HTMLElement> {\n  /**\n   * Whether the item is draggable\n   */\n  draggable: boolean\n  /**\n   * Handler for drag start event\n   */\n  onDragStart: (e: React.DragEvent) => void\n  /**\n   * Handler for drag enter event\n   */\n  onDragEnter: (e: React.DragEvent) => void\n  /**\n   * Handler for drag over event\n   */\n  onDragOver: (e: React.DragEvent) => void\n  /**\n   * Handler for drag leave event\n   */\n  onDragLeave: (e: React.DragEvent) => void\n  /**\n   * Handler for drag end event\n   */\n  onDragEnd: (e: React.DragEvent) => void\n  /**\n   * Handler for drop event\n   */\n  onDrop: (e: React.DragEvent) => void\n  /**\n   * Handler for keyboard navigation\n   */\n  onKeyDown: (e: React.KeyboardEvent) => void\n  /**\n   * Tab index for keyboard navigation\n   */\n  tabIndex: number\n  /**\n   * Ref callback to attach to the item element\n   */\n  ref: Ref<TElement>\n}\n\nexport interface UseSortableListReturn<T> {\n  /**\n   * Get props to spread on a sortable item element (includes ref)\n   * @param item - The item to get props for\n   * @param index - The current index of the item in the list\n   * @returns Props object to spread on the element\n   */\n  getItemProps: <TElement extends HTMLElement = HTMLElement>(\n    item: T,\n    index: number\n  ) => SortableItemProps<TElement>\n}\n\n/**\n * Hook to make a list of items sortable via drag and drop and keyboard navigation\n *\n * @example\n * ```tsx\n * const { getItemProps } = useSortableList({\n *   items: myItems,\n *   onReorder: setMyItems,\n *   getItemKey: (item) => item.id\n * })\n *\n * return (\n *   <ul>\n *     {myItems.map((item, index) => (\n *       <li\n *         key={getItemKey(item)}\n *         {...getItemProps(item, index)}\n *       >\n *         {item.name}\n *       </li>\n *     ))}\n *   </ul>\n * )\n * ```\n */\nexport function useSortableList<T>({\n  items,\n  onReorder,\n  getItemKey,\n}: UseSortableListOptions<T>): UseSortableListReturn<T> {\n  // Refs to maintain focus after keyboard reordering\n  // Uses a key based on the item rather than index\n  const itemRefs = useRef<Map<string, HTMLElement>>(new Map())\n\n  const handleDragStart = (e: React.DragEvent, index: number) => {\n    e.dataTransfer.effectAllowed = 'move'\n    e.dataTransfer.setData('text/plain', index.toString())\n    // Apply inline style for opacity during drag\n    ;(e.currentTarget as HTMLElement).style.opacity = 'var(--opacity-dim-3)'\n  }\n\n  const handleDragEnter = (e: React.DragEvent) => {\n    e.preventDefault()\n    e.currentTarget.setAttribute('data-drag-over', 'true')\n  }\n\n  const handleDragOver = (e: React.DragEvent) => {\n    e.preventDefault()\n    e.dataTransfer.dropEffect = 'move'\n  }\n\n  const handleDragLeave = (e: React.DragEvent) => {\n    // Only remove the attribute if we're actually leaving the element\n    // (not just moving to a child element)\n    const relatedTarget = e.relatedTarget as Node | null\n    const currentTarget = e.currentTarget as Node\n\n    if (!relatedTarget || !currentTarget.contains(relatedTarget)) {\n      e.currentTarget.removeAttribute('data-drag-over')\n    }\n  }\n\n  const handleDragEnd = (e: React.DragEvent) => {\n    // Remove inline style for opacity\n    ;(e.currentTarget as HTMLElement).style.opacity = ''\n    e.currentTarget.removeAttribute('data-drag-over')\n  }\n\n  const handleDrop = (e: React.DragEvent, dropIndex: number) => {\n    e.preventDefault()\n    e.currentTarget.removeAttribute('data-drag-over')\n\n    const dragIndex = parseInt(e.dataTransfer.getData('text/plain'), 10)\n\n    if (\n      !isNaN(dragIndex) &&\n      dragIndex !== dropIndex &&\n      dragIndex >= 0 &&\n      dragIndex < items.length\n    ) {\n      const newItems = [...items]\n      const [removed] = newItems.splice(dragIndex, 1)\n      if (removed) {\n        newItems.splice(dropIndex, 0, removed)\n        onReorder(newItems)\n      }\n    }\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent, _item: T, index: number) => {\n    // Determine direction\n    let direction = 0\n    if (e.key === 'ArrowUp') {\n      direction = -1\n    } else if (e.key === 'ArrowDown') {\n      direction = 1\n    } else {\n      return\n    }\n\n    const targetIndex = index + direction\n\n    // Validate move is within bounds\n    if (targetIndex < 0 || targetIndex >= items.length) return\n\n    e.preventDefault()\n\n    // Create new array and swap items\n    const newItems = [...items]\n    const currentItem = newItems[index]\n    const targetItem = newItems[targetIndex]\n\n    if (currentItem && targetItem) {\n      ;[newItems[index], newItems[targetIndex]] = [targetItem, currentItem]\n      onReorder(newItems)\n\n      // Maintain focus on the moved item\n      requestAnimationFrame(() => {\n        const itemKey = getItemKey(currentItem)\n        const element = itemRefs.current.get(itemKey)\n        element?.focus()\n      })\n    }\n  }\n\n  const getItemProps = <TElement extends HTMLElement = HTMLElement>(\n    item: T,\n    index: number\n  ): SortableItemProps<TElement> => {\n    const itemKey = getItemKey(item)\n\n    return {\n      draggable: true,\n      onDragStart: e => handleDragStart(e, index),\n      onDragEnter: handleDragEnter,\n      onDragOver: handleDragOver,\n      onDragLeave: handleDragLeave,\n      onDragEnd: handleDragEnd,\n      onDrop: e => handleDrop(e, index),\n      onKeyDown: e => handleKeyDown(e, item, index),\n      tabIndex: 0,\n      ref: (node: TElement | null) => {\n        if (node) {\n          itemRefs.current.set(itemKey, node as HTMLElement)\n        } else {\n          itemRefs.current.delete(itemKey)\n        }\n      },\n    }\n  }\n\n  return {\n    getItemProps,\n  }\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/hooks",
-  "version": "11.6.1",
+  "version": "11.7.0",
   "description": "Common hooks for Spark UI",
   "exports": {
     "./*": {
@@ -49,5 +49,5 @@
   },
   "homepage": "https://sparkui.vercel.app",
   "license": "MIT",
-  "gitHead": "98834c44402e2b699093384f86a18249e502d42d"
+  "gitHead": "144e3710f9b2d970a559d925019983fe10852c15"
 }