@moontra/moonui-pro 2.3.5 → 2.3.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.mjs +67 -38
  2. package/package.json +2 -2
  3. package/src/components/data-table/index.tsx +102 -76
  4. package/src/styles/design-system.css +303 -306
  5. package/src/styles/tailwind.css +6 -5
package/src/components/data-table/index.tsx CHANGED
@@ -321,85 +321,111 @@ export function DataTable<TData, TValue>({
321
321
  ))}
322
322
  </thead>
323
323
  <tbody className="moonui-data-table-body">
324
- <AnimatePresence mode="wait">
325
- {isPaginationLoading ? (
326
- <motion.tr
327
- key="loading"
328
- initial={{ opacity: 0 }}
329
- animate={{ opacity: 1 }}
330
- exit={{ opacity: 0 }}
331
- transition={{ duration: 0.2 }}
332
- >
333
- <td colSpan={columns.length} className="h-24 text-center">
334
- <div className="flex items-center justify-center space-x-2">
335
- <span suppressHydrationWarning><Loader2 className="h-4 w-4 animate-spin" /></span>
336
- <span className="text-sm text-muted-foreground">Loading...</span>
337
- </div>
338
- </td>
339
- </motion.tr>
340
- ) : table.getRowModel().rows?.length ? (
341
- table.getRowModel().rows.flatMap((row, index) => {
324
+ {isPaginationLoading ? (
325
+ <motion.tr
326
+ key="loading"
327
+ initial={{ opacity: 0 }}
328
+ animate={{ opacity: 1 }}
329
+ exit={{ opacity: 0 }}
330
+ transition={{ duration: 0.2 }}
331
+ >
332
+ <td colSpan={columns.length} className="h-24 text-center">
333
+ <div className="flex items-center justify-center space-x-2">
334
+ <span suppressHydrationWarning><Loader2 className="h-4 w-4 animate-spin" /></span>
335
+ <span className="text-sm text-muted-foreground">Loading...</span>
336
+ </div>
337
+ </td>
338
+ </motion.tr>
339
+ ) : table.getRowModel().rows?.length ? (
340
+ <>
341
+ {table.getRowModel().rows.map((row, index) => {
342
342
  const rowId = (row.original as any).id || row.id
343
343
  const isExpanded = enableExpandable && expandedRows.has(rowId)
344
344
 
345
- const mainRow = (
346
- <motion.tr
347
- key={row.id}
348
- initial={{ opacity: 0, y: 20 }}
349
- animate={{ opacity: 1, y: 0 }}
350
- exit={{ opacity: 0, y: -20 }}
351
- transition={{
352
- duration: 0.3,
353
- delay: index * 0.05,
354
- ease: "easeOut"
355
- }}
356
- className={cn(
357
- "border-b transition-colors hover:bg-muted/50",
358
- row.getIsSelected() && "bg-muted",
359
- isExpanded && "border-b-0"
360
- )}
361
- >
362
- {row.getVisibleCells().map((cell) => (
363
- <td key={cell.id} className="moonui-data-table-td p-4 align-middle">
364
- {flexRender(cell.column.columnDef.cell, cell.getContext())}
365
- </td>
366
- ))}
367
- </motion.tr>
368
- )
369
-
370
- const expandedRow = isExpanded && renderSubComponent ? (
371
- <motion.tr
372
- key={`${row.id}-expanded`}
373
- initial={{ opacity: 0, height: 0 }}
374
- animate={{ opacity: 1, height: "auto" }}
375
- exit={{ opacity: 0, height: 0 }}
376
- transition={{ duration: 0.3, ease: "easeOut" }}
377
- className="border-b"
378
- >
379
- <td colSpan={columns.length} className="p-0">
380
- <div className="border-t border-border/50">
381
- {renderSubComponent({ row: { original: row.original, id: rowId } })}
382
- </div>
383
- </td>
384
- </motion.tr>
385
- ) : null;
386
-
387
- return expandedRow ? [mainRow, expandedRow] : [mainRow];
388
- })
389
- ) : (
390
- <motion.tr
391
- key="no-results"
392
- initial={{ opacity: 0 }}
393
- animate={{ opacity: 1 }}
394
- exit={{ opacity: 0 }}
395
- transition={{ duration: 0.2 }}
396
- >
397
- <td colSpan={columns.length} className="h-24 text-center">
398
- No results found.
399
- </td>
400
- </motion.tr>
401
- )}
402
- </AnimatePresence>
345
+ return (
346
+ <React.Fragment key={row.id}>
347
+ <motion.tr
348
+ initial={false}
349
+ animate={{ opacity: 1 }}
350
+ className={cn(
351
+ "border-b transition-colors hover:bg-muted/50",
352
+ row.getIsSelected() && "bg-muted",
353
+ isExpanded && "border-b-0"
354
+ )}
355
+ >
356
+ {row.getVisibleCells().map((cell) => (
357
+ <td key={cell.id} className="moonui-data-table-td p-4 align-middle">
358
+ {flexRender(cell.column.columnDef.cell, cell.getContext())}
359
+ </td>
360
+ ))}
361
+ </motion.tr>
362
+
363
+ <AnimatePresence initial={false}>
364
+ {isExpanded && renderSubComponent && (
365
+ <motion.tr
366
+ key={`${row.id}-expanded`}
367
+ initial={{ height: 0, opacity: 0 }}
368
+ animate={{
369
+ height: "auto",
370
+ opacity: 1,
371
+ transition: {
372
+ height: {
373
+ duration: 0.3,
374
+ ease: "easeOut"
375
+ },
376
+ opacity: {
377
+ duration: 0.2,
378
+ delay: 0.1
379
+ }
380
+ }
381
+ }}
382
+ exit={{
383
+ height: 0,
384
+ opacity: 0,
385
+ transition: {
386
+ height: {
387
+ duration: 0.3,
388
+ ease: "easeIn"
389
+ },
390
+ opacity: {
391
+ duration: 0.2
392
+ }
393
+ }
394
+ }}
395
+ style={{ overflow: "hidden" }}
396
+ className="border-b"
397
+ >
398
+ <td colSpan={columns.length} className="p-0">
399
+ <motion.div
400
+ initial={{ y: -10 }}
401
+ animate={{ y: 0 }}
402
+ exit={{ y: -10 }}
403
+ transition={{ duration: 0.2 }}
404
+ className="border-t border-border/50"
405
+ >
406
+ {renderSubComponent({ row: { original: row.original, id: rowId } })}
407
+ </motion.div>
408
+ </td>
409
+ </motion.tr>
410
+ )}
411
+ </AnimatePresence>
412
+ </React.Fragment>
413
+ );
414
+ })}
415
+ </>
416
+ ) : (
417
+ <motion.tr
418
+ key="no-results"
419
+ initial={{ opacity: 0 }}
420
+ animate={{ opacity: 1 }}
421
+ exit={{ opacity: 0 }}
422
+ transition={{ duration: 0.2 }}
423
+ >
424
+ <td colSpan={columns.length} className="h-24 text-center">
425
+ No results found.
426
+ </td>
427
+ </motion.tr>
428
+ )}
403
429
  </tbody>
404
430
  </table>
405
431
  </div>