@moontra/moonui-pro 2.3.6 → 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 (3) hide show
  1. package/dist/index.mjs +65 -36
  2. package/package.json +1 -1
  3. package/src/components/data-table/index.tsx +102 -76
package/dist/index.mjs CHANGED
@@ -52313,7 +52313,7 @@ function DataTable({
52313
52313
  },
52314
52314
  header.id
52315
52315
  )) }, headerGroup.id)) }),
52316
- /* @__PURE__ */ jsx("tbody", { className: "moonui-data-table-body", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isPaginationLoading ? /* @__PURE__ */ jsx(
52316
+ /* @__PURE__ */ jsx("tbody", { className: "moonui-data-table-body", children: isPaginationLoading ? /* @__PURE__ */ jsx(
52317
52317
  motion.tr,
52318
52318
  {
52319
52319
  initial: { opacity: 0 },
@@ -52326,43 +52326,72 @@ function DataTable({
52326
52326
  ] }) })
52327
52327
  },
52328
52328
  "loading"
52329
- ) : table.getRowModel().rows?.length ? table.getRowModel().rows.flatMap((row, index) => {
52329
+ ) : table.getRowModel().rows?.length ? /* @__PURE__ */ jsx(Fragment, { children: table.getRowModel().rows.map((row, index) => {
52330
52330
  const rowId = row.original.id || row.id;
52331
52331
  const isExpanded = enableExpandable && expandedRows.has(rowId);
52332
- const mainRow = /* @__PURE__ */ jsx(
52333
- motion.tr,
52334
- {
52335
- initial: { opacity: 0, y: 20 },
52336
- animate: { opacity: 1, y: 0 },
52337
- exit: { opacity: 0, y: -20 },
52338
- transition: {
52339
- duration: 0.3,
52340
- delay: index * 0.05,
52341
- ease: "easeOut"
52332
+ return /* @__PURE__ */ jsxs(t__default.Fragment, { children: [
52333
+ /* @__PURE__ */ jsx(
52334
+ motion.tr,
52335
+ {
52336
+ initial: false,
52337
+ animate: { opacity: 1 },
52338
+ className: cn(
52339
+ "border-b transition-colors hover:bg-muted/50",
52340
+ row.getIsSelected() && "bg-muted",
52341
+ isExpanded && "border-b-0"
52342
+ ),
52343
+ children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx("td", { className: "moonui-data-table-td p-4 align-middle", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
52344
+ }
52345
+ ),
52346
+ /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: isExpanded && renderSubComponent && /* @__PURE__ */ jsx(
52347
+ motion.tr,
52348
+ {
52349
+ initial: { height: 0, opacity: 0 },
52350
+ animate: {
52351
+ height: "auto",
52352
+ opacity: 1,
52353
+ transition: {
52354
+ height: {
52355
+ duration: 0.3,
52356
+ ease: "easeOut"
52357
+ },
52358
+ opacity: {
52359
+ duration: 0.2,
52360
+ delay: 0.1
52361
+ }
52362
+ }
52363
+ },
52364
+ exit: {
52365
+ height: 0,
52366
+ opacity: 0,
52367
+ transition: {
52368
+ height: {
52369
+ duration: 0.3,
52370
+ ease: "easeIn"
52371
+ },
52372
+ opacity: {
52373
+ duration: 0.2
52374
+ }
52375
+ }
52376
+ },
52377
+ style: { overflow: "hidden" },
52378
+ className: "border-b",
52379
+ children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, className: "p-0", children: /* @__PURE__ */ jsx(
52380
+ motion.div,
52381
+ {
52382
+ initial: { y: -10 },
52383
+ animate: { y: 0 },
52384
+ exit: { y: -10 },
52385
+ transition: { duration: 0.2 },
52386
+ className: "border-t border-border/50",
52387
+ children: renderSubComponent({ row: { original: row.original, id: rowId } })
52388
+ }
52389
+ ) })
52342
52390
  },
52343
- className: cn(
52344
- "border-b transition-colors hover:bg-muted/50",
52345
- row.getIsSelected() && "bg-muted",
52346
- isExpanded && "border-b-0"
52347
- ),
52348
- children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx("td", { className: "moonui-data-table-td p-4 align-middle", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
52349
- },
52350
- row.id
52351
- );
52352
- const expandedRow = isExpanded && renderSubComponent ? /* @__PURE__ */ jsx(
52353
- motion.tr,
52354
- {
52355
- initial: { opacity: 0, height: 0 },
52356
- animate: { opacity: 1, height: "auto" },
52357
- exit: { opacity: 0, height: 0 },
52358
- transition: { duration: 0.3, ease: "easeOut" },
52359
- className: "border-b",
52360
- children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, className: "p-0", children: /* @__PURE__ */ jsx("div", { className: "border-t border-border/50", children: renderSubComponent({ row: { original: row.original, id: rowId } }) }) })
52361
- },
52362
- `${row.id}-expanded`
52363
- ) : null;
52364
- return expandedRow ? [mainRow, expandedRow] : [mainRow];
52365
- }) : /* @__PURE__ */ jsx(
52391
+ `${row.id}-expanded`
52392
+ ) })
52393
+ ] }, row.id);
52394
+ }) }) : /* @__PURE__ */ jsx(
52366
52395
  motion.tr,
52367
52396
  {
52368
52397
  initial: { opacity: 0 },
@@ -52372,7 +52401,7 @@ function DataTable({
52372
52401
  children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, className: "h-24 text-center", children: "No results found." })
52373
52402
  },
52374
52403
  "no-results"
52375
- ) }) })
52404
+ ) })
52376
52405
  ] }) }) }),
52377
52406
  pagination && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2", children: [
52378
52407
  /* @__PURE__ */ jsx("div", { className: "flex-1 text-sm text-muted-foreground", children: selectable && table.getFilteredSelectedRowModel().rows.length > 0 && /* @__PURE__ */ jsxs("span", { children: [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@moontra/moonui-pro",
3
- "version": "2.3.6",
3
+ "version": "2.3.7",
4
4
  "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
5
5
  "type": "module",
6
6
  "main": "dist/index.mjs",
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>