@moontra/moonui-pro 2.3.7 → 2.4.0

package/src/components/data-table/index.tsx

@@ -13,6 +13,7 @@ import {
   ColumnFiltersState,
   VisibilityState,
   OnChangeFn,
+  Row,
 } from '@tanstack/react-table'
 import { Button } from '../ui/button'
 import { Input } from '../ui/input'
@@ -32,18 +33,34 @@ import {
   Settings,
   Lock,
   Sparkles,
-  Loader2
+  Loader2,
+  FileDown,
+  FileJson,
+  FileSpreadsheet
 } from 'lucide-react'
 import { cn } from '../../lib/utils'
 import { useSubscription } from '../../hooks/use-subscription'
 import { motion, AnimatePresence } from 'framer-motion'
+import { DataTableColumnToggle } from './data-table-column-toggle'
+import { DataTableBulkActions, type BulkAction } from './data-table-bulk-actions'
+import { exportData, type ExportFormat, getVisibleColumns } from './data-table-export'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu'
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
   data: TData[]
   searchable?: boolean
   filterable?: boolean
-  exportable?: boolean
+  exportable?: boolean | {
+    formats?: ExportFormat[]
+    filename?: string
+    onExport?: (data: TData[], format: ExportFormat) => void
+  }
   selectable?: boolean
   pagination?: boolean
   pageSize?: number
@@ -54,6 +71,7 @@ interface DataTableProps<TData, TValue> {
   renderSubComponent?: (props: { row: { original: TData; id: string } }) => React.ReactNode
   expandedRows?: Set<string>
   onRowExpandChange?: (expandedRows: Set<string>) => void
+  bulkActions?: BulkAction<TData>[]
   // Additional props for compatibility
   enableSorting?: boolean
   enableFiltering?: boolean
@@ -115,6 +133,7 @@ export function DataTable<TData, TValue>({
   renderSubComponent,
   expandedRows: controlledExpandedRows,
   onRowExpandChange,
+  bulkActions = [],
   features = {},
   theme = {},
   texts = {},
@@ -182,8 +201,11 @@ export function DataTable<TData, TValue>({
 
   const actualPageSize = defaultPageSize || pageSize
   
+  // Memoize data to prevent unnecessary re-renders
+  const stableData = React.useMemo(() => data, [data])
+  
   const table = useReactTable({
-    data,
+    data: stableData,
     columns,
     onSortingChange: onSortingChange !== undefined ? onSortingChange : setSorting,
     onColumnFiltersChange: onColumnFiltersChange !== undefined ? onColumnFiltersChange : setColumnFilters,
@@ -209,6 +231,11 @@ export function DataTable<TData, TValue>({
         pageSize: actualPageSize,
       },
     },
+    // Prevent re-renders on state changes
+    autoResetAll: false,
+    autoResetPageIndex: false,
+    autoResetExpanded: false,
+    getRowId: (row: TData) => (row as any).id || (row as any).orderId || Math.random().toString(),
   })
 
   React.useEffect(() => {
@@ -217,6 +244,22 @@ export function DataTable<TData, TValue>({
       onRowSelect(selectedRows)
     }
   }, [rowSelection, onRowSelect, selectable, table])
+  
+  // Memoize row model to prevent unnecessary re-renders when only expanded state changes
+  const tableState = table.getState()
+  const rowModel = table.getRowModel()
+  
+  // Use a ref to track if rows actually changed
+  const rowsRef = React.useRef(rowModel.rows)
+  const rowsChanged = React.useMemo(() => {
+    const changed = rowsRef.current !== rowModel.rows
+    if (changed) {
+      rowsRef.current = rowModel.rows
+    }
+    return changed
+  }, [rowModel.rows])
+  
+  const rows = rowsRef.current
 
   // Merge features with defaults
   const enabledFeatures = {
@@ -229,14 +272,51 @@ export function DataTable<TData, TValue>({
     export: features.export !== false || exportable,
   }
 
-  const handleExport = () => {
+  const handleExport = async (format: ExportFormat) => {
+    const selectedRows = table.getFilteredSelectedRowModel().rows
+    const dataToExport = selectedRows.length > 0 
+      ? selectedRows.map(row => row.original)
+      : table.getFilteredRowModel().rows.map(row => row.original)
+    
+    // Use custom export handler if provided
+    if (typeof exportable === 'object' && exportable.onExport) {
+      exportable.onExport(dataToExport, format)
+      return
+    }
+    
+    // Use legacy onExport if provided
     if (onExport) {
-      const selectedRows = table.getFilteredSelectedRowModel().rows
-      const dataToExport = selectedRows.length > 0 
-        ? selectedRows.map(row => row.original)
-        : table.getFilteredRowModel().rows.map(row => row.original)
       onExport(dataToExport)
+      return
     }
+    
+    // Default export behavior
+    const filename = typeof exportable === 'object' && exportable.filename 
+      ? exportable.filename 
+      : 'data-export'
+    
+    const visibleColumns = getVisibleColumns(columns as any, columnVisibility)
+    
+    await exportData(dataToExport as Record<string, any>[], {
+      format,
+      filename,
+      columns: visibleColumns,
+      includeHeaders: true
+    })
+  }
+
+  // Parse export options
+  const exportFormats: ExportFormat[] = React.useMemo(() => {
+    if (!exportable) return []
+    if (exportable === true) return ['csv', 'json']
+    if (typeof exportable === 'object' && exportable.formats) {
+      return exportable.formats
+    }
+    return ['csv', 'json']
+  }, [exportable])
+
+  const clearRowSelection = () => {
+    table.resetRowSelection()
   }
 
   return (
@@ -264,20 +344,52 @@ export function DataTable<TData, TValue>({
               Filters
             </Button>
           )}
+          
+          {/* Bulk actions */}
+          {selectable && bulkActions.length > 0 && (
+            <DataTableBulkActions
+              selectedRows={table.getFilteredSelectedRowModel().rows.map(row => row.original)}
+              actions={bulkActions}
+              onClearSelection={clearRowSelection}
+            />
+          )}
         </div>
 
         <div className="flex items-center space-x-2">
-          {exportable && (
-            <Button variant="outline" size="sm" onClick={handleExport}>
-              <span suppressHydrationWarning><Download className="mr-2 h-4 w-4" /></span>
-              Export
-            </Button>
+          {/* Export dropdown */}
+          {exportable && exportFormats.length > 0 && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm">
+                  <span suppressHydrationWarning><Download className="mr-2 h-4 w-4" /></span>
+                  Export
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {exportFormats.includes('csv') && (
+                  <DropdownMenuItem onClick={() => handleExport('csv')}>
+                    <FileSpreadsheet className="mr-2 h-4 w-4" />
+                    Export as CSV
+                  </DropdownMenuItem>
+                )}
+                {exportFormats.includes('json') && (
+                  <DropdownMenuItem onClick={() => handleExport('json')}>
+                    <FileJson className="mr-2 h-4 w-4" />
+                    Export as JSON
+                  </DropdownMenuItem>
+                )}
+                {exportFormats.includes('xlsx') && (
+                  <DropdownMenuItem onClick={() => handleExport('xlsx')}>
+                    <FileDown className="mr-2 h-4 w-4" />
+                    Export as Excel
+                  </DropdownMenuItem>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
           )}
           
-          <Button variant="outline" size="sm">
-            <span suppressHydrationWarning><Settings className="mr-2 h-4 w-4" /></span>
-            Columns
-          </Button>
+          {/* Column visibility toggle */}
+          <DataTableColumnToggle table={table} />
         </div>
       </div>
 
@@ -336,80 +448,21 @@ export function DataTable<TData, TValue>({
                   </div>
                 </td>
               </motion.tr>
-            ) : table.getRowModel().rows?.length ? (
+            ) : rows?.length ? (
               <>
-                {table.getRowModel().rows.map((row, index) => {
+                {rows.map((row, index) => {
                   const rowId = (row.original as any).id || row.id
                   const isExpanded = enableExpandable && expandedRows.has(rowId)
                   
                   return (
-                    <React.Fragment key={row.id}>
-                      <motion.tr
-                        initial={false}
-                        animate={{ opacity: 1 }}
-                        className={cn(
-                          "border-b transition-colors hover:bg-muted/50",
-                          row.getIsSelected() && "bg-muted",
-                          isExpanded && "border-b-0"
-                        )}
-                      >
-                        {row.getVisibleCells().map((cell) => (
-                          <td key={cell.id} className="moonui-data-table-td p-4 align-middle">
-                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                          </td>
-                        ))}
-                      </motion.tr>
-                      
-                      <AnimatePresence initial={false}>
-                        {isExpanded && renderSubComponent && (
-                          <motion.tr
-                            key={`${row.id}-expanded`}
-                            initial={{ height: 0, opacity: 0 }}
-                            animate={{ 
-                              height: "auto", 
-                              opacity: 1,
-                              transition: {
-                                height: {
-                                  duration: 0.3,
-                                  ease: "easeOut"
-                                },
-                                opacity: {
-                                  duration: 0.2,
-                                  delay: 0.1
-                                }
-                              }
-                            }}
-                            exit={{ 
-                              height: 0, 
-                              opacity: 0,
-                              transition: {
-                                height: {
-                                  duration: 0.3,
-                                  ease: "easeIn"
-                                },
-                                opacity: {
-                                  duration: 0.2
-                                }
-                              }
-                            }}
-                            style={{ overflow: "hidden" }}
-                            className="border-b"
-                          >
-                            <td colSpan={columns.length} className="p-0">
-                              <motion.div 
-                                initial={{ y: -10 }}
-                                animate={{ y: 0 }}
-                                exit={{ y: -10 }}
-                                transition={{ duration: 0.2 }}
-                                className="border-t border-border/50"
-                              >
-                                {renderSubComponent({ row: { original: row.original, id: rowId } })}
-                              </motion.div>
-                            </td>
-                          </motion.tr>
-                        )}
-                      </AnimatePresence>
-                    </React.Fragment>
+                    <TableRow
+                      key={rowId}
+                      row={row}
+                      columns={columns}
+                      isExpanded={isExpanded}
+                      enableExpandable={enableExpandable}
+                      renderSubComponent={renderSubComponent}
+                    />
                   );
                 })}
               </>
@@ -614,5 +667,72 @@ export function useExpandableRows(initialExpanded: Set<string> = new Set()) {
   };
 }
 
+// Memoized table row component
+interface TableRowProps {
+  row: Row<any>
+  columns: ColumnDef<any, any>[]
+  isExpanded: boolean
+  enableExpandable: boolean
+  renderSubComponent?: (props: { row: { original: any; id: string } }) => React.ReactNode
+}
+
+const TableRow = React.memo(({ 
+  row, 
+  columns, 
+  isExpanded, 
+  enableExpandable,
+  renderSubComponent 
+}: TableRowProps) => {
+  const rowId = (row.original as any).id || row.id
+  
+  return (
+    <>
+      <tr
+        className={cn(
+          "border-b transition-colors hover:bg-muted/50",
+          row.getIsSelected() && "bg-muted",
+          isExpanded && "border-b-0"
+        )}
+      >
+        {row.getVisibleCells().map((cell) => (
+          <td key={cell.id} className="moonui-data-table-td p-4 align-middle">
+            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+          </td>
+        ))}
+      </tr>
+      
+      {isExpanded && renderSubComponent && (
+        <tr className="border-b">
+          <td colSpan={columns.length} className="p-0 overflow-hidden">
+            <div 
+              className="transition-all duration-300 ease-out"
+              style={{
+                maxHeight: isExpanded ? '1000px' : '0',
+                opacity: isExpanded ? 1 : 0,
+              }}
+            >
+              <div className="border-t border-border/50">
+                {renderSubComponent({ row: { original: row.original, id: rowId } })}
+              </div>
+            </div>
+          </td>
+        </tr>
+      )}
+    </>
+  )
+}, (prevProps, nextProps) => {
+  // Custom comparison - only re-render if row data or expanded state changed
+  const prevRowId = (prevProps.row.original as any).id || prevProps.row.id
+  const nextRowId = (nextProps.row.original as any).id || nextProps.row.id
+  
+  return prevRowId === nextRowId && 
+         prevProps.isExpanded === nextProps.isExpanded &&
+         prevProps.row.getIsSelected() === nextProps.row.getIsSelected()
+})
+
+TableRow.displayName = 'TableRow'
+
 // Re-export types for convenience
 export { type ColumnDef } from "@tanstack/react-table";
+export type { BulkAction } from './data-table-bulk-actions';
+export type { ExportFormat } from './data-table-export';

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,141 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "../../lib/utils"
+import { buttonVariants } from "./button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}