{"_id":"@dbugger/drag-grouped-list","_rev":"3-56ec351c3cf11c16c95ce8a53768ff24","name":"@dbugger/drag-grouped-list","dist-tags":{"latest":"0.2.1"},"versions":{"0.1.1":{"name":"@dbugger/drag-grouped-list","version":"0.1.1","license":"MIT","_id":"@dbugger/drag-grouped-list@0.1.1","maintainers":[{"name":"enriquemorenotent","email":"enriquemorenotent@gmail.com"}],"dist":{"shasum":"da6644a8e23b00daf83b2e3b87603da701b105f5","tarball":"https://registry.npmjs.org/@dbugger/drag-grouped-list/-/drag-grouped-list-0.1.1.tgz","fileCount":5,"integrity":"sha512-B8k1MAeEqoxW+k4+TIsWi3yW6zEqlVsZYHSHRHSrQaqNkONB3teyB/OFGv5CLHKdKgF1SgtYqS3GIIA79DLjWg==","signatures":[{"sig":"MEUCIQDRf2lWaDIc27FpuQ+KEoJDlP1XsK8HpgRrih+OFGkYTgIgJi13VSXSxUhMy0Mz6yS0lZ/KbiaLpCbAXdhVCCGaKTY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":7690},"main":"./dist/index.js","type":"module","exports":{".":"./dist/index.js"},"scripts":{"test":"vitest run","build":"vite build"},"_npmUser":{"name":"enriquemorenotent","email":"enriquemorenotent@gmail.com"},"_npmVersion":"10.9.4","description":"Headless helpers for grouped list reordering with drag-and-drop.","directories":{},"_nodeVersion":"22.22.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.3.4","vitest":"^1.5.1"},"peerDependencies":{"@hello-pangea/dnd":"^18.0.1"},"_npmOperationalInternal":{"tmp":"tmp/drag-grouped-list_0.1.1_1770012389428_0.5239986083773827","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@dbugger/drag-grouped-list","version":"0.2.0","license":"MIT","_id":"@dbugger/drag-grouped-list@0.2.0","maintainers":[{"name":"enriquemorenotent","email":"enriquemorenotent@gmail.com"}],"dist":{"shasum":"88569dc62501d18e2b756653eb56698a370dad10","tarball":"https://registry.npmjs.org/@dbugger/drag-grouped-list/-/drag-grouped-list-0.2.0.tgz","fileCount":5,"integrity":"sha512-mSIc4t2ObkhFyhRRQ/04Mkvt7eY7sY0fU1hoA1Ub2fZ8BZAuX/gPh2jr/htYuPUTep2J5jhwONthluOQgiEfwA==","signatures":[{"sig":"MEQCIHuUJT5c76lJgBPlRyMD4++8oW3BNToKBZ/GiNsjfoDoAiA56JiiW7KKe2WrC70B8bEjA1+LqJsjDFAKTl4L58UjJg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":106401},"main":"./dist/index.js","type":"module","exports":{".":"./dist/index.js"},"gitHead":"92558fd58484b567c323d30ac46be9f7f77b4c67","scripts":{"test":"vitest run","build":"vite build"},"_npmUser":{"name":"enriquemorenotent","email":"enriquemorenotent@gmail.com"},"_npmVersion":"10.9.4","description":"React components and helpers for grouped list drag-and-drop.","directories":{},"_nodeVersion":"22.22.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.3.4","jsdom":"^24.1.3","react":"^18.3.1","vitest":"^1.5.1","react-dom":"^18.3.1","@hello-pangea/dnd":"^18.0.1","@vitejs/plugin-react":"^4.4.1","@testing-library/react":"^16.2.0","@testing-library/jest-dom":"^6.6.3"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","@hello-pangea/dnd":"^18.0.1"},"_npmOperationalInternal":{"tmp":"tmp/drag-grouped-list_0.2.0_1770052034856_0.7374311134257343","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@dbugger/drag-grouped-list","version":"0.2.1","description":"React components and helpers for grouped list drag-and-drop.","license":"MIT","type":"module","main":"./dist/index.js","exports":{".":"./dist/index.js"},"peerDependencies":{"@hello-pangea/dnd":"^18.0.1","react":"^18.0.0","react-dom":"^18.0.0"},"scripts":{"build":"vite build","test":"vitest run"},"devDependencies":{"@hello-pangea/dnd":"^18.0.1","@testing-library/jest-dom":"^6.6.3","@testing-library/react":"^16.2.0","@vitejs/plugin-react":"^4.4.1","jsdom":"^24.1.3","react":"^18.3.1","react-dom":"^18.3.1","vite":"^5.3.4","vitest":"^1.5.1"},"_id":"@dbugger/drag-grouped-list@0.2.1","gitHead":"680e557e45cd40b072e6ec3850996924b98f6d87","_nodeVersion":"22.22.0","_npmVersion":"10.9.4","dist":{"integrity":"sha512-dlCEcAjBn93JF6FiCZDovoHZ2s8ffu674c82H4FG26YRylwVvf9VDCq8sIy80oTFjeB2xVPKiYdYa5qBCmgVBw==","shasum":"43e0170ee92c75ad9236c1f388893071b37052b7","tarball":"https://registry.npmjs.org/@dbugger/drag-grouped-list/-/drag-grouped-list-0.2.1.tgz","fileCount":5,"unpackedSize":115194,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCaDAHbZSSssl8CgpGGtcILlvFW6nt+eTF2oPzuavKIogIgFCkiHY6Fdr3axicPImBTAq2cVTFAYumcSXiSz54JTOc="}]},"_npmUser":{"name":"enriquemorenotent","email":"enriquemorenotent@gmail.com"},"directories":{},"maintainers":[{"name":"enriquemorenotent","email":"enriquemorenotent@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/drag-grouped-list_0.2.1_1770058334937_0.039655766459304465"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-02T06:06:29.299Z","modified":"2026-02-02T18:52:15.391Z","0.1.1":"2026-02-02T06:06:29.577Z","0.2.0":"2026-02-02T17:07:14.992Z","0.2.1":"2026-02-02T18:52:15.245Z"},"license":"MIT","description":"React components and helpers for grouped list drag-and-drop.","maintainers":[{"name":"enriquemorenotent","email":"enriquemorenotent@gmail.com"}],"readme":"# @dbugger/drag-grouped-list\n\nReact components and helpers for grouped list drag-and-drop. This package provides UI wiring with `@hello-pangea/dnd`, a stable layout component, and headless helpers for data transforms.\n\n## Install\n\n```bash\nnpm install @dbugger/drag-grouped-list\n```\n\nPeer dependencies:\n\n```bash\nnpm install react react-dom @hello-pangea/dnd\n```\n\n## Data Model\n\nThe components and helpers expect an array of groups:\n\n```js\nconst groups = [\n\t{\n\t\tid: \"group-1\",\n\t\ttitle: \"Group One\",\n\t\titems: [\n\t\t\t{ id: \"item-1\", title: \"Item 1\" },\n\t\t\t{ id: \"item-2\", title: \"Item 2\" },\n\t\t],\n\t},\n\t{\n\t\tid: \"group-2\",\n\t\ttitle: \"Group Two\",\n\t\titems: [{ id: \"item-3\", title: \"Item 3\" }],\n\t},\n];\n```\n\nGroup order is the array order. Each group and item must have a stable `id`.\n\n## Components\n\n### `GroupedBoard`\n\nOwns the drag-and-drop layout structure used for stable regroup/reorder. It renders the group container and droppable body with Tailwind classes that match the working board layout. You provide the header and item rendering (including the drag handle).\n\nProps:\n\n- `groups` (array, required)\n- `onGroupsChange(nextGroups, meta)` (required)\n- `renderGroupHeader({ group })` (required)\n- `renderItem({ item, group, index, innerRef, draggableProps, dragHandleProps, isDragging })` (required)\n- `getGroupId(group)` (optional, default `group.id`)\n- `getItemId(item)` (optional, default `item.id`)\n- `className` (optional, default `flex gap-4 overflow-x-auto`)\n- `groupClassName` (optional, default `flex w-72 flex-col group`)\n- `groupBodyClassName` (optional, overrides the default droppable body classes)\n\n### `GroupedList`\n\nProps:\n\n- `groups` (array, required)\n- `onGroupsChange(nextGroups, meta)` (required)\n- `renderGroup({ group })` (required)\n- `renderItem({ item, group, index, innerRef, draggableProps, dragHandleProps, isDragging })` (required)\n- `getGroupId(group)` (optional, default `group.id`)\n- `getItemId(item)` (optional, default `item.id`)\n- `className` (optional)\n- `groupClassName` (optional)\n- `groupBodyClassName` (optional)\n\n### `GroupDroppable`\n\nProps:\n\n- `groupId` (string | number, required)\n- `children({ innerRef, droppableProps, placeholder, isDraggingOver })` (required)\n\n### `DraggableItem`\n\nProps:\n\n- `itemId` (string | number, required)\n- `index` (number, required)\n- `children({ innerRef, draggableProps, dragHandleProps, isDragging })` (required)\n\n## Helpers\n\n### `reorderList(list, startIndex, endIndex)`\n\nReorders a single list.\n\nReturns:\n\n- `list` (array): the reordered list\n\n### `moveItemBetweenGroups(groups, source, destination)`\n\nMoves an item within or across groups using `@hello-pangea/dnd` `source` and `destination` shapes.\n\nReturns:\n\n- `groups` (array): updated groups array\n- `movedItem` (object | null): the item that moved\n- `fromGroupId` (string)\n- `toGroupId` (string)\n- `fromIndex` (number)\n- `toIndex` (number)\n\n### `applyItemDrag({ groups, source, destination })`\n\nHigh-level helper for drag-and-drop libraries that expose `source` and `destination` in the shape used by `@hello-pangea/dnd`.\n\nReturns:\n\n- `groups` (array): updated groups array\n- `movedItem` (object | null): the item that moved\n- `fromGroupId` (string | null)\n- `toGroupId` (string | null)\n- `fromIndex` (number | null)\n- `toIndex` (number | null)\n\nIf `destination` is missing, returns the original `groups` with all other fields set to `null`.\n\n## Example\n\n```jsx\nimport { GroupedBoard } from \"@dbugger/drag-grouped-list\";\n\nconst Board = ({ groups, setGroups, renderColumnHeader }) => (\n\t<GroupedBoard\n\t\tgroups={groups}\n\t\tonGroupsChange={(nextGroups) => setGroups(nextGroups)}\n\t\trenderGroupHeader={({ group }) => renderColumnHeader(group)}\n\t\trenderItem={({ item, innerRef, draggableProps, dragHandleProps }) => (\n\t\t\t<div ref={innerRef} {...draggableProps}>\n\t\t\t\t<span {...dragHandleProps}>drag</span>\n\t\t\t\t{item.title}\n\t\t\t</div>\n\t\t)}\n\t/>\n);\n```\n\n## Legacy Example\n\n```jsx\nimport { GroupedList } from \"@dbugger/drag-grouped-list\";\n\nconst Board = ({ groups, setGroups }) => (\n\t<GroupedList\n\t\tgroups={groups}\n\t\tonGroupsChange={(nextGroups) => setGroups(nextGroups)}\n\t\trenderGroup={({ group }) => <h3>{group.title}</h3>}\n\t\trenderItem={({ item, innerRef, draggableProps, dragHandleProps }) => (\n\t\t\t<div ref={innerRef} {...draggableProps} {...dragHandleProps}>\n\t\t\t\t{item.title}\n\t\t\t</div>\n\t\t)}\n\t/>\n);\n```\n\nThe package is ESM only.\n","readmeFilename":"README.md"}