@atom-learning/components 2.42.0 → 2.42.1

package/CHANGELOG.md

@@ -1,14 +1,9 @@
-# [2.42.0](https://github.com/Atom-Learning/components/compare/v2.41.1...v2.42.0) (2023-03-07)
+## [2.42.1](https://github.com/Atom-Learning/components/compare/v2.42.0...v2.42.1) (2023-03-08)
 
 
 ### Bug Fixes
 
-* move size of Handle to ActionIcon and not Icon ([e0525d5](https://github.com/Atom-Learning/components/commit/e0525d50a55c03d4c09a87aec1219be326fd9e96))
-
-
-### Features
-
-* split Sortable out of DataTable into a reusable primitive ([7b60b8b](https://github.com/Atom-Learning/components/commit/7b60b8be02901c9c373ad7a462de73a83798f7cb))
+* custom idColumn on DragAndDropTable ([f5bae51](https://github.com/Atom-Learning/components/commit/f5bae519828fe45b860dcb15fd58139c5b9894d2))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/data-table/drag-and-drop/DragAndDropTable.d.ts

@@ -9,6 +9,5 @@ declare type DragAndDropTableProps = DataTableTableProps & {
         newData: TAsyncDataResult;
     }) => void;
 };
-export declare const getRowOrder: (data: TAsyncDataResult, idColumn: string) => unknown[];
 export declare const DragAndDropTable: React.FC<DragAndDropTableProps>;
 export {};

package/dist/components/data-table/drag-and-drop/DragAndDropTable.js

@@ -1,2 +1,2 @@
-import*as t from"react";import{Table as E}from"../../table/Table.js";import{Sortable as T}from"../../sortable/index.js";import{DataTable as I}from"../DataTable.js";import{AsyncDataState as g}from"../DataTable.types.js";import{useDataTable as x}from"../DataTableContext.js";import{DataTableLoading as A}from"../DataTableLoading.js";import{arrayMove as S}from"@dnd-kit/sortable";import{DragAndDropTableBody as h}from"./DragAndDropTableBody.js";const w=({idColumn:l="id",onDragAndDrop:o,sortable:s,striped:m,theme:i,css:d,...p})=>{const{asyncDataState:c,data:e,setData:D}=x(),u=c===g.PENDING,b=t.useMemo(()=>e.results.map(a=>a[l]),[e]),f=t.useCallback(({oldIndex:a,newIndex:r})=>{const n=S(e.results,a,r),y={results:n,total:e.total};D({results:n,total:e.total}),o==null||o({oldIndex:a,newIndex:r,newData:y})},[e,o]);return t.createElement(T.Root,{onSortChange:f,sortableIds:b},t.createElement(A,null),t.createElement(E,{...p,css:{...d,...u&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},t.createElement(I.Head,{theme:i,sortable:s}),t.createElement(h,{striped:m})))};export{w as DragAndDropTable};
+import{arrayMove as T}from"@dnd-kit/sortable";import*as t from"react";import{Sortable as y}from"../../sortable/index.js";import{Table as I}from"../../table/Table.js";import{DataTable as g}from"../DataTable.js";import{AsyncDataState as x}from"../DataTable.types.js";import{useDataTable as A}from"../DataTableContext.js";import{DataTableLoading as C}from"../DataTableLoading.js";import{DragAndDropTableBody as S}from"./DragAndDropTableBody.js";const h=({idColumn:r="id",onDragAndDrop:o,sortable:m,striped:s,theme:i,css:d,...p})=>{const{asyncDataState:c,data:e,setData:D}=A(),u=c===x.PENDING,b=t.useMemo(()=>e.results.map(a=>a[r]),[e]),f=t.useCallback(({oldIndex:a,newIndex:n})=>{const l=T(e.results,a,n),E={results:l,total:e.total};D({results:l,total:e.total}),o==null||o({oldIndex:a,newIndex:n,newData:E})},[e,o]);return t.createElement(y.Root,{onSortChange:f,sortableIds:b},t.createElement(C,null),t.createElement(I,{...p,css:{...d,...u&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},t.createElement(g.Head,{theme:i,sortable:m}),t.createElement(S,{striped:s,idColumn:r})))};export{h as DragAndDropTable};
 //# sourceMappingURL=DragAndDropTable.js.map

package/dist/components/data-table/drag-and-drop/DragAndDropTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragAndDropTable.js","sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../../table'\nimport { Sortable } from '../../sortable'\nimport { DataTable } from '../DataTable'\nimport { AsyncDataState, TAsyncDataResult } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\nimport { DataTableLoading } from '../DataTableLoading'\nimport { arrayMove } from '@dnd-kit/sortable'\nimport type { DataTableTableProps } from '../DataTableTable'\nimport { DragAndDropTableBody } from './DragAndDropTableBody'\n\ntype DragAndDropTableProps = DataTableTableProps & {\n  idColumn?: string\n  onDragAndDrop?: (onDragAndDropData: {\n    oldIndex: number\n    newIndex: number\n    newData: TAsyncDataResult\n  }) => void\n}\n\nexport const getRowOrder = (data: TAsyncDataResult, idColumn: string) =>\n  data.results.map((row) => {\n    return row[idColumn]\n  })\n\nexport const DragAndDropTable: React.FC<DragAndDropTableProps> = ({\n  idColumn = 'id',\n  onDragAndDrop,\n  sortable,\n  striped,\n  theme,\n  css,\n  ...props\n}) => {\n  const { asyncDataState, data, setData } = useDataTable()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n\n  const rowIds = React.useMemo(\n    () =>\n      data.results.map((row) => {\n        return row[idColumn] as React.ReactText\n      }),\n    [data]\n  )\n  const handleSortChange = React.useCallback(\n    ({ oldIndex, newIndex }) => {\n      const sortedResults = arrayMove(data.results, oldIndex, newIndex)\n      const newData = { results: sortedResults, total: data.total }\n      setData({ results: sortedResults, total: data.total })\n      onDragAndDrop?.({ oldIndex, newIndex, newData })\n    },\n    [data, onDragAndDrop]\n  )\n\n  return (\n    <Sortable.Root onSortChange={handleSortChange} sortableIds={rowIds}>\n      <DataTableLoading />\n      <Table\n        {...props}\n        css={{\n          ...css,\n          ...(isPending && {\n            opacity: 0.5,\n            pointerEvents: 'none',\n            transition: 'opacity 250ms linear 150ms'\n          })\n        }}\n      >\n        <DataTable.Head theme={theme} sortable={sortable} />\n        <DragAndDropTableBody striped={striped} />\n      </Table>\n    </Sortable.Root>\n  )\n}\n"],"names":["DragAndDropTable","idColumn","onDragAndDrop","sortable","striped","theme","css","props","asyncDataState","data","setData","useDataTable","isPending","AsyncDataState","rowIds","React","row","handleSortChange","oldIndex","newIndex","sortedResults","arrayMove","newData","Sortable","DataTableLoading","Table","DataTable","DragAndDropTableBody"],"mappings":"0bAqBa,MAKAA,EAAoD,CAAC,CAChE,SAAAC,EAAW,KACX,cAAAC,EACA,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,IAAAC,KACGC,CACL,IAAM,CACJ,KAAM,CAAE,eAAAC,EAAgB,KAAAC,EAAM,QAAAC,CAAQ,EAAIC,IACpCC,EAAYJ,IAAmBK,EAAe,QAE9CC,EAASC,EAAM,QACnB,IACEN,EAAK,QAAQ,IAAKO,GACTA,EAAIf,EACZ,EACH,CAACQ,CAAI,CACP,EACMQ,EAAmBF,EAAM,YAC7B,CAAC,CAAE,SAAAG,EAAU,SAAAC,CAAS,IAAM,CAC1B,MAAMC,EAAgBC,EAAUZ,EAAK,QAASS,EAAUC,CAAQ,EAC1DG,EAAU,CAAE,QAASF,EAAe,MAAOX,EAAK,KAAM,EAC5DC,EAAQ,CAAE,QAASU,EAAe,MAAOX,EAAK,KAAM,CAAC,EACrDP,GAAA,MAAAA,EAAgB,CAAE,SAAAgB,EAAU,SAAAC,EAAU,QAAAG,CAAQ,CAAA,CAChD,EACA,CAACb,EAAMP,CAAa,CACtB,EAEA,OACEa,EAAA,cAACQ,EAAS,KAAT,CAAc,aAAcN,EAAkB,YAAaH,CAAAA,EAC1DC,EAAA,cAACS,EAAA,IAAiB,EAClBT,EAAA,cAACU,EAAA,CACE,GAAGlB,EACJ,IAAK,CACH,GAAGD,EACH,GAAIM,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,CAAA,EAEAG,EAAA,cAACW,EAAU,KAAV,CAAe,MAAOrB,EAAO,SAAUF,CAAU,CAAA,EAClDY,EAAA,cAACY,EAAA,CAAqB,QAASvB,CAAAA,CAAS,CAC1C,CACF,CAEJ"}
+{"version":3,"file":"DragAndDropTable.js","sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTable.tsx"],"sourcesContent":["import { arrayMove } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { Sortable } from '../../sortable'\nimport { Table } from '../../table'\nimport { DataTable } from '../DataTable'\nimport { AsyncDataState, TAsyncDataResult } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\nimport { DataTableLoading } from '../DataTableLoading'\nimport type { DataTableTableProps } from '../DataTableTable'\nimport { DragAndDropTableBody } from './DragAndDropTableBody'\n\ntype DragAndDropTableProps = DataTableTableProps & {\n  idColumn?: string\n  onDragAndDrop?: (onDragAndDropData: {\n    oldIndex: number\n    newIndex: number\n    newData: TAsyncDataResult\n  }) => void\n}\n\nexport const DragAndDropTable: React.FC<DragAndDropTableProps> = ({\n  idColumn = 'id',\n  onDragAndDrop,\n  sortable,\n  striped,\n  theme,\n  css,\n  ...props\n}) => {\n  const { asyncDataState, data, setData } = useDataTable()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n\n  const rowIds = React.useMemo(\n    () =>\n      data.results.map((row) => {\n        return row[idColumn] as React.ReactText\n      }),\n    [data]\n  )\n  const handleSortChange = React.useCallback(\n    ({ oldIndex, newIndex }) => {\n      const sortedResults = arrayMove(data.results, oldIndex, newIndex)\n      const newData = { results: sortedResults, total: data.total }\n      setData({ results: sortedResults, total: data.total })\n      onDragAndDrop?.({ oldIndex, newIndex, newData })\n    },\n    [data, onDragAndDrop]\n  )\n\n  return (\n    <Sortable.Root onSortChange={handleSortChange} sortableIds={rowIds}>\n      <DataTableLoading />\n      <Table\n        {...props}\n        css={{\n          ...css,\n          ...(isPending && {\n            opacity: 0.5,\n            pointerEvents: 'none',\n            transition: 'opacity 250ms linear 150ms'\n          })\n        }}\n      >\n        <DataTable.Head theme={theme} sortable={sortable} />\n        <DragAndDropTableBody striped={striped} idColumn={idColumn} />\n      </Table>\n    </Sortable.Root>\n  )\n}\n"],"names":["DragAndDropTable","idColumn","onDragAndDrop","sortable","striped","theme","css","props","asyncDataState","data","setData","useDataTable","isPending","AsyncDataState","rowIds","React","row","handleSortChange","oldIndex","newIndex","sortedResults","arrayMove","newData","Sortable","DataTableLoading","Table","DataTable","DragAndDropTableBody"],"mappings":"gcAqBaA,EAAoD,CAAC,CAChE,SAAAC,EAAW,KACX,cAAAC,EACA,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,IAAAC,KACGC,CACL,IAAM,CACJ,KAAM,CAAE,eAAAC,EAAgB,KAAAC,EAAM,QAAAC,CAAQ,EAAIC,EAAa,EACjDC,EAAYJ,IAAmBK,EAAe,QAE9CC,EAASC,EAAM,QACnB,IACEN,EAAK,QAAQ,IAAKO,GACTA,EAAIf,EACZ,EACH,CAACQ,CAAI,CACP,EACMQ,EAAmBF,EAAM,YAC7B,CAAC,CAAE,SAAAG,EAAU,SAAAC,CAAS,IAAM,CAC1B,MAAMC,EAAgBC,EAAUZ,EAAK,QAASS,EAAUC,CAAQ,EAC1DG,EAAU,CAAE,QAASF,EAAe,MAAOX,EAAK,KAAM,EAC5DC,EAAQ,CAAE,QAASU,EAAe,MAAOX,EAAK,KAAM,CAAC,EACrDP,GAAA,MAAAA,EAAgB,CAAE,SAAAgB,EAAU,SAAAC,EAAU,QAAAG,CAAQ,CAChD,CAAA,EACA,CAACb,EAAMP,CAAa,CACtB,EAEA,OACEa,EAAA,cAACQ,EAAS,KAAT,CAAc,aAAcN,EAAkB,YAAaH,CAC1DC,EAAAA,EAAA,cAACS,EAAA,IAAiB,EAClBT,EAAA,cAACU,EAAA,CACE,GAAGlB,EACJ,IAAK,CACH,GAAGD,EACH,GAAIM,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,CAAA,EAEAG,EAAA,cAACW,EAAU,KAAV,CAAe,MAAOrB,EAAO,SAAUF,CAAAA,CAAU,EAClDY,EAAA,cAACY,EAAA,CAAqB,QAASvB,EAAS,SAAUH,CAAAA,CAAU,CAC9D,CACF,CAEJ"}

package/dist/components/data-table/drag-and-drop/DragAndDropTableBody.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { Table } from '../../table';
-declare type DataTableBodyProps = Omit<React.ComponentProps<typeof Table.Body>, 'children'>;
+declare type DataTableBodyProps = Omit<React.ComponentProps<typeof Table.Body>, 'children'> & {
+    idColumn?: string;
+};
 export declare const DragAndDropTableBody: React.FC<DataTableBodyProps>;
 export {};

package/dist/components/data-table/drag-and-drop/DragAndDropTableBody.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{Table as m}from"../../table/Table.js";import{useDataTable as p}from"../DataTableContext.js";import{DragAndDropTableRow as d}from"./DragAndDropTableRow.js";const i=({striped:o=!1,...t})=>{const{getRowModel:a}=p();return e.createElement(m.Body,{...t,striped:o},a().rows.map(r=>e.createElement(d,{row:r,key:r.id})))};export{i as DragAndDropTableBody};
+import*as r from"react";import{Table as d}from"../../table/Table.js";import{useDataTable as i}from"../DataTableContext.js";import{DragAndDropTableRow as p}from"./DragAndDropTableRow.js";const l=({striped:e=!1,idColumn:t="id",...m})=>{const{getRowModel:a}=i();return r.createElement(d.Body,{...m,striped:e},a().rows.map(o=>r.createElement(p,{row:o,key:o.id,idColumn:t})))};export{l as DragAndDropTableBody};
 //# sourceMappingURL=DragAndDropTableBody.js.map

package/dist/components/data-table/drag-and-drop/DragAndDropTableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragAndDropTableBody.js","sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../../table'\nimport { useDataTable } from '../DataTableContext'\nimport { DragAndDropTableRow } from './DragAndDropTableRow'\n\ntype DataTableBodyProps = Omit<\n  React.ComponentProps<typeof Table.Body>,\n  'children'\n>\n\nexport const DragAndDropTableBody: React.FC<DataTableBodyProps> = ({\n  striped = false,\n  ...props\n}) => {\n  const { getRowModel } = useDataTable()\n  return (\n    <Table.Body {...props} striped={striped}>\n      {getRowModel().rows.map((row) => {\n        return <DragAndDropTableRow row={row} key={row.id} />\n      })}\n    </Table.Body>\n  )\n}\n"],"names":["DragAndDropTableBody","striped","props","getRowModel","useDataTable","React","Table","row","DragAndDropTableRow"],"mappings":"0LAWa,MAAAA,EAAqD,CAAC,CACjE,QAAAC,EAAU,MACPC,CACL,IAAM,CACJ,KAAM,CAAE,YAAAC,CAAY,EAAIC,EAAa,EACrC,OACEC,EAAA,cAACC,EAAM,KAAN,CAAY,GAAGJ,EAAO,QAASD,CAAAA,EAC7BE,EAAY,EAAE,KAAK,IAAKI,GAChBF,EAAA,cAACG,EAAA,CAAoB,IAAKD,EAAK,IAAKA,EAAI,EAAA,CAAI,CACpD,CACH,CAEJ"}
+{"version":3,"file":"DragAndDropTableBody.js","sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../../table'\nimport { useDataTable } from '../DataTableContext'\nimport { DragAndDropTableRow } from './DragAndDropTableRow'\n\ntype DataTableBodyProps = Omit<\n  React.ComponentProps<typeof Table.Body>,\n  'children'\n> & { idColumn?: string }\n\nexport const DragAndDropTableBody: React.FC<DataTableBodyProps> = ({\n  striped = false,\n  idColumn = 'id',\n  ...props\n}) => {\n  const { getRowModel } = useDataTable()\n  return (\n    <Table.Body {...props} striped={striped}>\n      {getRowModel().rows.map((row) => {\n        return (\n          <DragAndDropTableRow row={row} key={row.id} idColumn={idColumn} />\n        )\n      })}\n    </Table.Body>\n  )\n}\n"],"names":["DragAndDropTableBody","striped","idColumn","props","getRowModel","useDataTable","React","Table","row","DragAndDropTableRow"],"mappings":"0LAWa,MAAAA,EAAqD,CAAC,CACjE,QAAAC,EAAU,GACV,SAAAC,EAAW,QACRC,CACL,IAAM,CACJ,KAAM,CAAE,YAAAC,CAAY,EAAIC,EACxB,EAAA,OACEC,EAAA,cAACC,EAAM,KAAN,CAAY,GAAGJ,EAAO,QAASF,CAC7BG,EAAAA,EAAc,EAAA,KAAK,IAAKI,GAErBF,EAAA,cAACG,EAAA,CAAoB,IAAKD,EAAK,IAAKA,EAAI,GAAI,SAAUN,CAAU,CAAA,CAEnE,CACH,CAEJ"}

package/dist/components/data-table/drag-and-drop/DragAndDropTableRow.d.ts

@@ -3,5 +3,6 @@ import * as React from 'react';
 import { Table } from '../../table';
 export declare type DataTableDraggableRowProps = React.ComponentProps<typeof Table.Row> & {
     row: Row<Record<string, unknown>>;
+    idColumn?: string;
 };
 export declare const DragAndDropTableRow: React.FC<DataTableDraggableRowProps>;

package/dist/components/data-table/drag-and-drop/DragAndDropTableRow.js

@@ -1,2 +1,2 @@
-import*as l from"react";import{Table as o}from"../../table/Table.js";import{DataTableDataCell as n}from"../DataTableDataCell.js";import{flexRender as i}from"@tanstack/react-table";import{Sortable as a}from"../../sortable/index.js";const c=({row:t})=>{const r=t.original.id;return l.createElement(a.Item,{id:r,asChild:!0},l.createElement(o.Row,null,t.getVisibleCells().map((e,m)=>m===0?l.createElement(o.Cell,{key:e.id},l.createElement(a.Handle,{targetId:r,css:{display:"inline-block"}}),i(e.column.columnDef.cell,e.getContext())):l.createElement(n,{key:e.id,cell:e}))))};export{c as DragAndDropTableRow};
+import{flexRender as i}from"@tanstack/react-table";import*as l from"react";import{Sortable as o}from"../../sortable/index.js";import{Table as a}from"../../table/Table.js";import{DataTableDataCell as c}from"../DataTableDataCell.js";const d=({row:t,idColumn:m="id"})=>{const r=t.original[m];return l.createElement(o.Item,{id:r,asChild:!0},l.createElement(a.Row,null,t.getVisibleCells().map((e,n)=>n===0?l.createElement(a.Cell,{key:e.id},l.createElement(o.Handle,{targetId:r,css:{display:"inline-block"}}),i(e.column.columnDef.cell,e.getContext())):l.createElement(c,{key:e.id,cell:e}))))};export{d as DragAndDropTableRow};
 //# sourceMappingURL=DragAndDropTableRow.js.map

package/dist/components/data-table/drag-and-drop/DragAndDropTableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragAndDropTableRow.js","sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTableRow.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\nimport { Table } from '../../table'\nimport { DataTableDataCell } from '../DataTableDataCell'\nimport { flexRender } from '@tanstack/react-table'\nimport { Sortable } from '~/components/sortable'\nexport type DataTableDraggableRowProps = React.ComponentProps<\n  typeof Table.Row\n> & {\n  row: Row<Record<string, unknown>>\n}\n\nexport const DragAndDropTableRow: React.FC<DataTableDraggableRowProps> = ({\n  row\n}) => {\n  const rowId = row.original.id as React.ReactText\n  return (\n    <Sortable.Item id={rowId} asChild>\n      <Table.Row>\n        {row.getVisibleCells().map((cell, i) => {\n          if (i === 0) {\n            return (\n              <Table.Cell key={cell.id}>\n                <Sortable.Handle\n                  targetId={rowId}\n                  css={{ display: 'inline-block' }}\n                />\n                {flexRender(cell.column.columnDef.cell, cell.getContext())}\n              </Table.Cell>\n            )\n          }\n          return <DataTableDataCell key={cell.id} cell={cell} />\n        })}\n      </Table.Row>\n    </Sortable.Item>\n  )\n}\n"],"names":["DragAndDropTableRow","row","rowId","React","Sortable","Table","cell","i","flexRender","DataTableDataCell"],"mappings":"uOAYO,MAAMA,EAA4D,CAAC,CACxE,IAAAC,CACF,IAAM,CACJ,MAAMC,EAAQD,EAAI,SAAS,GAC3B,OACEE,EAAA,cAACC,EAAS,KAAT,CAAc,GAAIF,EAAO,QAAO,EAC/BC,EAAAA,EAAA,cAACE,EAAM,IAAN,KACEJ,EAAI,gBAAgB,EAAE,IAAI,CAACK,EAAMC,IAC5BA,IAAM,EAENJ,EAAA,cAACE,EAAM,KAAN,CAAW,IAAKC,EAAK,EACpBH,EAAAA,EAAA,cAACC,EAAS,OAAT,CACC,SAAUF,EACV,IAAK,CAAE,QAAS,cAAe,EACjC,EACCM,EAAWF,EAAK,OAAO,UAAU,KAAMA,EAAK,WAAY,CAAA,CAC3D,EAGGH,EAAA,cAACM,EAAA,CAAkB,IAAKH,EAAK,GAAI,KAAMA,CAAM,CAAA,CACrD,CACH,CACF,CAEJ"}
+{"version":3,"file":"DragAndDropTableRow.js","sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTableRow.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Sortable } from '~/components/sortable'\n\nimport { Table } from '../../table'\nimport { DataTableDataCell } from '../DataTableDataCell'\nexport type DataTableDraggableRowProps = React.ComponentProps<\n  typeof Table.Row\n> & {\n  row: Row<Record<string, unknown>>\n  idColumn?: string\n}\n\nexport const DragAndDropTableRow: React.FC<DataTableDraggableRowProps> = ({\n  row,\n  idColumn = 'id'\n}) => {\n  const rowId = row.original[idColumn] as React.ReactText\n  return (\n    <Sortable.Item id={rowId} asChild>\n      <Table.Row>\n        {row.getVisibleCells().map((cell, i) => {\n          if (i === 0) {\n            return (\n              <Table.Cell key={cell.id}>\n                <Sortable.Handle\n                  targetId={rowId}\n                  css={{ display: 'inline-block' }}\n                />\n                {flexRender(cell.column.columnDef.cell, cell.getContext())}\n              </Table.Cell>\n            )\n          }\n          return <DataTableDataCell key={cell.id} cell={cell} />\n        })}\n      </Table.Row>\n    </Sortable.Item>\n  )\n}\n"],"names":["DragAndDropTableRow","row","idColumn","rowId","React","Sortable","Table","cell","i","flexRender","DataTableDataCell"],"mappings":"uOAea,MAAAA,EAA4D,CAAC,CACxE,IAAAC,EACA,SAAAC,EAAW,IACb,IAAM,CACJ,MAAMC,EAAQF,EAAI,SAASC,GAC3B,OACEE,EAAA,cAACC,EAAS,KAAT,CAAc,GAAIF,EAAO,QAAO,IAC/BC,EAAA,cAACE,EAAM,IAAN,KACEL,EAAI,gBAAkB,EAAA,IAAI,CAACM,EAAMC,IAC5BA,IAAM,EAENJ,EAAA,cAACE,EAAM,KAAN,CAAW,IAAKC,EAAK,EAAA,EACpBH,EAAA,cAACC,EAAS,OAAT,CACC,SAAUF,EACV,IAAK,CAAE,QAAS,cAAe,CACjC,CAAA,EACCM,EAAWF,EAAK,OAAO,UAAU,KAAMA,EAAK,WAAY,CAAA,CAC3D,EAGGH,EAAA,cAACM,EAAA,CAAkB,IAAKH,EAAK,GAAI,KAAMA,CAAM,CAAA,CACrD,CACH,CACF,CAEJ"}

package/dist/components/sortable/Handle.js

@@ -1,2 +1,2 @@
-import{DragHandle as l}from"@atom-learning/icons";import*as r from"react";import{ActionIcon as s}from"../action-icon/ActionIcon.js";import{Icon as m}from"../icon/Icon.js";import{styled as p}from"../../stitches.js";const e=p(s,{color:"inherit !important",fill:"currentColor","&[disabled]":{opacity:.3,cursor:"not-allowed",["*"]:{pointerEvents:"none"}},variants:{isDragging:{true:{cursor:"grabbing"},false:{cursor:"grab"}}}}),o=r.forwardRef(({isDragging:a,size:i,...t},n)=>r.createElement(e,{ref:n,isDragging:a,appearance:"simple",hasTooltip:!1,size:i,...t},r.createElement(m,{is:l})));o.displayName="Handle";export{o as Handle,e as StyledHandle};
+import{DragHandle as l}from"@atom-learning/icons";import*as r from"react";import{styled as s}from"../../stitches.js";import{ActionIcon as m}from"../action-icon/ActionIcon.js";import{Icon as p}from"../icon/Icon.js";const e=s(m,{color:"inherit !important",fill:"currentColor","&[disabled]":{opacity:.3,cursor:"not-allowed",["*"]:{pointerEvents:"none"}},variants:{isDragging:{true:{cursor:"grabbing"},false:{cursor:"grab"}}}}),o=r.forwardRef(({isDragging:a,size:i,...t},n)=>r.createElement(e,{ref:n,isDragging:a,appearance:"simple",hasTooltip:!1,size:i,...t},r.createElement(p,{is:l})));o.displayName="Handle";export{o as Handle,e as StyledHandle};
 //# sourceMappingURL=Handle.js.map

package/dist/components/sortable/Handle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Handle.js","sources":["../../../src/components/sortable/Handle.tsx"],"sourcesContent":["import { DragHandle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { styled } from '../../stitches'\n\nexport const StyledHandle = styled(ActionIcon, {\n  color: 'inherit !important',\n  fill: 'currentColor',\n  '&[disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed',\n    ['*']: {\n      pointerEvents: 'none'\n    }\n  },\n  variants: {\n    isDragging: {\n      true: {\n        cursor: 'grabbing'\n      },\n      false: {\n        cursor: 'grab'\n      }\n    }\n  }\n})\n\nexport type THandleProps = Omit<\n  React.ComponentProps<typeof StyledHandle>,\n  'children'\n> &\n  Pick<React.ComponentProps<typeof Icon>, 'size'>\n\nexport const Handle: React.ForwardRefExoticComponent<THandleProps> =\n  React.forwardRef(({ isDragging, size, ...rest }, ref) => {\n    return (\n      <StyledHandle\n        ref={ref}\n        isDragging={isDragging}\n        appearance=\"simple\"\n        hasTooltip={false}\n        size={size}\n        {...rest}\n      >\n        <Icon is={DragHandle} />\n      </StyledHandle>\n    )\n  })\n\nHandle.displayName = 'Handle'\n"],"names":["StyledHandle","styled","ActionIcon","Handle","React","isDragging","size","rest","ref","Icon","DragHandle"],"mappings":"sNAOO,MAAMA,EAAeC,EAAOC,EAAY,CAC7C,MAAO,qBACP,KAAM,eACN,cAAe,CACb,QAAS,GACT,OAAQ,cACR,CAAC,KAAM,CACL,cAAe,MACjB,CACF,EACA,SAAU,CACR,WAAY,CACV,KAAM,CACJ,OAAQ,UACV,EACA,MAAO,CACL,OAAQ,MACV,CACF,CACF,CACF,CAAC,EAQYC,EACXC,EAAM,WAAW,CAAC,CAAE,WAAAC,EAAY,KAAAC,KAASC,CAAK,EAAGC,IAE7CJ,EAAA,cAACJ,GACC,IAAKQ,EACL,WAAYH,EACZ,WAAW,SACX,WAAY,GACZ,KAAMC,EACL,GAAGC,GAEJH,EAAA,cAACK,EAAA,CAAK,GAAIC,EAAY,CACxB,CAEH,EAEHP,EAAO,YAAc"}
+{"version":3,"file":"Handle.js","sources":["../../../src/components/sortable/Handle.tsx"],"sourcesContent":["import { DragHandle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\n\nexport const StyledHandle = styled(ActionIcon, {\n  color: 'inherit !important',\n  fill: 'currentColor',\n  '&[disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed',\n    ['*']: {\n      pointerEvents: 'none'\n    }\n  },\n  variants: {\n    isDragging: {\n      true: {\n        cursor: 'grabbing'\n      },\n      false: {\n        cursor: 'grab'\n      }\n    }\n  }\n})\n\nexport type THandleProps = Omit<\n  React.ComponentProps<typeof StyledHandle>,\n  'children'\n> &\n  Pick<React.ComponentProps<typeof Icon>, 'size'>\n\nexport const Handle: React.ForwardRefExoticComponent<THandleProps> =\n  React.forwardRef(({ isDragging, size, ...rest }, ref) => {\n    return (\n      <StyledHandle\n        ref={ref}\n        isDragging={isDragging}\n        appearance=\"simple\"\n        hasTooltip={false}\n        size={size}\n        {...rest}\n      >\n        <Icon is={DragHandle} />\n      </StyledHandle>\n    )\n  })\n\nHandle.displayName = 'Handle'\n"],"names":["StyledHandle","styled","ActionIcon","Handle","React","isDragging","size","rest","ref","Icon","DragHandle"],"mappings":"sNAOO,MAAMA,EAAeC,EAAOC,EAAY,CAC7C,MAAO,qBACP,KAAM,eACN,cAAe,CACb,QAAS,GACT,OAAQ,cACR,CAAC,KAAM,CACL,cAAe,MACjB,CACF,EACA,SAAU,CACR,WAAY,CACV,KAAM,CACJ,OAAQ,UACV,EACA,MAAO,CACL,OAAQ,MACV,CACF,CACF,CACF,CAAC,EAQYC,EACXC,EAAM,WAAW,CAAC,CAAE,WAAAC,EAAY,KAAAC,KAASC,CAAK,EAAGC,IAE7CJ,EAAA,cAACJ,GACC,IAAKQ,EACL,WAAYH,EACZ,WAAW,SACX,WAAY,GACZ,KAAMC,EACL,GAAGC,GAEJH,EAAA,cAACK,EAAA,CAAK,GAAIC,EAAY,CACxB,CAEH,EAEHP,EAAO,YAAc"}

package/dist/components/sortable/SortableHandle.js

@@ -1,2 +1,2 @@
-import*as n from"react";import{Handle as b}from"./Handle.js";import{useSortable as g}from"@dnd-kit/sortable";const t=({targetId:a,disabled:e=!1,label:r="drag handle",...l})=>{const{attributes:o,listeners:i,isDragging:s,setActivatorNodeRef:d}=g({id:a});return n.createElement(b,{ref:d,isDragging:s,label:r,disabled:e,...e?{}:i,...e?{}:o,...l})};t.displayName="SortableHandle";export{t as SortableHandle};
+import{useSortable as n}from"@dnd-kit/sortable";import*as b from"react";import{Handle as g}from"./Handle.js";const t=({targetId:a,disabled:e=!1,label:r="drag handle",...l})=>{const{attributes:o,listeners:i,isDragging:s,setActivatorNodeRef:d}=n({id:a});return b.createElement(g,{ref:d,isDragging:s,label:r,disabled:e,...e?{}:i,...e?{}:o,...l})};t.displayName="SortableHandle";export{t as SortableHandle};
 //# sourceMappingURL=SortableHandle.js.map

package/dist/components/sortable/SortableHandle.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableHandle.js","sources":["../../../src/components/sortable/SortableHandle.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Handle as DragHandle, THandleProps } from './Handle'\nimport { useSortable } from '@dnd-kit/sortable'\n\nexport type TSortableHandleProps = {\n  targetId: React.ReactText\n  disabled?: boolean\n  label?: string\n} & Omit<THandleProps, 'label'>\n\nexport const SortableHandle: React.FC<TSortableHandleProps> = ({\n  targetId,\n  disabled = false,\n  label = 'drag handle',\n  ...rest\n}) => {\n  const { attributes, listeners, isDragging, setActivatorNodeRef } =\n    useSortable({ id: targetId })\n\n  return (\n    <DragHandle\n      ref={setActivatorNodeRef}\n      isDragging={isDragging}\n      label={label}\n      disabled={disabled}\n      {...(!disabled ? listeners : {})}\n      {...(!disabled ? attributes : {})}\n      {...rest}\n    />\n  )\n}\n\nSortableHandle.displayName = 'SortableHandle'\n"],"names":["SortableHandle","targetId","disabled","label","rest","attributes","listeners","isDragging","setActivatorNodeRef","useSortable","React","DragHandle"],"mappings":"6GAUO,MAAMA,EAAiD,CAAC,CAC7D,SAAAC,EACA,SAAAC,EAAW,GACX,MAAAC,EAAQ,iBACLC,CACL,IAAM,CACJ,KAAM,CAAE,WAAAC,EAAY,UAAAC,EAAW,WAAAC,EAAY,oBAAAC,CAAoB,EAC7DC,EAAY,CAAE,GAAIR,CAAS,CAAC,EAE9B,OACES,EAAA,cAACC,EAAA,CACC,IAAKH,EACL,WAAYD,EACZ,MAAOJ,EACP,SAAUD,EACT,GAAKA,EAAuB,CAAA,EAAZI,EAChB,GAAKJ,EAAwB,CAAA,EAAbG,EAChB,GAAGD,CAAAA,CACN,CAEJ,EAEAJ,EAAe,YAAc"}
+{"version":3,"file":"SortableHandle.js","sources":["../../../src/components/sortable/SortableHandle.tsx"],"sourcesContent":["import { useSortable } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { Handle as DragHandle, THandleProps } from './Handle'\n\nexport type TSortableHandleProps = {\n  targetId: React.ReactText\n  disabled?: boolean\n  label?: string\n} & Omit<THandleProps, 'label'>\n\nexport const SortableHandle: React.FC<TSortableHandleProps> = ({\n  targetId,\n  disabled = false,\n  label = 'drag handle',\n  ...rest\n}) => {\n  const { attributes, listeners, isDragging, setActivatorNodeRef } =\n    useSortable({ id: targetId })\n\n  return (\n    <DragHandle\n      ref={setActivatorNodeRef}\n      isDragging={isDragging}\n      label={label}\n      disabled={disabled}\n      {...(!disabled ? listeners : {})}\n      {...(!disabled ? attributes : {})}\n      {...rest}\n    />\n  )\n}\n\nSortableHandle.displayName = 'SortableHandle'\n"],"names":["SortableHandle","targetId","disabled","label","rest","attributes","listeners","isDragging","setActivatorNodeRef","useSortable","React","DragHandle"],"mappings":"6GAWO,MAAMA,EAAiD,CAAC,CAC7D,SAAAC,EACA,SAAAC,EAAW,GACX,MAAAC,EAAQ,iBACLC,CACL,IAAM,CACJ,KAAM,CAAE,WAAAC,EAAY,UAAAC,EAAW,WAAAC,EAAY,oBAAAC,CAAoB,EAC7DC,EAAY,CAAE,GAAIR,CAAS,CAAC,EAE9B,OACES,EAAA,cAACC,EAAA,CACC,IAAKH,EACL,WAAYD,EACZ,MAAOJ,EACP,SAAUD,EACT,GAAKA,EAAuB,CAAA,EAAZI,EAChB,GAAKJ,EAAwB,CAAA,EAAbG,EAChB,GAAGD,CAAAA,CACN,CAEJ,EAEAJ,EAAe,YAAc"}

package/dist/components/sortable/SortableItem.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import type { UniqueIdentifier } from '@dnd-kit/core';
 import { CSS } from '@stitches/react';
+import * as React from 'react';
 export declare type TSortableItemProps = {
     id: UniqueIdentifier;
     asChild?: boolean;

package/dist/components/sortable/SortableItem.js

@@ -1,2 +1,2 @@
-import{Slot as p}from"@radix-ui/react-slot";import*as b from"react";import{Box as g}from"../box/Box.js";import{useSortable as f}from"@dnd-kit/sortable";import{styled as x}from"@stitches/react";const u=x(p),s=({id:l,asChild:o=!1,css:n,isDragHandle:r=!1,disabled:t,...i})=>{const{transform:a,setNodeRef:d,isDragging:e,listeners:c,attributes:m}=f({id:l});return b.createElement(o?u:g,{ref:d,css:{["--scale"]:1,transform:"translateX(calc(var(--translate-x)  * 1px)) translateY(calc(var(--translate-y)  * 1px)) scale(var(--scale))",zIndex:e?5:void 0,["--translate-x"]:(a==null?void 0:a.x)||0,["--translate-y"]:(a==null?void 0:a.y)||0,"&[disabled]":{opacity:.3,cursor:"not-allowed",["*"]:{pointerEvents:"none"}},...r?{cursor:e?"grabbing":"grab"}:{},...n},"data-dragging":e,"data-disabled":t,...r&&!t?c:{},...r&&!t?m:{},...i})};s.displayName="SortableItem";export{s as SortableItem};
+import{useSortable as p}from"@dnd-kit/sortable";import{Slot as b}from"@radix-ui/react-slot";import{styled as g}from"@stitches/react";import*as f from"react";import{Box as x}from"../box/Box.js";const u=g(b),s=({id:l,asChild:o=!1,css:n,isDragHandle:r=!1,disabled:t,...i})=>{const{transform:a,setNodeRef:d,isDragging:e,listeners:c,attributes:m}=p({id:l});return f.createElement(o?u:x,{ref:d,css:{["--scale"]:1,transform:"translateX(calc(var(--translate-x)  * 1px)) translateY(calc(var(--translate-y)  * 1px)) scale(var(--scale))",zIndex:e?5:void 0,["--translate-x"]:(a==null?void 0:a.x)||0,["--translate-y"]:(a==null?void 0:a.y)||0,"&[disabled]":{opacity:.3,cursor:"not-allowed",["*"]:{pointerEvents:"none"}},...r?{cursor:e?"grabbing":"grab"}:{},...n},"data-dragging":e,"data-disabled":t,...r&&!t?c:{},...r&&!t?m:{},...i})};s.displayName="SortableItem";export{s as SortableItem};
 //# sourceMappingURL=SortableItem.js.map

package/dist/components/sortable/SortableItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableItem.js","sources":["../../../src/components/sortable/SortableItem.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\nimport { Box } from '../box'\nimport { useSortable } from '@dnd-kit/sortable'\nimport type { UniqueIdentifier } from '@dnd-kit/core'\nimport { CSS, styled } from '@stitches/react'\n\nexport type TSortableItemProps = {\n  id: UniqueIdentifier\n  asChild?: boolean\n  isDragHandle?: boolean\n  disabled?: boolean\n  css?: CSS\n}\n\nconst StyledSlot = styled(Slot)\n\nexport const SortableItem: React.FC<TSortableItemProps> = ({\n  id,\n  asChild = false,\n  css,\n  isDragHandle = false,\n  disabled,\n  ...rest\n}) => {\n  const { transform, setNodeRef, isDragging, listeners, attributes } =\n    useSortable({ id })\n\n  const Component = asChild ? StyledSlot : Box\n  return (\n    <Component\n      ref={setNodeRef}\n      css={{\n        ['--scale']: 1,\n        transform:\n          'translateX(calc(var(--translate-x)  * 1px)) translateY(calc(var(--translate-y)  * 1px)) scale(var(--scale))',\n        zIndex: isDragging ? 5 : undefined,\n        ['--translate-x']: transform?.x || 0,\n        ['--translate-y']: transform?.y || 0,\n        '&[disabled]': {\n          opacity: 0.3,\n          cursor: 'not-allowed',\n          ['*']: {\n            pointerEvents: 'none'\n          }\n        },\n        ...(isDragHandle ? { cursor: isDragging ? 'grabbing' : 'grab' } : {}),\n        ...css\n      }}\n      data-dragging={isDragging}\n      data-disabled={disabled}\n      {...(isDragHandle && !disabled ? listeners : {})}\n      {...(isDragHandle && !disabled ? attributes : {})}\n      {...rest}\n    />\n  )\n}\n\nSortableItem.displayName = 'SortableItem'\n"],"names":["StyledSlot","styled","Slot","SortableItem","id","asChild","css","isDragHandle","disabled","rest","transform","setNodeRef","isDragging","listeners","attributes","useSortable","React","Box"],"mappings":"iMAeA,MAAMA,EAAaC,EAAOC,CAAI,EAEjBC,EAA6C,CAAC,CACzD,GAAAC,EACA,QAAAC,EAAU,GACV,IAAAC,EACA,aAAAC,EAAe,GACf,SAAAC,KACGC,CACL,IAAM,CACJ,KAAM,CAAE,UAAAC,EAAW,WAAAC,EAAY,WAAAC,EAAY,UAAAC,EAAW,WAAAC,CAAW,EAC/DC,EAAY,CAAE,GAAAX,CAAG,CAAC,EAGpB,OACEY,EAAA,cAFgBX,EAAUL,EAAaiB,EAEtC,CACC,IAAKN,EACL,IAAK,CACH,CAAC,WAAY,EACb,UACE,8GACF,OAAQC,EAAa,EAAI,OACzB,CAAC,kBAAkBF,GAAA,KAAA,OAAAA,EAAW,IAAK,EACnC,CAAC,kBAAkBA,GAAA,KAAA,OAAAA,EAAW,IAAK,EACnC,cAAe,CACb,QAAS,GACT,OAAQ,cACR,CAAC,KAAM,CACL,cAAe,MACjB,CACF,EACA,GAAIH,EAAe,CAAE,OAAQK,EAAa,WAAa,MAAO,EAAI,CAAC,EACnE,GAAGN,CACL,EACA,gBAAeM,EACf,gBAAeJ,EACd,GAAID,GAAgB,CAACC,EAAWK,EAAY,CAAA,EAC5C,GAAIN,GAAgB,CAACC,EAAWM,EAAa,CAAA,EAC7C,GAAGL,CAAAA,CACN,CAEJ,EAEAN,EAAa,YAAc"}
+{"version":3,"file":"SortableItem.js","sources":["../../../src/components/sortable/SortableItem.tsx"],"sourcesContent":["import type { UniqueIdentifier } from '@dnd-kit/core'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { Slot } from '@radix-ui/react-slot'\nimport { CSS, styled } from '@stitches/react'\nimport * as React from 'react'\n\nimport { Box } from '../box'\n\nexport type TSortableItemProps = {\n  id: UniqueIdentifier\n  asChild?: boolean\n  isDragHandle?: boolean\n  disabled?: boolean\n  css?: CSS\n}\n\nconst StyledSlot = styled(Slot)\n\nexport const SortableItem: React.FC<TSortableItemProps> = ({\n  id,\n  asChild = false,\n  css,\n  isDragHandle = false,\n  disabled,\n  ...rest\n}) => {\n  const { transform, setNodeRef, isDragging, listeners, attributes } =\n    useSortable({ id })\n\n  const Component = asChild ? StyledSlot : Box\n  return (\n    <Component\n      ref={setNodeRef}\n      css={{\n        ['--scale']: 1,\n        transform:\n          'translateX(calc(var(--translate-x)  * 1px)) translateY(calc(var(--translate-y)  * 1px)) scale(var(--scale))',\n        zIndex: isDragging ? 5 : undefined,\n        ['--translate-x']: transform?.x || 0,\n        ['--translate-y']: transform?.y || 0,\n        '&[disabled]': {\n          opacity: 0.3,\n          cursor: 'not-allowed',\n          ['*']: {\n            pointerEvents: 'none'\n          }\n        },\n        ...(isDragHandle ? { cursor: isDragging ? 'grabbing' : 'grab' } : {}),\n        ...css\n      }}\n      data-dragging={isDragging}\n      data-disabled={disabled}\n      {...(isDragHandle && !disabled ? listeners : {})}\n      {...(isDragHandle && !disabled ? attributes : {})}\n      {...rest}\n    />\n  )\n}\n\nSortableItem.displayName = 'SortableItem'\n"],"names":["StyledSlot","styled","Slot","SortableItem","id","asChild","css","isDragHandle","disabled","rest","transform","setNodeRef","isDragging","listeners","attributes","useSortable","React","Box"],"mappings":"iMAgBA,MAAMA,EAAaC,EAAOC,CAAI,EAEjBC,EAA6C,CAAC,CACzD,GAAAC,EACA,QAAAC,EAAU,GACV,IAAAC,EACA,aAAAC,EAAe,GACf,SAAAC,KACGC,CACL,IAAM,CACJ,KAAM,CAAE,UAAAC,EAAW,WAAAC,EAAY,WAAAC,EAAY,UAAAC,EAAW,WAAAC,CAAW,EAC/DC,EAAY,CAAE,GAAAX,CAAG,CAAC,EAGpB,OACEY,EAAA,cAFgBX,EAAUL,EAAaiB,EAEtC,CACC,IAAKN,EACL,IAAK,CACH,CAAC,WAAY,EACb,UACE,8GACF,OAAQC,EAAa,EAAI,OACzB,CAAC,kBAAkBF,GAAA,KAAA,OAAAA,EAAW,IAAK,EACnC,CAAC,kBAAkBA,GAAA,KAAA,OAAAA,EAAW,IAAK,EACnC,cAAe,CACb,QAAS,GACT,OAAQ,cACR,CAAC,KAAM,CACL,cAAe,MACjB,CACF,EACA,GAAIH,EAAe,CAAE,OAAQK,EAAa,WAAa,MAAO,EAAI,CAAC,EACnE,GAAGN,CACL,EACA,gBAAeM,EACf,gBAAeJ,EACd,GAAID,GAAgB,CAACC,EAAWK,EAAY,CAAA,EAC5C,GAAIN,GAAgB,CAACC,EAAWM,EAAa,CAAA,EAC7C,GAAGL,CAAAA,CACN,CAEJ,EAEAN,EAAa,YAAc"}

package/dist/components/sortable/SortableRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableRoot.js","sources":["../../../src/components/sortable/SortableRoot.tsx"],"sourcesContent":["import {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors\n} from '@dnd-kit/core'\nimport type { UniqueIdentifier, DragEndEvent } from '@dnd-kit/core'\n\nimport {\n  arrayMove,\n  sortableKeyboardCoordinates,\n  SortableContext\n} from '@dnd-kit/sortable'\nimport * as React from 'react'\n\ntype TSortableRootProps = {\n  sortableIds: React.ReactText[]\n  onSortChange: (onSortChangeData: {\n    order: UniqueIdentifier[]\n    oldIndex: number\n    newIndex: number\n  }) => void\n}\n\nexport const SortableRoot: React.FC<TSortableRootProps> = ({\n  sortableIds,\n  onSortChange,\n  children\n}) => {\n  const [order, setOrder] = React.useState<React.ReactText[]>(sortableIds)\n  React.useEffect(() => {\n    setOrder(sortableIds)\n  }, [sortableIds])\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates\n    })\n  )\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n    if (active.id && over?.id && active.id !== over?.id) {\n      setOrder((order) => {\n        const oldIndex = order.indexOf(active.id)\n        const newIndex = order.indexOf(over.id)\n        const newOrder = arrayMove(order, oldIndex, newIndex)\n        onSortChange({ order: newOrder, oldIndex, newIndex })\n        return newOrder\n      })\n    }\n  }\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragEnd={handleDragEnd}\n    >\n      <SortableContext items={order}>{children}</SortableContext>\n    </DndContext>\n  )\n}\n\nSortableRoot.displayName = 'SortableRoot'\n"],"names":["SortableRoot","sortableIds","onSortChange","children","order","setOrder","React","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","DndContext","closestCenter","event","active","over","oldIndex","newIndex","newOrder","arrayMove","SortableContext"],"mappings":"gQA0Ba,MAAAA,EAA6C,CAAC,CACzD,YAAAC,EACA,aAAAC,EACA,SAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAAM,SAA4BL,CAAW,EACvEK,EAAM,UAAU,IAAM,CACpBD,EAASJ,CAAW,CACtB,EAAG,CAACA,CAAW,CAAC,EAEhB,MAAMM,EAAUC,EACdC,EAAUC,CAAa,EACvBD,EAAUE,EAAgB,CACxB,iBAAkBC,CACpB,CAAC,CACH,EAeA,OACEN,EAAA,cAACO,EAAA,CACC,QAASN,EACT,mBAAoBO,EACpB,UAjBmBC,GAAwB,CAC7C,KAAM,CAAE,OAAAC,EAAQ,KAAAC,CAAK,EAAIF,EACrBC,EAAO,KAAMC,GAAA,KAAAA,OAAAA,EAAM,KAAMD,EAAO,MAAOC,GAAA,KAAA,OAAAA,EAAM,KAC/CZ,EAAUD,GAAU,CAClB,MAAMc,EAAWd,EAAM,QAAQY,EAAO,EAAE,EAClCG,EAAWf,EAAM,QAAQa,EAAK,EAAE,EAChCG,EAAWC,EAAUjB,EAAOc,EAAUC,CAAQ,EACpD,OAAAjB,EAAa,CAAE,MAAOkB,EAAU,SAAAF,EAAU,SAAAC,CAAS,CAAC,EAC7CC,CACT,CAAC,CAEL,CAAA,EAQId,EAAA,cAACgB,EAAA,CAAgB,MAAOlB,GAAQD,CAAS,CAC3C,CAEJ,EAEAH,EAAa,YAAc"}
+{"version":3,"file":"SortableRoot.js","sources":["../../../src/components/sortable/SortableRoot.tsx"],"sourcesContent":["import type { DragEndEvent, UniqueIdentifier } from '@dnd-kit/core'\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors\n} from '@dnd-kit/core'\nimport {\n  arrayMove,\n  SortableContext,\n  sortableKeyboardCoordinates\n} from '@dnd-kit/sortable'\nimport * as React from 'react'\n\ntype TSortableRootProps = {\n  sortableIds: React.ReactText[]\n  onSortChange: (onSortChangeData: {\n    order: UniqueIdentifier[]\n    oldIndex: number\n    newIndex: number\n  }) => void\n}\n\nexport const SortableRoot: React.FC<TSortableRootProps> = ({\n  sortableIds,\n  onSortChange,\n  children\n}) => {\n  const [order, setOrder] = React.useState<React.ReactText[]>(sortableIds)\n  React.useEffect(() => {\n    setOrder(sortableIds)\n  }, [sortableIds])\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates\n    })\n  )\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n    if (active.id && over?.id && active.id !== over?.id) {\n      setOrder((order) => {\n        const oldIndex = order.indexOf(active.id)\n        const newIndex = order.indexOf(over.id)\n        const newOrder = arrayMove(order, oldIndex, newIndex)\n        onSortChange({ order: newOrder, oldIndex, newIndex })\n        return newOrder\n      })\n    }\n  }\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragEnd={handleDragEnd}\n    >\n      <SortableContext items={order}>{children}</SortableContext>\n    </DndContext>\n  )\n}\n\nSortableRoot.displayName = 'SortableRoot'\n"],"names":["SortableRoot","sortableIds","onSortChange","children","order","setOrder","React","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","DndContext","closestCenter","event","active","over","oldIndex","newIndex","newOrder","arrayMove","SortableContext"],"mappings":"gQAyBa,MAAAA,EAA6C,CAAC,CACzD,YAAAC,EACA,aAAAC,EACA,SAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAAM,SAA4BL,CAAW,EACvEK,EAAM,UAAU,IAAM,CACpBD,EAASJ,CAAW,CACtB,EAAG,CAACA,CAAW,CAAC,EAEhB,MAAMM,EAAUC,EACdC,EAAUC,CAAa,EACvBD,EAAUE,EAAgB,CACxB,iBAAkBC,CACpB,CAAC,CACH,EAeA,OACEN,EAAA,cAACO,EAAA,CACC,QAASN,EACT,mBAAoBO,EACpB,UAjBmBC,GAAwB,CAC7C,KAAM,CAAE,OAAAC,EAAQ,KAAAC,CAAK,EAAIF,EACrBC,EAAO,KAAMC,GAAA,KAAAA,OAAAA,EAAM,KAAMD,EAAO,MAAOC,GAAA,KAAA,OAAAA,EAAM,KAC/CZ,EAAUD,GAAU,CAClB,MAAMc,EAAWd,EAAM,QAAQY,EAAO,EAAE,EAClCG,EAAWf,EAAM,QAAQa,EAAK,EAAE,EAChCG,EAAWC,EAAUjB,EAAOc,EAAUC,CAAQ,EACpD,OAAAjB,EAAa,CAAE,MAAOkB,EAAU,SAAAF,EAAU,SAAAC,CAAS,CAAC,EAC7CC,CACT,CAAC,CAEL,CAAA,EAQId,EAAA,cAACgB,EAAA,CAAgB,MAAOlB,GAAQD,CAAS,CAC3C,CAEJ,EAEAH,EAAa,YAAc"}

package/dist/components/sortable/index.js

@@ -1,2 +1,2 @@
-import{SortableRoot as o}from"./SortableRoot.js";import{SortableItem as t}from"./SortableItem.js";import{SortableHandle as r}from"./SortableHandle.js";const e={Root:o,Item:t,Handle:r};export{e as Sortable};
+import{SortableHandle as o}from"./SortableHandle.js";import{SortableItem as t}from"./SortableItem.js";import{SortableRoot as r}from"./SortableRoot.js";const e={Root:r,Item:t,Handle:o};export{e as Sortable};
 //# sourceMappingURL=index.js.map

package/dist/components/sortable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/sortable/index.ts"],"sourcesContent":["import { SortableRoot as Root } from './SortableRoot'\nimport { SortableItem as Item } from './SortableItem'\nimport { SortableHandle as Handle } from './SortableHandle'\n\nexport const Sortable = { Root, Item, Handle }\n"],"names":["Sortable","Root","Item","Handle"],"mappings":"uJAIO,MAAMA,EAAW,CAAE,KAAAC,EAAM,KAAAC,EAAM,OAAAC,CAAO"}
+{"version":3,"file":"index.js","sources":["../../../src/components/sortable/index.ts"],"sourcesContent":["import { SortableHandle as Handle } from './SortableHandle'\nimport { SortableItem as Item } from './SortableItem'\nimport { SortableRoot as Root } from './SortableRoot'\n\nexport const Sortable = { Root, Item, Handle }\n"],"names":["Sortable","Root","Item","Handle"],"mappings":"uJAIO,MAAMA,EAAW,CAAE,KAAAC,EAAM,KAAAC,EAAM,OAAAC,CAAO"}