@atom-learning/components 2.27.0 → 2.28.0

package/CHANGELOG.md

@@ -1,17 +1,33 @@
-# [2.27.0](https://github.com/Atom-Learning/components/compare/v2.26.0...v2.27.0) (2023-01-09)
+# [2.28.0](https://github.com/Atom-Learning/components/compare/v2.27.0...v2.28.0) (2023-01-16)
 
 
 ### Bug Fixes
 
-* EmptyState Image size and margins ([8587eec](https://github.com/Atom-Learning/components/commit/8587eec50e434528dab8c9c9b66fc7ed3c3f2012))
-* update Avatar snapshot ([95ad52a](https://github.com/Atom-Learning/components/commit/95ad52ab2ba7e53d20b54a5f21573ea2dbd7328d))
+* declare @dnd-kit/utilities dep ([aa4d9dd](https://github.com/Atom-Learning/components/commit/aa4d9dd0b9923c4a2b159e3435294d9ce74ee44f))
+* failing test with incorrect assertion ([f3cca92](https://github.com/Atom-Learning/components/commit/f3cca92da2bd3989b10afe809a11301424856b1c))
+* import types explicitly ([d765fec](https://github.com/Atom-Learning/components/commit/d765fec26549eafca2671d1869b42641fde3d923))
+* import types explicitly ([8b4d604](https://github.com/Atom-Learning/components/commit/8b4d6045f9daa1ffbd2d08bdf51f668e55219539))
+* infinite loop in new table ([1335ba2](https://github.com/Atom-Learning/components/commit/1335ba201aadf3ab1291b52aaa9797e005725a0b))
+* match handle size to icon size ([5c8f1ce](https://github.com/Atom-Learning/components/commit/5c8f1cebecfd4845aa9528a8382472a2f654f02a))
+* revert bizzare text replace issue ([59132a7](https://github.com/Atom-Learning/components/commit/59132a756ae5d48d517e3e9bcfd0604a45f6329d))
+* row ID nonsense ([b76b7cc](https://github.com/Atom-Learning/components/commit/b76b7cce1b583813c24801280b239d3752f26b80))
+* target stitches component for table row styling ([b6f524b](https://github.com/Atom-Learning/components/commit/b6f524b12c1ad9cb2b4e0c5a86f1fee8aa586d36))
+* typo ([f87db2f](https://github.com/Atom-Learning/components/commit/f87db2f842ac22b0762d5d7cc2fc87b246fa3d6c))
+* update docs ([96d2a44](https://github.com/Atom-Learning/components/commit/96d2a441d322a33f0057cfc3c256e5f68cf2d0ea))
+* update docs ([fc1b6e7](https://github.com/Atom-Learning/components/commit/fc1b6e7d16aaa0d36864db52866a6768e38ffc5c))
+* update rowOrder usage ([6a546ab](https://github.com/Atom-Learning/components/commit/6a546abfbbed2600958ff7d44023af55fc06e568))
+* update snapshots ([d02adaf](https://github.com/Atom-Learning/components/commit/d02adafcc44071f4e983d34ed7750126beafcb9b))
 
 
 ### Features
 
-* Image fluid variant ([f13f4fd](https://github.com/Atom-Learning/components/commit/f13f4fd2101151df9d6c349a42c74a26aa6dba73))
-* no defaulting to fluid image ([e924f1e](https://github.com/Atom-Learning/components/commit/e924f1ebdecefc102d749827172c08c0960e088e))
-* remove EmptyState image container ([1a8fe21](https://github.com/Atom-Learning/components/commit/1a8fe214ef899b0f52fb04bf29d6575fddbf30d0))
+* DragAndDropTable ([c7a45c7](https://github.com/Atom-Learning/components/commit/c7a45c7130e4e05bb8112761aaf30e3e773589c4))
+* DragAndDropTable ([31ef457](https://github.com/Atom-Learning/components/commit/31ef457c10cbd92393129f2122a0dbf3b05dd734))
+* IDK why this doesn't work ([927414b](https://github.com/Atom-Learning/components/commit/927414bac03f69d51417ffecbfefcff873c64b5f))
+* it basically works ([9934134](https://github.com/Atom-Learning/components/commit/99341343a17d1809a7f2a7709acf446f908eb934))
+* separate drag-and-drop logic into DragAndDropContainer ([0be01bf](https://github.com/Atom-Learning/components/commit/0be01bf4961e735d1740d9ac64138f10ca1172cc))
+* throw error if id is missing ([79af78d](https://github.com/Atom-Learning/components/commit/79af78dde39a0b620aaeb48310f1e487c9a83efe))
+* WIP reorg of providers ([7bfbbb2](https://github.com/Atom-Learning/components/commit/7bfbbb2914f342178be6747a329b614841f31929))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/data-table/DataTable.d.ts

@@ -9,6 +9,7 @@ import { DataTableHeaderCell } from './DataTableHeaderCell';
 import { DataTableLoading } from './DataTableLoading';
 import { DataTableRow } from './DataTableRow';
 import { DataTableTable } from './DataTableTable';
+import { DragAndDropTable } from './drag-and-drop';
 import { Pagination } from './pagination';
 declare type TDataTable = React.FC<React.ComponentProps<typeof DataTableProvider>> & {
     /** Default table body implementation for `DataTable`.
@@ -22,6 +23,10 @@ declare type TDataTable = React.FC<React.ComponentProps<typeof DataTableProvider
      *
      */
     DataCell: typeof DataTableDataCell;
+    /**
+     * Used in place of `DataTable.Table` to render a table with rows that the user can sort by drag-and-drop
+     */
+    DragAndDropTable: typeof DragAndDropTable;
     /** Default global search implementation for `DataTable`
      *
      * If you need more customisation options, you can compose your own implementation with our UI-only input components and `useDataTable`.

package/dist/components/data-table/DataTable.js

@@ -1 +1 @@
-import*as r from"react";import{DataTableBody as t}from"./DataTableBody.js";import{DataTableProvider as e}from"./DataTableContext.js";import{DataTableDataCell as l}from"./DataTableDataCell.js";import{DataTableError as m}from"./DataTableError.js";import{DataTableGlobalFilter as i}from"./DataTableGlobalFilter.js";import{DataTableHead as b}from"./DataTableHead.js";import{DataTableHeaderCell as p}from"./DataTableHeaderCell.js";import{DataTableLoading as D}from"./DataTableLoading.js";import{DataTableRow as T}from"./DataTableRow.js";import{DataTableTable as f}from"./DataTableTable.js";import{Pagination as d}from"./pagination/Pagination.js";const a=o=>r.createElement(e,{...o});a.Body=t,a.DataCell=l,a.Head=b,a.HeaderCell=p,a.Pagination=d,a.Row=T,a.GlobalFilter=i,a.Table=f,a.Loading=D,a.Error=m;export{a as DataTable};
+import*as o from"react";import{DataTableBody as t}from"./DataTableBody.js";import{DataTableProvider as m}from"./DataTableContext.js";import{DataTableDataCell as e}from"./DataTableDataCell.js";import{DataTableError as l}from"./DataTableError.js";import{DataTableGlobalFilter as i}from"./DataTableGlobalFilter.js";import{DataTableHead as p}from"./DataTableHead.js";import{DataTableHeaderCell as b}from"./DataTableHeaderCell.js";import{DataTableLoading as D}from"./DataTableLoading.js";import{DataTableRow as T}from"./DataTableRow.js";import{DataTableTable as f}from"./DataTableTable.js";import"@dnd-kit/core";import"@dnd-kit/modifiers";import"@dnd-kit/sortable";import"../table/Table.js";import"@dnd-kit/utilities";import"@tanstack/react-table";import"./drag-and-drop/Handle.js";import{DragAndDropTable as d}from"./drag-and-drop/DragAndDropTable.js";import{Pagination as n}from"./pagination/Pagination.js";const a=r=>o.createElement(m,{...r});a.Body=t,a.DataCell=e,a.DragAndDropTable=d,a.Head=p,a.HeaderCell=b,a.Pagination=n,a.Row=T,a.GlobalFilter=i,a.Table=f,a.Loading=D,a.Error=l;export{a as DataTable};

package/dist/components/data-table/DataTable.types.d.ts

@@ -1,5 +1,6 @@
-import type { Table, SortDirection } from '@tanstack/react-table';
+import type { Table } from '@tanstack/react-table';
 import * as React from 'react';
+import type { VisibilityTableState, ColumnOrderTableState, ColumnPinningTableState, FiltersTableState, SortingTableState, ExpandedTableState, GroupingTableState, ColumnSizingTableState, PaginationTableState, RowSelectionTableState, SortDirection } from '@tanstack/react-table';
 export declare enum AsyncDataState {
     NONE = "none",
     PENDING = "pending",
@@ -8,7 +9,7 @@ export declare enum AsyncDataState {
 }
 export declare type TAsyncDataResult = {
     total: number;
-    results: Array<Record<string, unknown>>;
+    results: TableData;
 };
 export declare type TAsyncDataOptions = {
     pageIndex: number;
@@ -25,4 +26,19 @@ export declare type DataTableContextType<T = unknown> = Table<T> & {
     isSortable: boolean;
     asyncDataState?: AsyncDataState;
     runAsyncData?: (options: Partial<TAsyncDataOptions>) => Promise<void>;
+    data: TAsyncDataResult;
+    /**
+     * Directly update the data array that the table rows are built from.
+     * This is useful when re-ordering rows, but is high-risk if you're not sure what you're doing!
+     *
+     *  Note in particular that this value is also updated if you update the value of the `DataTable`'s `data` prop
+     *  — it's probably best to only use one of those two methods for any given table.
+     */
+    setData: React.Dispatch<React.SetStateAction<TAsyncDataResult>>;
+};
+export declare type TableData = Array<Record<string, unknown>>;
+export declare type InitialState = Partial<VisibilityTableState & ColumnOrderTableState & ColumnPinningTableState & FiltersTableState & SortingTableState & ExpandedTableState & GroupingTableState & ColumnSizingTableState & PaginationTableState & RowSelectionTableState>;
+export declare type TDefaultSort = {
+    column: string;
+    direction: SortDirection;
 };

package/dist/components/data-table/DataTableContext.d.ts

@@ -1,22 +1,17 @@
 import * as React from 'react';
-import type { VisibilityTableState, ColumnOrderTableState, ColumnPinningTableState, FiltersTableState, SortingTableState, ExpandedTableState, GroupingTableState, ColumnSizingTableState, PaginationTableState, RowSelectionTableState, SortDirection } from '@tanstack/react-table';
-import { DataTableContextType, TGetAsyncData } from './DataTable.types';
-declare type InitialState = Partial<VisibilityTableState & ColumnOrderTableState & ColumnPinningTableState & FiltersTableState & SortingTableState & ExpandedTableState & GroupingTableState & ColumnSizingTableState & PaginationTableState & RowSelectionTableState>;
-declare type TableProviderProps = {
+import { DataTableContextType, TDefaultSort, TGetAsyncData, TableData, InitialState } from './DataTable.types';
+declare type DataTableProviderProps = {
     columns: any;
-    defaultSort?: {
-        column: string;
-        direction: SortDirection;
-    };
+    defaultSort?: TDefaultSort;
     children: React.ReactNode;
     initialState?: InitialState;
 } & ({
-    data: Array<Record<string, unknown>>;
+    data: TableData;
     getAsyncData?: never;
 } | {
     data?: never;
     getAsyncData: TGetAsyncData;
 });
-export declare const DataTableProvider: ({ columns, data: dataProp, getAsyncData, defaultSort, initialState, children }: TableProviderProps) => JSX.Element;
+export declare const DataTableProvider: ({ columns, data: dataProp, getAsyncData, defaultSort, initialState, children }: DataTableProviderProps) => JSX.Element;
 export declare const useDataTable: <T extends Record<string, unknown>>() => DataTableContextType<T>;
 export {};

package/dist/components/data-table/DataTableContext.js

@@ -1 +1 @@
-import*as e from"react";import x from"use-deep-compare-effect";import{useReactTable as I,getCoreRowModel as A,getPaginationRowModel as G,getSortedRowModel as L,getFilteredRowModel as z}from"@tanstack/react-table";import{AsyncDataState as n}from"./DataTable.types.js";import{getNewAsyncData as k}from"./getNewAsyncData.js";const J={pageIndex:0,pageSize:10},C=e.createContext(null),O=({columns:i,data:t=[],getAsyncData:o,defaultSort:u,initialState:l=void 0,children:R})=>{var p;const[b,v]=e.useState({results:t!=null?t:[],total:(p=t==null?void 0:t.length)!=null?p:0}),[r,h]=e.useState(!!(l!=null&&l.pagination)),[w,g]=e.useState(n.NONE),[d,E]=e.useState(""),[a,M]=e.useState({...J,...l==null?void 0:l.pagination}),[c,P]=e.useState(!1),[s,y]=e.useState(u?[{id:u.column,desc:u.direction==="desc"}]:[]),D=e.useCallback(()=>{h(!0)},[]),S=e.useCallback(async F=>{if(o)try{g(n.PENDING);const N=await k(o,F,a,s,d);v(N),g(n.FULFILLED)}catch{g(n.REJECTED)}},[o,a==null?void 0:a.pageIndex,a==null?void 0:a.pageSize,s,d]);e.useEffect(()=>{S({})},[S]),x(()=>{!t||v({results:t,total:t.length})},[t]);const m=()=>b.total,f=I({columns:i,data:b.results,pageCount:a?Math.ceil(m()/a.pageSize):-1,initialState:l,state:{sorting:s,globalFilter:d,pagination:a},manualPagination:o&&r,manualSorting:o&&r,enableSorting:w!==n.PENDING,enableGlobalFilter:!o,getCoreRowModel:A(),getPaginationRowModel:r?G():void 0,getSortedRowModel:c||s.length?L():void 0,getFilteredRowModel:z(),onPaginationChange:r?M:void 0,onSortingChange:y,onGlobalFilterChange:E}),T=e.useMemo(()=>({...f,setIsSortable:P,applyPagination:D,getTotalRows:m,isSortable:c,asyncDataState:w,runAsyncData:S}),[f,D,m,c]);return e.createElement(C.Provider,{value:T},R)},U=()=>{const i=e.useContext(C);if(!i)throw new Error("useDataTable can only be called from inside a DataTableProvider");return i};export{O as DataTableProvider,U as useDataTable};
+import*as t from"react";import N from"use-deep-compare-effect";import{useReactTable as I,getCoreRowModel as x,getPaginationRowModel as A,getSortedRowModel as G,getFilteredRowModel as L}from"@tanstack/react-table";import{AsyncDataState as l}from"./DataTable.types.js";import{getNewAsyncData as z}from"./getNewAsyncData.js";import{useSortByColumn as k}from"./useSorting.js";import{usePagination as B}from"./usePagination.js";const w=t.createContext(null),J=({columns:n,data:a=[],getAsyncData:o,defaultSort:P,initialState:s=void 0,children:y})=>{var b;const[g,u]=t.useState({results:a!=null?a:[],total:(b=a==null?void 0:a.length)!=null?b:0}),{isPaginated:i,applyPagination:D,paginationState:e,setPaginationState:C}=B(s==null?void 0:s.pagination),[f,d]=t.useState(l.NONE),[c,h]=t.useState(""),{setIsSortable:E,isSortable:S,sorting:r,setSorting:M}=k(P),m=t.useCallback(async F=>{if(o)try{d(l.PENDING);const T=await z(o,F,e,r,c);u(T),d(l.FULFILLED)}catch{d(l.REJECTED)}},[o,e==null?void 0:e.pageIndex,e==null?void 0:e.pageSize,r,c]);t.useEffect(()=>{m({})},[m]),N(()=>{!a||u({results:a,total:a.length})},[a]);const p=()=>g.total,v=I({columns:n,data:g.results,pageCount:e?Math.ceil(p()/e.pageSize):-1,initialState:s,state:{sorting:r,globalFilter:c,pagination:e},manualPagination:o&&i,manualSorting:o&&i,enableSorting:f!==l.PENDING,enableGlobalFilter:!o,getCoreRowModel:x(),getPaginationRowModel:i?A():void 0,getSortedRowModel:S||r.length?G():void 0,getFilteredRowModel:L(),onPaginationChange:i?C:void 0,onSortingChange:M,onGlobalFilterChange:h}),R=t.useMemo(()=>({...v,data:g,setData:u,setIsSortable:E,applyPagination:D,getTotalRows:p,isSortable:S,asyncDataState:f,runAsyncData:m}),[v,D,p,S]);return t.createElement(w.Provider,{value:R},y)},O=()=>{const n=t.useContext(w);if(!n)throw new Error("useDataTable can only be called from inside a DataTableProvider");return n};export{J as DataTableProvider,O as useDataTable};

package/dist/components/data-table/DataTableRow.d.ts

@@ -1,8 +1,7 @@
 import type { Row } from '@tanstack/react-table';
 import * as React from 'react';
 import { Table } from '../table';
-declare type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {
+export declare type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {
     row: Row<Record<string, unknown>>;
 };
 export declare const DataTableRow: React.FC<DataTableRowProps>;
-export {};

package/dist/components/data-table/DataTableRow.js

@@ -1 +1 @@
-import*as l from"react";import{Table as a}from"../table/Table.js";import{DataTableDataCell as o}from"./DataTableDataCell.js";const r=({row:t})=>l.createElement(a.Row,null,t.getVisibleCells().map(e=>l.createElement(o,{key:e.id,cell:e})));export{r as DataTableRow};
+import*as l from"react";import{Table as a}from"../table/Table.js";import{DataTableDataCell as o}from"./DataTableDataCell.js";const r=({row:t})=>l.createElement(a.Row,null,t.getVisibleCells().map((e,m)=>l.createElement(o,{key:e.id,cell:e})));export{r as DataTableRow};

package/dist/components/data-table/DataTableTable.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Table } from '../table';
 import { DataTable } from './DataTable';
-declare type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'children'> & Partial<Pick<React.ComponentProps<typeof DataTable.Head>, 'theme' | 'sortable'>> & Partial<Pick<React.ComponentProps<typeof Table.Body>, 'striped'>>;
+export declare type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'children'> & Partial<Pick<React.ComponentProps<typeof DataTable.Head>, 'theme' | 'sortable'>> & Partial<Pick<React.ComponentProps<typeof Table.Body>, 'striped'>>;
 export declare const DataTableTable: React.FC<DataTableTableProps>;
-export {};

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

@@ -0,0 +1,21 @@
+import type { TAsyncDataResult, TableData } from '../DataTable.types';
+import type { UniqueIdentifier } from '@dnd-kit/core';
+import * as React from 'react';
+declare type DragAndDropContainerProps = {
+    idColumn?: string;
+    onChange?: (oldIndex: number, newIndex: number, newData: TableData) => void;
+};
+export declare const processDragEndEvent: (event: {
+    active: {
+        id: UniqueIdentifier;
+    };
+    over: {
+        id: UniqueIdentifier;
+    };
+}, data: TAsyncDataResult, rowOrder: Array<UniqueIdentifier>, idColumn: UniqueIdentifier, onChange?: ((oldIndex: number, newIndex: number, newData: TableData) => void) | undefined) => {
+    results: Record<string, unknown>[];
+    total: number;
+};
+export declare const getRowOrder: (data: TAsyncDataResult, idColumn: string) => UniqueIdentifier[];
+export declare const DragAndDropContainer: React.FC<DragAndDropContainerProps>;
+export {};

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

@@ -0,0 +1 @@
+import{useDataTable as h}from"../DataTableContext.js";import{useSensors as D,useSensor as u,PointerSensor as f,KeyboardSensor as g,DndContext as y,closestCenter as C}from"@dnd-kit/core";import{restrictToVerticalAxis as S}from"@dnd-kit/modifiers";import{sortableKeyboardCoordinates as b,SortableContext as w,verticalListSortingStrategy as x,arrayMove as E}from"@dnd-kit/sortable";import*as c from"react";const p=(t,s,o,r,a)=>{const{active:i,over:d}=t,l=o.indexOf(i[r]),n=o.indexOf(d==null?void 0:d[r]),e=E(s.results,l,n);return a==null||a(l,n,e),{results:e,total:e.length}},m=(t,s)=>t.results.map(o=>{const r=o[s];if(r===void 0)throw new Error("To ensure drag-and-drop works correctly, please ensure that each row has a unique ID. Use the `id` property or pass DataTable an `idColumn` prop that defines the ID property on the rows.");return r}),T=({idColumn:t="id",onChange:s=void 0,children:o})=>{const{data:r,setData:a}=h(),i=c.useMemo(()=>m(r,t),[r]),d=D(u(f),u(g,{coordinateGetter:b}));return c.createElement(y,{sensors:d,collisionDetection:C,onDragEnd:l=>{const{active:n,over:e}=l;n.id&&(e==null?void 0:e.id)&&n.id!==(e==null?void 0:e.id)&&a(v=>p({active:n,over:e},v,i,t,s))},modifiers:[S]},c.createElement(w,{items:i,strategy:x},o))};export{T as DragAndDropContainer,m as getRowOrder,p as processDragEndEvent};

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { DataTableTableProps } from '../DataTableTable';
+declare type DragAndDropTableProps = DataTableTableProps & {
+    idColumn?: string;
+    onDragAndDrop?: (oldIndex: number, newIndex: number, newData: Record<string, unknown>[]) => void;
+};
+export declare const DragAndDropTable: React.FC<DragAndDropTableProps>;
+export {};

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

@@ -0,0 +1 @@
+import*as e from"react";import{Table as s}from"../../table/Table.js";import{DataTable as D}from"../DataTable.js";import{AsyncDataState as c}from"../DataTable.types.js";import{useDataTable as d}from"../DataTableContext.js";import{DataTableLoading as b}from"../DataTableLoading.js";import{DragAndDropContainer as f}from"./DragAndDropContainer.js";import{DragAndDropTableBody as E}from"./DragAndDropTableBody.js";const g=({idColumn:t,onDragAndDrop:r,sortable:a,striped:o,theme:n,css:m,...i})=>{const{asyncDataState:l}=d(),p=l===c.PENDING;return e.createElement(f,{onChange:r,idColumn:t},e.createElement(b,null),e.createElement(s,{...i,css:{...m,...p&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},e.createElement(D.Head,{theme:n,sortable:a}),e.createElement(E,{striped:o})))};export{g as DragAndDropTable};

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

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

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

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

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

@@ -0,0 +1,7 @@
+import type { Row } from '@tanstack/react-table';
+import * as React from 'react';
+import { Table } from '../../table';
+export declare type DataTableDraggableRowProps = React.ComponentProps<typeof Table.Row> & {
+    row: Row<Record<string, unknown>>;
+};
+export declare const DraggableRow: React.FC<DataTableDraggableRowProps>;

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

@@ -0,0 +1 @@
+import*as e from"react";import{Table as i}from"../../table/Table.js";import{DataTableDataCell as p}from"../DataTableDataCell.js";import"../DataTableContext.js";import"@dnd-kit/core";import"@dnd-kit/modifiers";import{useSortable as f}from"@dnd-kit/sortable";import{CSS as c}from"@dnd-kit/utilities";import{flexRender as d}from"@tanstack/react-table";import{Handle as g}from"./Handle.js";import"../DataTable.js";import"../DataTable.types.js";import"../DataTableLoading.js";const b=({row:t})=>{const{attributes:l,listeners:m,transform:a,setNodeRef:n,isDragging:o}=f({id:t.original.id});return e.createElement(i.Row,{ref:n,css:{transform:c.Transform.toString(a),zIndex:o?5:void 0}},t.getVisibleCells().map((r,s)=>s===0?e.createElement(i.Cell,{key:r.id},e.createElement(g,{...l,...m,isDragging:o,css:{display:"inline-block"},label:"drag and drop"}),d(r.column.columnDef.cell,r.getContext())):e.createElement(p,{key:r.id,cell:r})))};export{b as DraggableRow};