@vritti/quantum-ui 0.3.11 → 0.3.13

package/dist/useDataTable.js

@@ -6,11 +6,12 @@ import { a as useDialog, u as useConfirm } from './useConfirm.js';
 import { B as Button } from './Button.js';
 import { D as Dialog, a as DialogActions } from './Dialog.js';
 import { D as DropdownMenu } from './DropdownMenu.js';
-import { b as usePermissionGate, l as lockedTip } from './PermissionGate.js';
+import { c as usePermissionGate, l as lockedTip, u as usePermission, b as PermissionLockIcon } from './PermissionGate.js';
 import { A as ArrowDown, a as ArrowUp, I as Inbox, S as Settings, C as ChevronsLeft, b as ChevronsRight, c as Columns2, P as Pin, E as EllipsisVertical, F as FileUp, d as FilePlusCorner, R as RefreshCw, e as Equal, f as ArrowLeft, B as BookmarkPlus, L as LayoutList, g as Settings2, h as Funnel, i as ArrowUpFromLine, j as ArrowDownToLine, T as TableProperties } from './table-properties.js';
 import { useMutation, useQueryClient, useQuery } from '@tanstack/react-query';
 import * as React from 'react';
 import React__default, { useRef, Children, isValidElement, cloneElement, useMemo, useState, useEffect, forwardRef, useCallback, useLayoutEffect } from 'react';
+import { EMPTY_TABLE_STATE } from './types/table-filter.js';
 import { axios } from './utils/axios.js';
 import { E as Empty } from './Empty.js';
 import { b as SortableList, a as SortableItem } from './Sortable.js';
@@ -43,7 +44,7 @@ import { P as Pencil, a as Plus, T as Trash2 } from './trash-2.js';
 import { T as TriangleAlert } from './triangle-alert.js';
 import { pluralize } from './utils/pluralize.js';
 import { C as Checkbox } from './Checkbox.js';
-import { g as getConfig } from './index7.js';
+import { g as getConfig } from './index8.js';
 
 const DEFAULT_COLUMNS = [
   { headerWidth: "w-20", cellWidth: "w-28" },
@@ -814,21 +815,6 @@ const createImpl = (createState) => {
 };
 const create = ((createState) => createState ? createImpl(createState) : createImpl);
 
-const EMPTY_TABLE_STATE = {
-  filters: [],
-  sort: [],
-  columnVisibility: {},
-  columnOrder: [],
-  columnSizing: {},
-  columnPinning: { left: [], right: [] },
-  lockedColumnSizing: false,
-  density: "normal",
-  filterOrder: [],
-  filterVisibility: {},
-  search: null,
-  pagination: { limit: 20, offset: 0 }
-};
-
 const MAX_TABLES = 20;
 function viewStatesEqual(a, b) {
   return deepEqual(a, b);
@@ -863,9 +849,7 @@ const useDataTableStore = create((set, get) => ({
       return { tables };
     });
   },
-  // Sets activeState, activeViewId, and activeViewState.
-  // Merges with EMPTY_TABLE_STATE so old server payloads missing new fields still work.
-  // skipUpsert defaults to true (page-load); pass false for user-driven tab activation.
+  // Sets activeState/viewId/viewState, merging with EMPTY_TABLE_STATE; skipUpsert defaults true (page-load)
   loadViewState: (slug, state, viewId, skipUpsert = true) => {
     set((prev) => {
       const currentTable = prev.tables[slug];
@@ -878,8 +862,7 @@ const useDataTableStore = create((set, get) => ({
             ...currentTable,
             activeState: mergedState,
             activeViewId: viewId,
-            // On page-load (skipUpsert=true), activeViewState is set later via setActiveViewState
-            // once the views list loads. On user tab activation, set it immediately.
+            // On page-load, activeViewState is set later via setActiveViewState; on user tab activation, set it immediately
             activeViewState: !skipUpsert && viewId !== null ? mergedState : null,
             _skipUpsert: skipUpsert,
             lastAccessed: Date.now()
@@ -17500,7 +17483,9 @@ function DataTableSelectionBar({
   table,
   children,
   className,
-  importExport
+  importExport,
+  exportHidden,
+  exportLockTip
 }) {
   const meta = table.options.meta;
   const selectedRows = table.getFilteredSelectedRowModel().rows;
@@ -17519,7 +17504,18 @@ function DataTableSelectionBar({
       " selected"
     ] }),
     children,
-    /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-2", children: importExport ? /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-2", children: exportHidden ? null : exportLockTip ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        className: "h-8 text-sm",
+        disabled: true,
+        disabledTip: exportLockTip,
+        startAdornment: /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" }),
+        children: "Export"
+      }
+    ) : importExport ? /* @__PURE__ */ jsx(
       DropdownMenu,
       {
         trigger: { label: "Export", variant: "outline", icon: Download, className: "h-8 text-sm" },
@@ -21829,10 +21825,14 @@ function DataTable({
   importExport,
   mode = "page",
   onRowClick,
-  selectedRowId
+  selectedRowId,
+  permission
 }) {
   const [filtersOpen, setFiltersOpen] = useState(false);
   const importDialog = useDialog();
+  const tableGate = usePermission(permission);
+  const importGate = usePermission(importExport?.importPermission);
+  const exportGate = usePermission(importExport?.exportPermission);
   const meta = table.options.meta;
   const slug = meta?.slug;
   const appliedFilterCount = useDataTableStore((s) => slug ? s.tables[slug]?.activeState?.filters?.length ?? 0 : 0);
@@ -21841,7 +21841,9 @@ function DataTable({
   const density = meta?.density ?? "normal";
   const columnCount = table.getAllColumns().length;
   const visibilityEnabled = table.options.enableHiding !== false;
-  const showToolbar = searchConfig || visibilityEnabled || toolbarActions || filters || enableViews && slug || importExport;
+  const showImport = !!importExport && importGate.granted;
+  const showExport = !!importExport && exportGate.granted;
+  const showToolbar = searchConfig || visibilityEnabled || toolbarActions || filters || enableViews && slug || showImport || showExport;
   const search = meta?.search ?? null;
   const hasActiveView = !!activeViewId;
   const hasActiveFilters = hasActiveView ? !!meta?.isFiltersDirty : appliedFilterCount > 0;
@@ -21864,6 +21866,10 @@ function DataTable({
       downloadBlob(response.data, `${importExport.filename}.${format}`);
     }
   });
+  if (!tableGate.granted) {
+    return null;
+  }
+  const locked = tableGate.locked;
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
     showToolbar && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
       /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1", children: enableViews && slug && /* @__PURE__ */ jsx(DataTableViewTabs, { slug }) }),
@@ -21885,6 +21891,7 @@ function DataTable({
               size: "sm",
               className: cn("h-8 w-8 p-0", (filtersOpen || appliedFilterCount > 0) && "border border-transparent"),
               onClick: () => setFiltersOpen((v) => !v),
+              disabled: locked,
               "aria-label": "Toggle filters",
               children: /* @__PURE__ */ jsx(Funnel, { className: "h-4 w-4" })
             }
@@ -21894,63 +21901,68 @@ function DataTable({
         visibilityEnabled && /* @__PURE__ */ jsx(DataTableViewOptions, { table }),
         /* @__PURE__ */ jsx(DataTableRowDensity, { table }),
         enableViews && slug && /* @__PURE__ */ jsx(DataTableViewsMenu, { slug }),
-        importExport && /* @__PURE__ */ jsx(
+        (showImport || showExport) && /* @__PURE__ */ jsx(
           DropdownMenu,
           {
             trigger: {
               children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", className: "h-8 w-8 p-0", "aria-label": "Import / Export", children: /* @__PURE__ */ jsx(TableProperties, { className: "h-4 w-4" }) })
             },
             items: [
-              {
-                type: "item",
-                id: "import",
-                label: "Import",
-                icon: ArrowUpFromLine,
-                onClick: importDialog.open
-              },
-              {
-                type: "sub",
-                id: "export",
-                label: "Export All",
-                icon: ArrowDownToLine,
-                items: [
-                  {
-                    type: "item",
-                    id: "csv",
-                    label: "CSV (.csv)",
-                    disabled: exportMutation.isPending,
-                    onClick: () => exportMutation.mutate("csv")
-                  },
-                  {
-                    type: "item",
-                    id: "xlsx",
-                    label: "Excel (.xlsx)",
-                    disabled: exportMutation.isPending,
-                    onClick: () => exportMutation.mutate("xlsx")
-                  },
-                  {
-                    type: "item",
-                    id: "xls",
-                    label: "Excel 97-2004 (.xls)",
-                    disabled: exportMutation.isPending,
-                    onClick: () => exportMutation.mutate("xls")
-                  },
-                  {
-                    type: "item",
-                    id: "ods",
-                    label: "OpenDocument (.ods)",
-                    disabled: exportMutation.isPending,
-                    onClick: () => exportMutation.mutate("ods")
-                  },
-                  {
-                    type: "item",
-                    id: "tsv",
-                    label: "TSV (.tsv)",
-                    disabled: exportMutation.isPending,
-                    onClick: () => exportMutation.mutate("tsv")
-                  }
-                ]
-              }
+              ...showImport ? [
+                {
+                  type: "item",
+                  id: "import",
+                  label: "Import",
+                  icon: ArrowUpFromLine,
+                  disabled: importGate.locked,
+                  onClick: importDialog.open
+                }
+              ] : [],
+              ...showExport ? [
+                {
+                  type: "sub",
+                  id: "export",
+                  label: "Export All",
+                  icon: ArrowDownToLine,
+                  items: [
+                    {
+                      type: "item",
+                      id: "csv",
+                      label: "CSV (.csv)",
+                      disabled: exportMutation.isPending || exportGate.locked,
+                      onClick: () => exportMutation.mutate("csv")
+                    },
+                    {
+                      type: "item",
+                      id: "xlsx",
+                      label: "Excel (.xlsx)",
+                      disabled: exportMutation.isPending || exportGate.locked,
+                      onClick: () => exportMutation.mutate("xlsx")
+                    },
+                    {
+                      type: "item",
+                      id: "xls",
+                      label: "Excel 97-2004 (.xls)",
+                      disabled: exportMutation.isPending || exportGate.locked,
+                      onClick: () => exportMutation.mutate("xls")
+                    },
+                    {
+                      type: "item",
+                      id: "ods",
+                      label: "OpenDocument (.ods)",
+                      disabled: exportMutation.isPending || exportGate.locked,
+                      onClick: () => exportMutation.mutate("ods")
+                    },
+                    {
+                      type: "item",
+                      id: "tsv",
+                      label: "TSV (.tsv)",
+                      disabled: exportMutation.isPending || exportGate.locked,
+                      onClick: () => exportMutation.mutate("tsv")
+                    }
+                  ]
+                }
+              ] : []
             ]
           }
         ),
@@ -21966,7 +21978,16 @@ function DataTable({
           animate: { height: "auto", opacity: 1 },
           exit: { height: 0, opacity: 0 },
           transition: { duration: 0.3, ease: [0.4, 0, 0.2, 1] },
-          children: /* @__PURE__ */ jsx(DataTableSelectionBar, { table, importExport, children: selectActions?.(table.getFilteredSelectedRowModel().rows) })
+          children: /* @__PURE__ */ jsx(
+            DataTableSelectionBar,
+            {
+              table,
+              importExport,
+              exportHidden: !exportGate.granted,
+              exportLockTip: exportGate.locked ? lockedTip(exportGate) : void 0,
+              children: selectActions?.(table.getFilteredSelectedRowModel().rows)
+            }
+          )
         },
         "selection"
       ) : filters && filtersOpen ? /* @__PURE__ */ jsx(
@@ -22022,53 +22043,65 @@ function DataTable({
               header.id
             );
           }) }, headerGroup.id)) }),
-          (isLoading || table.getRowModel().rows.length > 0) && /* @__PURE__ */ jsx(TableBody, { children: isLoading ? Array.from(
+          !locked && (isLoading || table.getRowModel().rows.length > 0) && /* @__PURE__ */ jsx(TableBody, { children: isLoading ? Array.from(
             { length: table.getState().pagination?.pageSize ?? 20 },
             (_, i) => `skeleton-row-${i}`
-          ).map((rowKey) => /* @__PURE__ */ jsx(TableRow, { children: Array.from({ length: columnCount }, (_, i) => `${rowKey}-cell-${i}`).map((cellKey) => /* @__PURE__ */ jsx(TableCell, { className: densityClasses[density], children: /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-full" }) }, cellKey)) }, rowKey)) : table.getRowModel().rows.map((row) => {
+          ).map((rowKey) => /* @__PURE__ */ jsx(TableRow, { children: Array.from({ length: columnCount }, (_, i) => `${rowKey}-cell-${i}`).map((cellKey) => /* @__PURE__ */ jsx(TableCell, { className: densityClasses[density], children: /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-full" }) }, cellKey)) }, rowKey)) : table.getRowModel().rows.map((row, index) => {
             const externallySelected = selectedRowId != null && row.id === selectedRowId;
             const isSelected = row.getIsSelected() || externallySelected;
-            return /* @__PURE__ */ jsx(TableRow, { "data-state": isSelected ? "selected" : void 0, className: "group", children: row.getVisibleCells().map((cell) => {
-              const isActionsCell = cell.column.id === "actions";
-              return /* @__PURE__ */ jsxs(
-                TableCell,
-                {
-                  className: cn(
-                    densityClasses[density],
-                    isActionsCell ? "relative px-2 sticky right-0 z-10" : void 0,
-                    onRowClick && !isActionsCell ? "cursor-pointer" : void 0
-                  ),
-                  onClick: onRowClick && !isActionsCell ? () => onRowClick(row.original) : void 0,
-                  style: isActionsCell ? { width: "70px" } : {
-                    width: cell.column.getSize(),
-                    minWidth: cell.column.getSize(),
-                    maxWidth: cell.column.getSize()
-                  },
-                  children: [
-                    isActionsCell && /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        "aria-hidden": true,
-                        className: "pointer-events-none absolute inset-x-0 top-0 bottom-px bg-background/40 backdrop-blur-sm group-hover:bg-muted/30 group-data-[state=selected]:bg-muted/40"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: cn(
-                          isActionsCell ? "relative flex items-center justify-end" : "overflow-hidden text-center"
+            return /* @__PURE__ */ jsx(
+              TableRow,
+              {
+                "data-state": isSelected ? "selected" : void 0,
+                className: "group animate-in fade-in duration-300",
+                style: { animationDelay: `${Math.min(index, 12) * 25}ms`, animationFillMode: "both" },
+                children: row.getVisibleCells().map((cell) => {
+                  const isActionsCell = cell.column.id === "actions";
+                  return /* @__PURE__ */ jsxs(
+                    TableCell,
+                    {
+                      className: cn(
+                        densityClasses[density],
+                        isActionsCell ? "px-2 sticky right-0 z-10" : void 0,
+                        onRowClick && !isActionsCell ? "cursor-pointer" : void 0
+                      ),
+                      onClick: onRowClick && !isActionsCell ? () => onRowClick(row.original) : void 0,
+                      style: isActionsCell ? { width: "70px" } : {
+                        width: cell.column.getSize(),
+                        minWidth: cell.column.getSize(),
+                        maxWidth: cell.column.getSize()
+                      },
+                      children: [
+                        isActionsCell && /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            "aria-hidden": true,
+                            className: "pointer-events-none absolute inset-x-0 top-0 bottom-px bg-background/40 backdrop-blur-sm group-hover:bg-muted/30 group-data-[state=selected]:bg-muted/40"
+                          }
                         ),
-                        children: flexRender(cell.column.columnDef.cell, cell.getContext())
-                      }
-                    )
-                  ]
-                },
-                cell.id
-              );
-            }) }, row.id);
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: cn(
+                              isActionsCell ? "relative flex items-center justify-end" : "overflow-hidden text-center"
+                            ),
+                            children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                          }
+                        )
+                      ]
+                    },
+                    cell.id
+                  );
+                })
+              },
+              row.id
+            );
           }) })
         ] }),
-        !isLoading && table.getRowModel().rows.length === 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center", children: isFiltered ? /* @__PURE__ */ jsx(
+        (locked || !isLoading && table.getRowModel().rows.length === 0) && /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center", children: locked ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2 text-center", children: [
+          /* @__PURE__ */ jsx(PermissionLockIcon, { reason: tableGate.reason, className: "size-6" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: lockedTip(tableGate) })
+        ] }) : isFiltered ? /* @__PURE__ */ jsx(
           DataTableEmpty,
           {
             icon: emptyStateConfig?.icon,
@@ -22100,7 +22133,7 @@ function DataTable({
       ] })
     ] }),
     (mode !== "compact" || table.getRowCount() > (table.getState().pagination?.pageSize ?? 20)) && /* @__PURE__ */ jsx(DataTablePagination, { table }),
-    importExport && /* @__PURE__ */ jsx(
+    importExport && showImport && /* @__PURE__ */ jsx(
       DataTableImportDialog,
       {
         handle: importDialog,