@moontra/moonui-pro 2.3.2 → 2.3.4

package/dist/index.d.ts

@@ -21,7 +21,7 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as ToastPrimitives from '@radix-ui/react-toast';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { ColumnDef } from '@tanstack/react-table';
+import { ColumnDef, OnChangeFn, SortingState, ColumnFiltersState } from '@tanstack/react-table';
 export { ColumnDef } from '@tanstack/react-table';
 
 declare function cn(...inputs: ClassValue[]): string;
@@ -309,7 +309,7 @@ interface MoonUIDialogContentProProps extends Omit<React$1.ComponentPropsWithout
     /** Özel onClose handler */
     onClose?: () => void;
 }
-declare const MoonUIDialogContentPro: React$1.ForwardRefExoticComponent<MoonUIDialogContentProProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const MoonUIDialogContentPro: React$1.ForwardRefExoticComponent<MoonUIDialogContentProProps & React$1.RefAttributes<never>>;
 declare const MoonUIDialogHeaderPro: {
     ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
     displayName: string;
@@ -318,8 +318,8 @@ declare const MoonUIDialogFooterPro: {
     ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
-declare const MoonUIDialogTitlePro: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
-declare const MoonUIDialogDescriptionPro: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
+declare const MoonUIDialogTitlePro: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<never>>;
+declare const MoonUIDialogDescriptionPro: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<never>>;
 
 /**
  * Command (Komut Paleti) Bileşeni
@@ -1547,6 +1547,19 @@ interface DataTableProps<TData, TValue> {
     }) => React__default.ReactNode;
     expandedRows?: Set<string>;
     onRowExpandChange?: (expandedRows: Set<string>) => void;
+    enableSorting?: boolean;
+    enableFiltering?: boolean;
+    enablePagination?: boolean;
+    enableColumnVisibility?: boolean;
+    enableRowSelection?: boolean;
+    filterPlaceholder?: string;
+    defaultPageSize?: number;
+    manualPagination?: boolean;
+    pageCount?: number;
+    onPaginationChange?: (updater: any) => void;
+    onSortingChange?: OnChangeFn<SortingState>;
+    onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>;
+    state?: any;
     features?: {
         sorting?: boolean;
         filtering?: boolean;
@@ -1577,7 +1590,7 @@ interface DataTableProps<TData, TValue> {
         filterButton?: string;
     };
 }
-declare function DataTable<TData, TValue>({ columns, data, searchable, filterable, exportable, selectable, pagination, pageSize, className, onRowSelect, onExport, enableExpandable, renderSubComponent, expandedRows: controlledExpandedRows, onRowExpandChange, features, theme, texts, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+declare function DataTable<TData, TValue>({ columns, data, searchable, filterable, exportable, selectable, pagination, pageSize, className, onRowSelect, onExport, enableExpandable, renderSubComponent, expandedRows: controlledExpandedRows, onRowExpandChange, features, theme, texts, enableSorting, enableFiltering, enablePagination, enableColumnVisibility, enableRowSelection, filterPlaceholder, defaultPageSize, manualPagination, pageCount, onPaginationChange, onSortingChange, onColumnFiltersChange, state: externalState, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
 /**
  * Helper function to create an expandable column
  * @param expandedRows - Set of expanded row IDs
@@ -1644,7 +1657,7 @@ interface DialogProContentProps extends React$1.ComponentPropsWithoutRef<typeof
     overlay?: boolean;
     overlayProps?: DialogProOverlayProps;
 }
-declare const DialogProContent: React$1.ForwardRefExoticComponent<DialogProContentProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogProContent: React$1.ForwardRefExoticComponent<DialogProContentProps & React$1.RefAttributes<never>>;
 declare const DialogProHeader: {
     ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
     displayName: string;
@@ -1653,8 +1666,8 @@ declare const DialogProFooter: {
     ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
-declare const DialogProTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
-declare const DialogProDescription: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
+declare const DialogProTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<never>>;
+declare const DialogProDescription: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<never>>;
 
 declare const badgeVariants: (props?: ({
     variant?: "default" | "success" | "warning" | "outline" | "secondary" | "destructive" | "pro" | null | undefined;

package/dist/index.mjs

@@ -52171,7 +52171,21 @@ function DataTable({
   onRowExpandChange,
   features = {},
   theme = {},
-  texts = {}
+  texts = {},
+  // Additional props
+  enableSorting = true,
+  enableFiltering = true,
+  enablePagination = true,
+  enableColumnVisibility = true,
+  enableRowSelection,
+  filterPlaceholder = "Search all columns...",
+  defaultPageSize,
+  manualPagination = false,
+  pageCount,
+  onPaginationChange,
+  onSortingChange,
+  onColumnFiltersChange,
+  state: externalState
 }) {
   const { hasProAccess, isLoading } = useSubscription();
   if (!isLoading && !hasProAccess) {
@@ -52195,11 +52209,12 @@ function DataTable({
   const [isPaginationLoading, setIsPaginationLoading] = t__default.useState(false);
   const [internalExpandedRows, setInternalExpandedRows] = t__default.useState(/* @__PURE__ */ new Set());
   const expandedRows = controlledExpandedRows || internalExpandedRows;
+  const actualPageSize = defaultPageSize || pageSize;
   const table = useReactTable({
     data,
     columns,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
+    onSortingChange: onSortingChange !== void 0 ? onSortingChange : setSorting,
+    onColumnFiltersChange: onColumnFiltersChange !== void 0 ? onColumnFiltersChange : setColumnFilters,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     getSortedRowModel: getSortedRowModel(),
@@ -52208,7 +52223,9 @@ function DataTable({
     onRowSelectionChange: setRowSelection,
     onGlobalFilterChange: setGlobalFilter,
     globalFilterFn: "includesString",
-    state: {
+    manualPagination,
+    pageCount,
+    state: externalState || {
       sorting,
       columnFilters,
       columnVisibility,
@@ -52217,7 +52234,7 @@ function DataTable({
     },
     initialState: {
       pagination: {
-        pageSize
+        pageSize: actualPageSize
       }
     }
   });
@@ -52243,15 +52260,15 @@ function DataTable({
       onExport(dataToExport);
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("moonui-pro-datatable-container", className), style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
-    /* @__PURE__ */ jsxs("div", { className: "moonui-pro-datatable-toolbar", style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("moonui-pro-datatable-container flex flex-col gap-4", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "moonui-pro-datatable-toolbar flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
         searchable && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
           /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
           /* @__PURE__ */ jsx(
             MoonUIInputPro,
             {
-              placeholder: "Search all columns...",
+              placeholder: filterPlaceholder,
               value: globalFilter,
               onChange: (e) => setGlobalFilter(e.target.value),
               className: "pl-8 w-64"
@@ -52274,7 +52291,7 @@ function DataTable({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "moonui-pro-datatable-wrapper rounded-md border overflow-hidden", children: /* @__PURE__ */ jsxs("table", { className: "moonui-pro-datatable", style: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx("div", { className: "moonui-pro-datatable-wrapper rounded-md border overflow-hidden", style: { contain: "layout style" }, children: /* @__PURE__ */ jsx("div", { style: { overflowX: "auto" }, children: /* @__PURE__ */ jsxs("table", { className: "moonui-pro-datatable", style: { width: "100%", tableLayout: "auto" }, children: [
       /* @__PURE__ */ jsx("thead", { className: "moonui-data-table-header", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { className: "moonui-data-table-row border-b", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
         "th",
         {
@@ -52356,7 +52373,7 @@ function DataTable({
         },
         "no-results"
       ) }) })
-    ] }) }),
+    ] }) }) }),
     pagination && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2", children: [
       /* @__PURE__ */ jsx("div", { className: "flex-1 text-sm text-muted-foreground", children: selectable && table.getFilteredSelectedRowModel().rows.length > 0 && /* @__PURE__ */ jsxs("span", { children: [
         table.getFilteredSelectedRowModel().rows.length,
@@ -52398,10 +52415,14 @@ function DataTable({
               variant: "outline",
               className: "hidden h-8 w-8 p-0 lg:flex",
               onClick: async () => {
-                setIsPaginationLoading(true);
-                await new Promise((resolve) => setTimeout(resolve, 300));
-                table.setPageIndex(0);
-                setIsPaginationLoading(false);
+                if (onPaginationChange) {
+                  onPaginationChange({ pageIndex: 0, pageSize: table.getState().pagination.pageSize });
+                } else {
+                  setIsPaginationLoading(true);
+                  await new Promise((resolve) => setTimeout(resolve, 300));
+                  table.setPageIndex(0);
+                  setIsPaginationLoading(false);
+                }
               },
               disabled: !table.getCanPreviousPage() || isPaginationLoading,
               children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" })
@@ -52413,10 +52434,15 @@ function DataTable({
               variant: "outline",
               className: "h-8 w-8 p-0",
               onClick: async () => {
-                setIsPaginationLoading(true);
-                await new Promise((resolve) => setTimeout(resolve, 300));
-                table.previousPage();
-                setIsPaginationLoading(false);
+                if (onPaginationChange) {
+                  const currentIndex = table.getState().pagination.pageIndex;
+                  onPaginationChange({ pageIndex: currentIndex - 1, pageSize: table.getState().pagination.pageSize });
+                } else {
+                  setIsPaginationLoading(true);
+                  await new Promise((resolve) => setTimeout(resolve, 300));
+                  table.previousPage();
+                  setIsPaginationLoading(false);
+                }
               },
               disabled: !table.getCanPreviousPage() || isPaginationLoading,
               children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.3.2",
+  "version": "2.3.4",
   "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
   "type": "module",
   "main": "dist/index.mjs",
@@ -75,6 +75,7 @@
     "react-dom": ">=18.0.0 || ^19.0.0"
   },
   "dependencies": {
+    "@moontra/moonui-pro": "^2.3.3",
     "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.3.2",
@@ -94,7 +95,7 @@
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
     "framer-motion": "^11.11.17",
-    "lucide-react": "^0.263.1",
+    "lucide-react": "^0.525.0",
     "react-dropzone": "^14.3.5",
     "react-hook-form": "^7.53.2",
     "react-intersection-observer": "^9.13.1",

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

@@ -12,6 +12,7 @@ import {
   SortingState,
   ColumnFiltersState,
   VisibilityState,
+  OnChangeFn,
 } from '@tanstack/react-table'
 import { Button } from '../ui/button'
 import { Input } from '../ui/input'
@@ -53,6 +54,20 @@ interface DataTableProps<TData, TValue> {
   renderSubComponent?: (props: { row: { original: TData; id: string } }) => React.ReactNode
   expandedRows?: Set<string>
   onRowExpandChange?: (expandedRows: Set<string>) => void
+  // Additional props for compatibility
+  enableSorting?: boolean
+  enableFiltering?: boolean
+  enablePagination?: boolean
+  enableColumnVisibility?: boolean
+  enableRowSelection?: boolean
+  filterPlaceholder?: string
+  defaultPageSize?: number
+  manualPagination?: boolean
+  pageCount?: number
+  onPaginationChange?: (updater: any) => void
+  onSortingChange?: OnChangeFn<SortingState>
+  onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>
+  state?: any
   features?: {
     sorting?: boolean
     filtering?: boolean
@@ -103,6 +118,20 @@ export function DataTable<TData, TValue>({
   features = {},
   theme = {},
   texts = {},
+  // Additional props
+  enableSorting = true,
+  enableFiltering = true,
+  enablePagination = true,
+  enableColumnVisibility = true,
+  enableRowSelection,
+  filterPlaceholder = "Search all columns...",
+  defaultPageSize,
+  manualPagination = false,
+  pageCount,
+  onPaginationChange,
+  onSortingChange,
+  onColumnFiltersChange,
+  state: externalState,
 }: DataTableProps<TData, TValue>) {
   // Check if we're in docs mode or have pro access
   const { hasProAccess, isLoading } = useSubscription()
@@ -151,11 +180,13 @@ export function DataTable<TData, TValue>({
     (newExpanded: Set<string>) => onRowExpandChange(newExpanded) :
     setInternalExpandedRows
 
+  const actualPageSize = defaultPageSize || pageSize
+  
   const table = useReactTable({
     data,
     columns,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
+    onSortingChange: onSortingChange !== undefined ? onSortingChange : setSorting,
+    onColumnFiltersChange: onColumnFiltersChange !== undefined ? onColumnFiltersChange : setColumnFilters,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     getSortedRowModel: getSortedRowModel(),
@@ -164,7 +195,9 @@ export function DataTable<TData, TValue>({
     onRowSelectionChange: setRowSelection,
     onGlobalFilterChange: setGlobalFilter,
     globalFilterFn: 'includesString',
-    state: {
+    manualPagination,
+    pageCount,
+    state: externalState || {
       sorting,
       columnFilters,
       columnVisibility,
@@ -173,7 +206,7 @@ export function DataTable<TData, TValue>({
     },
     initialState: {
       pagination: {
-        pageSize,
+        pageSize: actualPageSize,
       },
     },
   })
@@ -207,15 +240,15 @@ export function DataTable<TData, TValue>({
   }
 
   return (
-    <div className={cn("moonui-pro-datatable-container", className)} style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+    <div className={cn("moonui-pro-datatable-container flex flex-col gap-4", className)}>
       {/* Toolbar */}
-      <div className="moonui-pro-datatable-toolbar" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+      <div className="moonui-pro-datatable-toolbar flex items-center justify-between">
         <div className="flex items-center space-x-2">
           {searchable && (
             <div className="relative">
               <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
               <Input
-                placeholder="Search all columns..."
+                placeholder={filterPlaceholder}
                 value={globalFilter}
                 onChange={(e) => setGlobalFilter(e.target.value)}
                 className="pl-8 w-64"
@@ -247,8 +280,9 @@ export function DataTable<TData, TValue>({
       </div>
 
       {/* Table */}
-      <div className="moonui-pro-datatable-wrapper rounded-md border overflow-hidden">
-        <table className="moonui-pro-datatable" style={{ width: '100%' }}>
+      <div className="moonui-pro-datatable-wrapper rounded-md border overflow-hidden" style={{ contain: 'layout style' }}>
+        <div style={{ overflowX: 'auto' }}>
+          <table className="moonui-pro-datatable" style={{ width: '100%', tableLayout: 'auto' }}>
           <thead className="moonui-data-table-header">
             {table.getHeaderGroups().map((headerGroup) => (
               <tr key={headerGroup.id} className="moonui-data-table-row border-b">
@@ -366,6 +400,7 @@ export function DataTable<TData, TValue>({
             </AnimatePresence>
           </tbody>
         </table>
+        </div>
       </div>
 
       {/* Pagination */}
@@ -409,10 +444,14 @@ export function DataTable<TData, TValue>({
                 variant="outline"
                 className="hidden h-8 w-8 p-0 lg:flex"
                 onClick={async () => {
-                  setIsPaginationLoading(true)
-                  await new Promise(resolve => setTimeout(resolve, 300))
-                  table.setPageIndex(0)
-                  setIsPaginationLoading(false)
+                  if (onPaginationChange) {
+                    onPaginationChange({ pageIndex: 0, pageSize: table.getState().pagination.pageSize })
+                  } else {
+                    setIsPaginationLoading(true)
+                    await new Promise(resolve => setTimeout(resolve, 300))
+                    table.setPageIndex(0)
+                    setIsPaginationLoading(false)
+                  }
                 }}
                 disabled={!table.getCanPreviousPage() || isPaginationLoading}
               >
@@ -422,10 +461,15 @@ export function DataTable<TData, TValue>({
                 variant="outline"
                 className="h-8 w-8 p-0"
                 onClick={async () => {
-                  setIsPaginationLoading(true)
-                  await new Promise(resolve => setTimeout(resolve, 300))
-                  table.previousPage()
-                  setIsPaginationLoading(false)
+                  if (onPaginationChange) {
+                    const currentIndex = table.getState().pagination.pageIndex
+                    onPaginationChange({ pageIndex: currentIndex - 1, pageSize: table.getState().pagination.pageSize })
+                  } else {
+                    setIsPaginationLoading(true)
+                    await new Promise(resolve => setTimeout(resolve, 300))
+                    table.previousPage()
+                    setIsPaginationLoading(false)
+                  }
                 }}
                 disabled={!table.getCanPreviousPage() || isPaginationLoading}
               >