@jswork/react-dnd-list 0.0.0-stage → 1.0.2

package/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020 afei <1290657123@qq.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -1,3 +1,89 @@
-# Temporary Holding Version
+# react-dnd-list
+> A lightweight, accessible draggable list component built with dnd-kit + @jswork/react-list.
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![version][version-image]][version-url]
+[![license][license-image]][license-url]
+
+## installation
+```shell
+pnpm add @jswork/react-dnd-list
+```
+
+> `react` / `react-dom` 是 peerDependencies（>=18）。dnd-kit 与 `@jswork/react-list` 已随包安装。
+
+## usage
+1. import css
+  ```scss
+  @import "~@jswork/react-dnd-list/dist/style.css";
+  ```
+2. import js
+  ```tsx
+  import React, { useState } from 'react';
+  import ReactDndList from '@jswork/react-dnd-list';
+
+  const initial = [
+    { id: 'a', name: 'Alice' },
+    { id: 'b', name: 'Bob' },
+    { id: 'c', name: 'Carol' },
+  ];
+
+  export default () => {
+    const [items, setItems] = useState(initial);
+
+    return (
+      <ReactDndList
+        value={items}
+        onChange={setItems}
+        handleOnly
+        classNames={{ item: 'row', dragging: 'row--active' }}
+        slots={{
+          item: ({ item, dragHandleProps }) => (
+            <>
+              <button {...dragHandleProps}>⠿</button>
+              <span>{item.name}</span>
+            </>
+          ),
+          empty: () => <p>No data</p>,
+        }}
+      />
+    );
+  };
+  ```
+
+## api
+
+| prop | type | default | desc |
+|---|---|---|---|
+| `value` | `T[]` | 必填 | 受控数据，组件不修改它 |
+| `onChange` | `(next: T[], event: DragEndEvent) => void` | - | 拖拽完成后回传新顺序 |
+| `keyExtractor` | `KeyExtractor<T>` | `'id'` | 与 `@jswork/react-list` 完全一致，支持 `SELF` / `INDEX` / dot path / 函数 |
+| `slots.item` | `Slot<SortableItemContext<T>>` | 必填 | 每行内容；上下文含 `item` / `index` / `data` / `dragHandleProps` / `isDragging` |
+| `slots.empty` | `Slot<{ data: T[] }>` | - | 空状态 |
+| `handleOnly` | `boolean` | `false` | `true` = 仅 `dragHandleProps` 可拖；`false` = 整行可拖 |
+| `direction` | `'vertical' \| 'horizontal'` | `'vertical'` | sortingStrategy 快捷方式 |
+| `disabled` | `boolean` | `false` | 禁用拖拽，`onChange` 不触发 |
+| `className` | `string` | - | 合并到根容器 |
+| `classNames` | `{ root?, item?, dragging?, empty? }` | - | 细粒度 class，全部经 `classnames` 合并 |
+| `dndContextProps` | `DndContextProps` | - | 逃生舱，展开到 `DndContext`；`onDragEnd` 作为前置回调转发 |
+| `sortableContextProps` | `Omit<SortableContextProps, 'items' \| 'children'>` | - | 逃生舱；`items` 由内部接管，`strategy` 优先于 `direction` |
+
+导出：`default`、`ReactDndList`、`SELF`、`INDEX`、`reorder` 及全部类型。
+
+## important notes
+
+- **`handleOnly={true}` 时必须在 slot 里渲染并 spread `dragHandleProps`**，否则整列表拖不动。这是 dnd-kit 的固有约束，组件不做运行时检测。
+- `keyExtractor` 产出的 id 必须唯一；id 重复时 dnd-kit 行为未定义。
+- 不使用 `DragOverlay`：拖起的就是行本身。若根容器设了 `overflow: hidden`，拖到边缘会被裁切 —— 用 `dndContextProps.modifiers` 或自行包裹 `DragOverlay`。
+- 空列表不会创建 `DndContext` / `SortableContext`。
+- 键盘可访问性由 `PointerSensor` + `KeyboardSensor` + `sortableKeyboardCoordinates` 提供（空格拾起、方向键移动、空格放下、Esc 取消）。
+
+## preview
+- https://afeiship.github.io/react-dnd-list/
+
+## license
+MIT
+
+[version-image]: https://img.shields.io/npm/v/@jswork/react-dnd-list
+[version-url]: https://npmjs.org/package/@jswork/react-dnd-list
+[license-image]: https://img.shields.io/npm/l/@jswork/react-dnd-list
+[license-url]: https://github.com/afeiship/react-dnd-list/blob/master/LICENSE.txt

package/dist/components/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { UniqueIdentifier } from '@dnd-kit/core';
+import type { ReactDndListProps } from './types';
+/**
+ * Reorders `value` by moving the item at `ids.indexOf(activeId)` to `ids.indexOf(overId)`.
+ * `ids` must be the positional key array of `value`, with unique entries.
+ * Returns `null` when either id is unknown or the indices are equal.
+ */
+export declare function reorder<T>(value: T[], ids: UniqueIdentifier[], activeId: UniqueIdentifier, overId: UniqueIdentifier): T[] | null;
+declare function ReactDndList<T>(props: ReactDndListProps<T>): React.JSX.Element;
+declare namespace ReactDndList {
+    var displayName: string;
+    var version: string;
+}
+export default ReactDndList;

package/dist/components/types.d.ts

@@ -0,0 +1,42 @@
+import type React from 'react';
+import type { DndContextProps, DragEndEvent } from '@dnd-kit/core';
+import type { SortableContextProps, useSortable } from '@dnd-kit/sortable';
+import type { ItemContext, KeyExtractor, Slot } from '@jswork/react-list';
+type SortableResult = ReturnType<typeof useSortable>;
+/**
+ * Props to spread onto a drag handle element.
+ * handleOnly=true: full attributes + listeners + ref.
+ * handleOnly=false: listeners live on the row wrapper; only ref is provided.
+ */
+export type DragHandleProps = Partial<SortableResult['attributes']> & Partial<NonNullable<SortableResult['listeners']>> & {
+    ref: SortableResult['setActivatorNodeRef'];
+};
+export type SortableItemContext<T> = ItemContext<T> & {
+    dragHandleProps: DragHandleProps;
+    isDragging: boolean;
+};
+export interface ReactDndListClassNames {
+    root?: string;
+    item?: string;
+    dragging?: string;
+    empty?: string;
+}
+export interface ReactDndListProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {
+    value: T[];
+    onChange?: (next: T[], event: DragEndEvent) => void;
+    keyExtractor?: KeyExtractor<T>;
+    slots: {
+        item: Slot<SortableItemContext<T>>;
+        empty?: Slot<{
+            data: T[];
+        }>;
+    };
+    handleOnly?: boolean;
+    direction?: 'vertical' | 'horizontal';
+    disabled?: boolean;
+    className?: string;
+    classNames?: ReactDndListClassNames;
+    dndContextProps?: DndContextProps;
+    sortableContextProps?: Omit<SortableContextProps, 'items' | 'children'>;
+}
+export {};

package/dist/index.js

@@ -0,0 +1,11 @@
+/**
+ *  name: @jswork/react-dnd-list
+ *  description: A lightweight, accessible draggable list component built with dnd-kit.
+ *  homepage: https://js.work
+ *  version: 1.0.2
+ *  date: 2026-11-11T12:54:20.265Z
+ *  license: MIT
+ */
+
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("tslib"),require("react"),require("classnames"),require("@dnd-kit/core"),require("@dnd-kit/sortable"),require("@dnd-kit/utilities"),require("@jswork/react-list")):"function"==typeof define&&define.amd?define(["exports","tslib","react","classnames","@dnd-kit/core","@dnd-kit/sortable","@dnd-kit/utilities","@jswork/react-list"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactDndList={},e.tslib,e.React,e.classNames,e.DndKitCore,e.DndKitSortable,e.DndKitUtilities,e.ReactList)}(this,function(e,t,n,r,i,a,s,o){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=l(n),u=l(r),c="react-dnd-list";function f(e,t,n,r){var i=t.indexOf(n),s=t.indexOf(r);return i<0||s<0||i===s?null:a.arrayMove(e,i,s)}function m(e){var n=e.id,r=e.item,i=e.index,l=e.data,f=e.slot,m=e.handleOnly,g=e.disabled,b=e.classNames,v=a.useSortable({id:n,disabled:g}),_=v.attributes,y=v.listeners,p=v.setNodeRef,x=v.setActivatorNodeRef,S=v.transform,E=v.transition,N=v.isDragging,D=m?t.__assign(t.__assign(t.__assign({},_),y),{ref:x}):{ref:x},h=m?{}:t.__assign(t.__assign({},_),y);return d.default.createElement("div",t.__assign({ref:p,className:u.default("".concat(c,"__item"),null==b?void 0:b.item,N&&(null==b?void 0:b.dragging)),style:{transform:s.CSS.Transform.toString(S),transition:E}},h),o.renderSlot(f,{item:r,index:i,data:l,dragHandleProps:D,isDragging:N},n))}function g(e){var r,s=e.value,l=e.onChange,g=e.keyExtractor,b=e.slots,v=e.handleOnly,_=void 0!==v&&v,y=e.direction,p=void 0===y?"vertical":y,x=e.disabled,S=void 0!==x&&x,E=e.className,N=e.classNames,D=e.dndContextProps,h=e.sortableContextProps,C=t.__rest(e,["value","onChange","keyExtractor","slots","handleOnly","direction","disabled","className","classNames","dndContextProps","sortableContextProps"]),k=null!=g?g:"id",O=n.useMemo(function(){return s.map(function(e,t){return o.getKey(e,t,s,k)})},[s,k]),P=i.useSensors(i.useSensor(i.PointerSensor),i.useSensor(i.KeyboardSensor,{coordinateGetter:a.sortableKeyboardCoordinates})),L="horizontal"===p?a.horizontalListSortingStrategy:a.verticalListSortingStrategy,j=null!=D?D:{},q=j.onDragEnd,R=t.__rest(j,["onDragEnd"]),K=u.default(c,null==N?void 0:N.root,E,0===s.length&&(null==N?void 0:N.empty)),M=o.ReactList;return 0===s.length?d.default.createElement("div",t.__assign({className:K},C),o.renderSlot(b.empty,{data:s})):d.default.createElement("div",t.__assign({className:K},C),d.default.createElement(i.DndContext,t.__assign({sensors:P,collisionDetection:i.closestCenter},R,{onDragEnd:function(e){if(null==q||q(e),!S&&e.over){var t=f(s,O,e.active.id,e.over.id);t&&(null==l||l(t,e))}}}),d.default.createElement(a.SortableContext,t.__assign({},h,{items:O,strategy:null!==(r=null==h?void 0:h.strategy)&&void 0!==r?r:L}),d.default.createElement(M,{data:s,keyExtractor:k,slots:{item:function(e){return d.default.createElement(m,{id:O[e.index],item:e.item,index:e.index,data:e.data,slot:b.item,handleOnly:_,disabled:S,classNames:N})}}}))))}g.displayName=c,g.version="1.0.2",Object.defineProperty(e,"INDEX",{enumerable:!0,get:function(){return o.INDEX}}),Object.defineProperty(e,"SELF",{enumerable:!0,get:function(){return o.SELF}}),e.ReactDndList=g,e.default=g,e.reorder=f,Object.defineProperty(e,"__esModule",{value:!0})});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/main.d.ts

@@ -0,0 +1,6 @@
+import Component from './components';
+export { SELF, INDEX } from '@jswork/react-list';
+export type { ReactDndListProps, ReactDndListClassNames, SortableItemContext, DragHandleProps, } from './components/types';
+export { reorder } from './components';
+export { Component as ReactDndList };
+export default Component;

package/dist/style.css

@@ -0,0 +1,8 @@
+.react-dnd-list {
+  display: flex;
+  flex-direction: column;
+}
+.react-dnd-list__item {
+  position: relative;
+  touch-action: none;
+}

package/dist/style.scss

@@ -0,0 +1,9 @@
+.react-dnd-list {
+  display: flex;
+  flex-direction: column;
+
+  &__item {
+    position: relative;
+    touch-action: none;
+  }
+}

package/package.json

@@ -1,6 +1,92 @@
 {
   "name": "@jswork/react-dnd-list",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "homepage": "https://js.work",
+  "version": "1.0.2",
+  "description": "A lightweight, accessible draggable list component built with dnd-kit.",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.js",
+  "typings": "dist/main.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "prettier": "@jswork/style-guide/prettier",
+  "scripts": {
+    "dev": "vite",
+    "clean": "rimraf dist",
+    "build": "npm run clean && rollup -c",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "release": "release-it"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "@jswork/next": "^1.2.2",
+    "@jswork/next-replace-in-file": "^1.0.0",
+    "@jswork/next-rollup-banner": "^1.0.12",
+    "@jswork/presets-tailwind": "^1.1.10",
+    "@jswork/react-markdown-props": "^1.0.1",
+    "@jswork/style-guide": "^1.0.3",
+    "@rollup/plugin-commonjs": "^25.0.3",
+    "@rollup/plugin-image": "^2.1.1",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-replace": "^2.3.4",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@types/jest": "^27.0.3",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
+    "@types/react-test-renderer": "^17.0.0",
+    "@types/testing-library__jest-dom": "^5.14.9",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.19",
+    "babel-loader": "^8.2.2",
+    "core-js": "^3.8.2",
+    "css-loader": "^5.0.1",
+    "indent-string": "^4.0.0",
+    "jest": "^27.4.5",
+    "jest-environment-jsdom": "^27.5.1",
+    "postcss": "^8.4.38",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts-ts": "^3.1.0",
+    "react-test-renderer": "^17.0.1",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.36.0",
+    "rollup-plugin-auto-external": "^2.0.0",
+    "rollup-plugin-banner": "^0.2.1",
+    "rollup-plugin-copy": "^3.3.0",
+    "rollup-plugin-external-globals": "^0.6.1",
+    "rollup-plugin-node-externals": "^2.2.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-scss": "^3.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.29.0",
+    "sass": "^1.47.0",
+    "sass-loader": "^10.1.0",
+    "style-loader": "^2.0.0",
+    "tailwindcss": "^3.4.3",
+    "ts-jest": "^27.1.1",
+    "tslib": "^2.9.1",
+    "typescript": "^4.9.5",
+    "vite": "^5.2.10",
+    "vite-plugin-pwa": "^0.19.8"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@jswork/react-list": "^2.0.18",
+    "classnames": "^2.5.1"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  }
+}

package/src/components/index.tsx

@@ -0,0 +1,232 @@
+import React, { useMemo } from 'react';
+import cx from 'classnames';
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import type { DragEndEvent, UniqueIdentifier } from '@dnd-kit/core';
+import {
+  arrayMove,
+  horizontalListSortingStrategy,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import {
+  ReactList,
+  getKey,
+  renderSlot,
+} from '@jswork/react-list';
+import type {
+  KeyExtractor,
+  ReactListProps,
+  Slot,
+} from '@jswork/react-list';
+import type {
+  DragHandleProps,
+  ReactDndListClassNames,
+  ReactDndListProps,
+  SortableItemContext,
+} from './types';
+
+const CLASS_NAME = 'react-dnd-list';
+const VERSION = '__VERSION__';
+
+/**
+ * Reorders `value` by moving the item at `ids.indexOf(activeId)` to `ids.indexOf(overId)`.
+ * `ids` must be the positional key array of `value`, with unique entries.
+ * Returns `null` when either id is unknown or the indices are equal.
+ */
+export function reorder<T>(
+  value: T[],
+  ids: UniqueIdentifier[],
+  activeId: UniqueIdentifier,
+  overId: UniqueIdentifier
+): T[] | null {
+  const from = ids.indexOf(activeId);
+  const to = ids.indexOf(overId);
+  if (from < 0 || to < 0 || from === to) return null;
+  return arrayMove(value, from, to);
+}
+
+type SortableRowProps<T> = {
+  id: UniqueIdentifier;
+  item: T;
+  index: number;
+  data: T[];
+  slot: Slot<SortableItemContext<T>>;
+  handleOnly: boolean;
+  disabled: boolean;
+  classNames?: ReactDndListClassNames;
+};
+
+function SortableRow<T>({
+  id,
+  item,
+  index,
+  data,
+  slot,
+  handleOnly,
+  disabled,
+  classNames,
+}: SortableRowProps<T>) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id, disabled });
+
+  // Cast: dnd-kit `attributes` (role: string) conflicts with Partial<SyntheticListenerMap>
+  // (Record<string, Function> index signature) under TS 4.9 — TS2322. Type-only.
+  const dragHandleProps: DragHandleProps = handleOnly
+    ? ({ ...attributes, ...listeners, ref: setActivatorNodeRef } as DragHandleProps)
+    : { ref: setActivatorNodeRef };
+
+  const wrapperProps = handleOnly
+    ? {}
+    : { ...attributes, ...listeners };
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={cx(
+        `${CLASS_NAME}__item`,
+        classNames?.item,
+        isDragging && classNames?.dragging
+      )}
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+      }}
+      {...wrapperProps}
+    >
+      {renderSlot<SortableItemContext<T>>(
+        slot,
+        {
+          item,
+          index,
+          data,
+          dragHandleProps,
+          isDragging,
+        },
+        id
+      )}
+    </div>
+  );
+}
+
+function ReactDndList<T>(props: ReactDndListProps<T>) {
+  const {
+    value,
+    onChange,
+    keyExtractor,
+    slots,
+    handleOnly = false,
+    direction = 'vertical',
+    disabled = false,
+    className,
+    classNames,
+    dndContextProps,
+    sortableContextProps,
+    ...rest
+  } = props;
+
+  const extractor = (keyExtractor ?? 'id') as KeyExtractor<T>;
+
+  const ids = useMemo<UniqueIdentifier[]>(
+    () => value.map((item, index) => getKey(item, index, value, extractor)),
+    [value, extractor]
+  );
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  const defaultStrategy =
+    direction === 'horizontal'
+      ? horizontalListSortingStrategy
+      : verticalListSortingStrategy;
+
+  const { onDragEnd: userOnDragEnd, ...restDndContextProps } =
+    dndContextProps ?? {};
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    userOnDragEnd?.(event);
+    if (disabled || !event.over) return;
+    const next = reorder(value, ids, event.active.id, event.over.id);
+    if (next) onChange?.(next, event);
+  };
+
+  const itemSlot: Slot<SortableItemContext<T>> = (ctx) => (
+    <SortableRow
+      id={ids[ctx.index]}
+      item={ctx.item}
+      index={ctx.index}
+      data={ctx.data}
+      slot={slots.item}
+      handleOnly={handleOnly}
+      disabled={disabled}
+      classNames={classNames}
+    />
+  );
+
+  const rootClassName = cx(
+    CLASS_NAME,
+    classNames?.root,
+    className,
+    value.length === 0 && classNames?.empty
+  );
+
+  // Cast: react-list's ReactList returns React.ReactNode, which TS < 5.1 rejects as a
+  // JSX component type (TS2786). Props stay fully checked via ReactListProps<T>.
+  const List = ReactList as React.ComponentType<ReactListProps<T>>;
+
+  if (value.length === 0) {
+    return (
+      <div className={rootClassName} {...rest}>
+        {renderSlot(slots.empty, { data: value })}
+      </div>
+    );
+  }
+
+  return (
+    <div className={rootClassName} {...rest}>
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        {...restDndContextProps}
+        onDragEnd={handleDragEnd}
+      >
+        <SortableContext
+          {...sortableContextProps}
+          items={ids}
+          strategy={sortableContextProps?.strategy ?? defaultStrategy}
+        >
+          <List
+            data={value}
+            keyExtractor={extractor}
+            slots={{ item: itemSlot }}
+          />
+        </SortableContext>
+      </DndContext>
+    </div>
+  );
+}
+
+ReactDndList.displayName = CLASS_NAME;
+ReactDndList.version = VERSION;
+
+export default ReactDndList;

package/src/components/style.scss

@@ -0,0 +1,9 @@
+.react-dnd-list {
+  display: flex;
+  flex-direction: column;
+
+  &__item {
+    position: relative;
+    touch-action: none;
+  }
+}

package/src/components/types.ts

@@ -0,0 +1,53 @@
+import type React from 'react';
+import type { DndContextProps, DragEndEvent } from '@dnd-kit/core';
+import type {
+  SortableContextProps,
+  useSortable,
+} from '@dnd-kit/sortable';
+import type {
+  ItemContext,
+  KeyExtractor,
+  Slot,
+} from '@jswork/react-list';
+
+type SortableResult = ReturnType<typeof useSortable>;
+
+/**
+ * Props to spread onto a drag handle element.
+ * handleOnly=true: full attributes + listeners + ref.
+ * handleOnly=false: listeners live on the row wrapper; only ref is provided.
+ */
+export type DragHandleProps = Partial<SortableResult['attributes']> &
+  Partial<NonNullable<SortableResult['listeners']>> & {
+    ref: SortableResult['setActivatorNodeRef'];
+  };
+
+export type SortableItemContext<T> = ItemContext<T> & {
+  dragHandleProps: DragHandleProps;
+  isDragging: boolean;
+};
+
+export interface ReactDndListClassNames {
+  root?: string;
+  item?: string;
+  dragging?: string;
+  empty?: string;
+}
+
+export interface ReactDndListProps<T>
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {
+  value: T[];
+  onChange?: (next: T[], event: DragEndEvent) => void;
+  keyExtractor?: KeyExtractor<T>;
+  slots: {
+    item: Slot<SortableItemContext<T>>;
+    empty?: Slot<{ data: T[] }>;
+  };
+  handleOnly?: boolean;
+  direction?: 'vertical' | 'horizontal';
+  disabled?: boolean;
+  className?: string;
+  classNames?: ReactDndListClassNames;
+  dndContextProps?: DndContextProps;
+  sortableContextProps?: Omit<SortableContextProps, 'items' | 'children'>;
+}

package/src/main.ts

@@ -0,0 +1,13 @@
+import Component from './components';
+
+export { SELF, INDEX } from '@jswork/react-list';
+export type {
+  ReactDndListProps,
+  ReactDndListClassNames,
+  SortableItemContext,
+  DragHandleProps,
+} from './components/types';
+export { reorder } from './components';
+export { Component as ReactDndList };
+
+export default Component;