{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"data-grid-table-dnd","type":"registry:ui","title":"Data Grid Table Dnd","description":"","dependencies":["@dnd-kit/core","@dnd-kit/sortable","@dnd-kit/utilities","@tanstack/react-table"],"registryDependencies":["button","@neui/data-grid","@neui/data-grid-table"],"files":[{"path":"data-grid-table-dnd.tsx","type":"registry:ui","content":"\"use client\"\n\"use no memo\"\n\nimport {\n  Fragment,\n  memo,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport type { CSSProperties, ReactNode } from \"react\"\nimport { useDataGrid } from \"@/components/neui/data-grid/data-grid\"\nimport {\n  DataGridTableBase,\n  DataGridTableBody,\n  DataGridTableBodyRow,\n  DataGridTableBodyRowCell,\n  DataGridTableBodyRowExpandded,\n  DataGridTableBodyRowSkeleton,\n  DataGridTableBodyRowSkeletonCell,\n  DataGridTableEmpty,\n  DataGridTableFillBodyCell,\n  DataGridTableFillHeadCell,\n  DataGridTableFoot,\n  DataGridTableHead,\n  DataGridTableHeadRow,\n  DataGridTableHeadRowCell,\n  DataGridTableHeadRowCellResize,\n  DataGridTableRowSpacer,\n  DataGridTableViewport,\n} from \"@/components/neui/data-grid/data-grid-table\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type Modifier,\n} from \"@dnd-kit/core\"\nimport {\n  horizontalListSortingStrategy,\n  SortableContext,\n  sortableKeyboardCoordinates,\n  useSortable,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport { flexRender } from \"@tanstack/react-table\"\nimport type {\n  Cell,\n  Header,\n  HeaderGroup,\n  Row,\n  Table,\n} from \"@tanstack/react-table\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DataGridTableDndHeader<TData>({\n  header,\n}: {\n  header: Header<TData, unknown>\n}) {\n  const { props } = useDataGrid()\n  const { column } = header\n\n  // Check if column ordering is enabled for this column\n  const canOrder =\n    (column.columnDef as { enableColumnOrdering?: boolean })\n      .enableColumnOrdering !== false\n\n  const {\n    attributes,\n    isDragging,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n  } = useSortable({\n    id: header.column.id,\n  })\n\n  const style: CSSProperties = {\n    opacity: isDragging ? 0.8 : 1,\n    position: \"relative\",\n    transform: CSS.Translate.toString(transform),\n    transition,\n    cursor: isDragging ? \"grabbing\" : undefined,\n    whiteSpace: \"nowrap\",\n    width: props.tableLayout?.columnsResizable\n      ? `calc(var(--header-${header.id}-size) * 1px)`\n      : header.column.getSize(),\n    zIndex: isDragging ? 1 : 0,\n  }\n\n  return (\n    <DataGridTableHeadRowCell\n      header={header}\n      dndStyle={style}\n      dndRef={setNodeRef}\n    >\n      <div className=\"flex items-center justify-start gap-0.5\">\n        {canOrder && (\n          <Button\n            size=\"icon-sm\"\n            variant=\"ghost\"\n            className={`-ms-2 size-6 ${isDragging ? \"cursor-grabbing\" : \"cursor-grab active:cursor-grabbing\"}`}\n            {...attributes}\n            {...listeners}\n            aria-label=\"Drag to reorder\"\n          >\n            <IconPlaceholder\n              lucide=\"GripVerticalIcon\"\n              tabler=\"IconGripVertical\"\n              hugeicons=\"DragDropVerticalIcon\"\n              phosphor=\"DotsSixVerticalIcon\"\n              remixicon=\"RiDraggable\"\n              className=\"opacity-60 hover:opacity-100\"\n              aria-hidden=\"true\"\n            />\n          </Button>\n        )}\n        <div className=\"grow\">\n          {header.isPlaceholder\n            ? null\n            : flexRender(header.column.columnDef.header, header.getContext())}\n        </div>\n        {props.tableLayout?.columnsResizable && column.getCanResize() && (\n          <DataGridTableHeadRowCellResize header={header} />\n        )}\n      </div>\n    </DataGridTableHeadRowCell>\n  )\n}\n\nfunction DataGridTableDndCell<TData>({ cell }: { cell: Cell<TData, unknown> }) {\n  const { props } = useDataGrid()\n  const { isDragging, setNodeRef, transform, transition } = useSortable({\n    id: cell.column.id,\n  })\n\n  const style: CSSProperties = {\n    opacity: isDragging ? 0.8 : 1,\n    position: \"relative\",\n    transform: CSS.Translate.toString(transform),\n    transition,\n    cursor: isDragging ? \"grabbing\" : undefined,\n    width: props.tableLayout?.columnsResizable\n      ? `calc(var(--col-${cell.column.id}-size) * 1px)`\n      : cell.column.getSize(),\n    zIndex: isDragging ? 1 : 0,\n  }\n\n  return (\n    <DataGridTableBodyRowCell cell={cell} dndStyle={style} dndRef={setNodeRef}>\n      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n    </DataGridTableBodyRowCell>\n  )\n}\n\nfunction DataGridTableDndBodyRows<TData>({ table }: { table: Table<TData> }) {\n  const { isLoading, props } = useDataGrid()\n  const pagination = table.getState().pagination\n\n  if (props.loadingMode === \"skeleton\" && isLoading && pagination?.pageSize) {\n    return (\n      <>\n        {Array.from({ length: pagination.pageSize }).map((_, rowIndex) => (\n          <DataGridTableBodyRowSkeleton key={rowIndex}>\n            {table.getVisibleFlatColumns().map((column, colIndex) => {\n              return (\n                <DataGridTableBodyRowSkeletonCell\n                  column={column}\n                  key={colIndex}\n                >\n                  {column.columnDef.meta?.skeleton}\n                </DataGridTableBodyRowSkeletonCell>\n              )\n            })}\n            <DataGridTableFillBodyCell />\n          </DataGridTableBodyRowSkeleton>\n        ))}\n      </>\n    )\n  }\n\n  if (!table.getRowModel().rows.length) return <DataGridTableEmpty />\n\n  return (\n    <>\n      {table.getRowModel().rows.map((row: Row<TData>) => {\n        return (\n          <Fragment key={row.id}>\n            <DataGridTableBodyRow row={row}>\n              <SortableContext\n                items={table.getState().columnOrder}\n                strategy={horizontalListSortingStrategy}\n              >\n                {row.getVisibleCells().map((cell: Cell<TData, unknown>) => (\n                  <DataGridTableDndCell cell={cell} key={cell.id} />\n                ))}\n              </SortableContext>\n              <DataGridTableFillBodyCell />\n            </DataGridTableBodyRow>\n            {row.getIsExpanded() && <DataGridTableBodyRowExpandded row={row} />}\n          </Fragment>\n        )\n      })}\n    </>\n  )\n}\n\n/**\n * Memoized body rows: skip re-renders during active column resize.\n * Column widths update via CSS variables on the <table> element,\n * so the browser handles width changes without React re-renders.\n */\nconst MemoizedDataGridTableDndBodyRows = memo(\n  DataGridTableDndBodyRows,\n  (_prev, next) => !!next.table.getState().columnSizingInfo.isResizingColumn\n) as typeof DataGridTableDndBodyRows\n\nfunction DataGridTableDnd<TData>({\n  handleDragEnd,\n  footerContent,\n}: {\n  handleDragEnd: (event: DragEndEvent) => void\n  footerContent?: ReactNode\n}) {\n  const { table, props } = useDataGrid()\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [isDraggingColumn, setIsDraggingColumn] = useState(false)\n\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    // Keyboard reordering moves one sortable position per keypress instead\n    // of the sensor's raw 25px default.\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    })\n  )\n\n  useEffect(() => {\n    if (!isDraggingColumn) return\n\n    const { body, documentElement } = document\n    const previousBodyCursor = body.style.cursor\n    const previousDocumentCursor = documentElement.style.cursor\n\n    body.style.cursor = \"grabbing\"\n    documentElement.style.cursor = \"grabbing\"\n\n    return () => {\n      body.style.cursor = previousBodyCursor\n      documentElement.style.cursor = previousDocumentCursor\n    }\n  }, [isDraggingColumn])\n\n  // Custom modifier to restrict dragging within table bounds with edge offset\n  const modifiers = useMemo(() => {\n    const restrictToTableBounds: Modifier = ({\n      draggingNodeRect,\n      transform,\n    }) => {\n      if (!draggingNodeRect || !containerRef.current) {\n        return { ...transform, y: 0 }\n      }\n\n      const containerRect = containerRef.current.getBoundingClientRect()\n      const edgeOffset = 0\n\n      const minX = containerRect.left - draggingNodeRect.left - edgeOffset\n      const maxX =\n        containerRect.right -\n        draggingNodeRect.left -\n        draggingNodeRect.width +\n        edgeOffset\n\n      return {\n        ...transform,\n        x: Math.min(Math.max(transform.x, minX), maxX),\n        y: 0, // Lock vertical movement\n      }\n    }\n\n    return [restrictToTableBounds]\n  }, [])\n\n  return (\n    <DndContext\n      collisionDetection={closestCenter}\n      id={useId()}\n      modifiers={modifiers}\n      onDragCancel={() => setIsDraggingColumn(false)}\n      onDragEnd={(event) => {\n        setIsDraggingColumn(false)\n        handleDragEnd(event)\n      }}\n      onDragStart={() => setIsDraggingColumn(true)}\n      sensors={sensors}\n    >\n      <DataGridTableViewport\n        viewportRef={containerRef}\n        className={\n          isDraggingColumn\n            ? \"relative cursor-grabbing [&_*]:cursor-grabbing!\"\n            : \"relative\"\n        }\n      >\n        <DataGridTableBase>\n          <DataGridTableHead>\n            {table\n              .getHeaderGroups()\n              .map((headerGroup: HeaderGroup<TData>, index) => {\n                return (\n                  <DataGridTableHeadRow key={index} rowId={headerGroup.id}>\n                    <SortableContext\n                      items={table.getState().columnOrder}\n                      strategy={horizontalListSortingStrategy}\n                    >\n                      {headerGroup.headers.map((header) => (\n                        <DataGridTableDndHeader\n                          header={header}\n                          key={header.id}\n                        />\n                      ))}\n                    </SortableContext>\n                    <DataGridTableFillHeadCell />\n                  </DataGridTableHeadRow>\n                )\n              })}\n          </DataGridTableHead>\n\n          {(props.tableLayout?.stripped || !props.tableLayout?.rowBorder) && (\n            <DataGridTableRowSpacer />\n          )}\n\n          <DataGridTableBody>\n            <MemoizedDataGridTableDndBodyRows table={table} />\n          </DataGridTableBody>\n\n          {footerContent && (\n            <DataGridTableFoot>{footerContent}</DataGridTableFoot>\n          )}\n        </DataGridTableBase>\n      </DataGridTableViewport>\n    </DndContext>\n  )\n}\n\nexport { DataGridTableDnd }","target":"components/neui/data-grid/data-grid-table-dnd.tsx"}]}