next-data-kit 8.3.1 → 9.0.1

package/dist/index.d.cts

@@ -422,7 +422,11 @@ type TDataKitFilterItem = TDataKitFilterItemText | TDataKitFilterItemSelect | TD
  * Bulk action definition for selectable tables
  */
 type TDataKitBulkAction<TItem> = {
+    type: 'SEPARATOR';
+} | {
+    type?: 'MENU';
     name: string;
+    icon?: React.ReactNode;
     function: (selectedItems: TItem[]) => Promise<[boolean, {
         deselectAll?: boolean;
         updatedItems?: TItem[];

package/dist/index.d.ts

@@ -422,7 +422,11 @@ type TDataKitFilterItem = TDataKitFilterItemText | TDataKitFilterItemSelect | TD
  * Bulk action definition for selectable tables
  */
 type TDataKitBulkAction<TItem> = {
+    type: 'SEPARATOR';
+} | {
+    type?: 'MENU';
     name: string;
+    icon?: React.ReactNode;
     function: (selectedItems: TItem[]) => Promise<[boolean, {
         deselectAll?: boolean;
         updatedItems?: TItem[];

package/dist/index.js

@@ -1,7 +1,7 @@
 import { z } from 'zod';
 import * as React2 from 'react';
 import React2__default, { createContext, useRef, useState, useCallback, useEffect, useContext, useMemo } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Filter, Loader2, MoreHorizontal, ArrowUp, ArrowDown, ChevronLeft, ChevronRight, ChevronDownIcon, CheckIcon, ChevronUpIcon } from 'lucide-react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -784,7 +784,7 @@ function TableRow({ className, ...props }) {
     {
       "data-slot": "table-row",
       className: cn(
-        "hover:bg-gray-50 dark:hover:bg-gray-900/50 hover:border-gray-200 dark:hover:border-gray-800 data-[state=selected]:bg-gray-50 dark:data-[state=selected]:bg-gray-900/50 border-b border-gray-100 dark:border-gray-900 transition-colors",
+        "hover:bg-gray-50 dark:hover:bg-gray-900 data-[state=selected]:bg-gray-50 dark:data-[state=selected]:bg-gray-900 border-b border-gray-100 dark:border-gray-800 transition-colors",
         className
       ),
       ...props
@@ -923,6 +923,19 @@ function DropdownMenuItem({
     }
   );
 }
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("bg-gray-100 dark:bg-gray-900 -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
 function Switch({
   className,
   ...props
@@ -932,7 +945,7 @@ function Switch({
     {
       "data-slot": "switch",
       className: cn(
-        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-zinc-200 focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-zinc-700 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
       ...props,
@@ -1313,12 +1326,13 @@ var DataKitRoot = (props) => {
     dataKit.actions.setSort(path, nextValue);
   }, [dataKit.sorts, dataKit.actions]);
   const handleSelectionAction = useCallback(async (actionKey) => {
-    if (!selectable?.actions?.[actionKey] || actionLoading) return;
+    const action2 = selectable?.actions?.[actionKey];
+    if (!action2 || action2.type === "SEPARATOR" || actionLoading) return;
     setActionLoading(actionKey);
     setActionsMenuOpen(false);
     try {
       const selectedItems = dataKit.items.filter((item) => selection.isSelected(item.id));
-      const result = await selectable.actions[actionKey].function(selectedItems);
+      const result = await action2.function(selectedItems);
       if (result[0]) {
         const data = result[1];
         if (data.deselectAll) selection.deselectAll();
@@ -1393,68 +1407,55 @@ var DataKitRoot = (props) => {
     selection.deselectAll();
   }, [dataKit.items.length]);
   return /* @__PURE__ */ jsxs("div", { ref: tableRef, className: `space-y-3 ${className ?? ""}`, children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: filters.length > 0 && /* @__PURE__ */ jsxs(Popover, { open: isFilterOpen, onOpenChange: setIsFilterOpen, children: [
-        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", children: [
-          /* @__PURE__ */ jsx(Filter, { className: "mr-1.5 size-4" }),
-          "Filters"
-        ] }) }),
-        /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: "w-80", container: overlayContainer, children: [
-          /* @__PURE__ */ jsx("div", { className: "grid gap-3", children: filters.map((f) => /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
-            /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: f.label }),
-            f.type === "TEXT" && /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "text",
-                className: "h-9 w-full rounded-md border bg-transparent px-3 text-sm outline-none focus:ring-2 focus:ring-ring",
-                placeholder: f.placeholder,
-                value: dataKit.filter[f.id] ?? "",
-                onChange: (e) => dataKit.actions.setFilter(f.id, e.target.value)
-              }
-            ),
-            f.type === "SELECT" && /* @__PURE__ */ jsxs(
-              Select,
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-2", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: filters.length > 0 && /* @__PURE__ */ jsxs(Popover, { open: isFilterOpen, onOpenChange: setIsFilterOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", children: [
+        /* @__PURE__ */ jsx(Filter, { className: "mr-1.5 size-4" }),
+        "Filters"
+      ] }) }),
+      /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: "w-80", container: overlayContainer, children: [
+        /* @__PURE__ */ jsx("div", { className: "grid gap-3", children: filters.map((f) => /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: f.label }),
+          f.type === "TEXT" && /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              className: "h-9 w-full rounded-md border bg-transparent px-3 text-sm outline-none focus:ring-2 focus:ring-ring",
+              placeholder: f.placeholder,
+              value: dataKit.filter[f.id] ?? "",
+              onChange: (e) => dataKit.actions.setFilter(f.id, e.target.value)
+            }
+          ),
+          f.type === "SELECT" && /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: String(dataKit.filter[f.id] || "__all__"),
+              onValueChange: (v) => dataKit.actions.setFilter(f.id, v === "__all__" ? "" : v),
+              children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                /* @__PURE__ */ jsxs(SelectContent, { container: overlayContainer, children: [
+                  /* @__PURE__ */ jsx(SelectItem, { value: "__all__", children: "All" }),
+                  f.dataset?.map((d) => /* @__PURE__ */ jsx(SelectItem, { value: d.id, children: d.label }, d.id))
+                ] })
+              ]
+            }
+          ),
+          f.type === "BOOLEAN" && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: f.placeholder ?? "Enable" }),
+            /* @__PURE__ */ jsx(
+              Switch,
               {
-                value: String(dataKit.filter[f.id] || "__all__"),
-                onValueChange: (v) => dataKit.actions.setFilter(f.id, v === "__all__" ? "" : v),
-                children: [
-                  /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-                  /* @__PURE__ */ jsxs(SelectContent, { container: overlayContainer, children: [
-                    /* @__PURE__ */ jsx(SelectItem, { value: "__all__", children: "All" }),
-                    f.dataset?.map((d) => /* @__PURE__ */ jsx(SelectItem, { value: d.id, children: d.label }, d.id))
-                  ] })
-                ]
+                checked: Boolean(dataKit.filter[f.id]),
+                onCheckedChange: (c) => dataKit.actions.setFilter(f.id, c)
               }
-            ),
-            f.type === "BOOLEAN" && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: f.placeholder ?? "Enable" }),
-              /* @__PURE__ */ jsx(
-                Switch,
-                {
-                  checked: Boolean(dataKit.filter[f.id]),
-                  onCheckedChange: (c) => dataKit.actions.setFilter(f.id, c)
-                }
-              )
-            ] })
-          ] }, f.id)) }),
-          /* @__PURE__ */ jsxs("div", { className: "mt-4 flex justify-between border-t pt-3", children: [
-            /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: handleResetFilters, children: "Reset" }),
-            /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => setIsFilterOpen(false), children: "Done" })
+            )
           ] })
-        ] })
-      ] }) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsxs("span", { className: "mr-2 text-sm text-muted-foreground", children: [
-          dataKit.items.length,
-          " of ",
-          dataKit.total
-        ] }),
-        /* @__PURE__ */ jsxs(Select, { value: String(dataKit.limit), onValueChange: (v) => dataKit.actions.setLimit(Number(v)), disabled: dataKit.state.isLoading, children: [
-          /* @__PURE__ */ jsx(SelectTrigger, { className: "w-16", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-          /* @__PURE__ */ jsx(SelectContent, { container: overlayContainer, children: limitOptions.map((v) => /* @__PURE__ */ jsx(SelectItem, { value: String(v), children: v }, v)) })
+        ] }, f.id)) }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-4 flex justify-between border-t pt-3", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: handleResetFilters, children: "Reset" }),
+          /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => setIsFilterOpen(false), children: "Done" })
         ] })
       ] })
-    ] }),
+    ] }) }) }),
     /* @__PURE__ */ jsx("div", { className: `overflow-hidden border border-gray-200 dark:border-gray-800 ${bordered === "rounded" ? "rounded-lg" : bordered ? "" : "rounded-lg"}`, children: /* @__PURE__ */ jsxs(Table, { children: [
       /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
         selectable?.enabled && /* @__PURE__ */ jsx(TableHead, { className: "w-12", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -1476,7 +1477,12 @@ var DataKitRoot = (props) => {
                 children: actionLoading ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" })
               }
             ) }),
-            /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", container: overlayContainer, children: Object.entries(selectable.actions).map(([key, action2]) => /* @__PURE__ */ jsx(DropdownMenuItem, { disabled: !!actionLoading, onSelect: () => handleSelectionAction(key), children: actionLoading === key ? "Working\u2026" : action2.name }, key)) })
+            /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", container: overlayContainer, children: Object.entries(selectable.actions).map(
+              ([key, action2]) => action2.type === "SEPARATOR" ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}, key) : /* @__PURE__ */ jsx(DropdownMenuItem, { disabled: !!actionLoading, onSelect: () => handleSelectionAction(key), children: actionLoading === key ? "Working\u2026" : /* @__PURE__ */ jsxs(Fragment, { children: [
+                action2.icon,
+                action2.name
+              ] }) }, key)
+            ) })
           ] })
         ] }) }),
         columns.map((col, idx) => /* @__PURE__ */ jsx(React2__default.Fragment, { children: col.sortable ? /* @__PURE__ */ jsx(TableHead, { ...React2__default.isValidElement(col.head) ? col.head.props : {}, children: /* @__PURE__ */ jsxs(
@@ -1484,7 +1490,7 @@ var DataKitRoot = (props) => {
           {
             variant: "ghost",
             size: "sm",
-            className: "-ml-3",
+            className: "-ml-4 h-auto py-0",
             onClick: () => handleSort(col.sortable.path),
             children: [
               React2__default.isValidElement(col.head) ? col.head.props.children : col.head,
@@ -1521,8 +1527,12 @@ var DataKitRoot = (props) => {
       }) })
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { className: "min-w-[140px]", children: [
-        /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs(Select, { value: String(dataKit.limit), onValueChange: (v) => dataKit.actions.setLimit(Number(v)), disabled: dataKit.state.isLoading, children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "w-16", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+          /* @__PURE__ */ jsx(SelectContent, { container: overlayContainer, children: limitOptions.map((v) => /* @__PURE__ */ jsx(SelectItem, { value: String(v), children: v }, v)) })
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground whitespace-nowrap", children: [
           "Page ",
           dataKit.page,
           " of ",
@@ -1533,8 +1543,7 @@ var DataKitRoot = (props) => {
           " selected"
         ] })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1" }),
-      /* @__PURE__ */ jsx("div", { className: "flex justify-end w-full", children: paginationType === "SIMPLE" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: paginationType === "SIMPLE" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -1714,16 +1723,13 @@ var DataKitInner = (props, ref) => {
                 ]
               }
             ),
-            f.type === "BOOLEAN" && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: f.placeholder ?? "Enable" }),
-              /* @__PURE__ */ jsx(
-                Switch,
-                {
-                  checked: Boolean(dataKit.filter[f.id]),
-                  onCheckedChange: (c) => dataKit.actions.setFilter(f.id, c)
-                }
-              )
-            ] })
+            f.type === "BOOLEAN" && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsx(
+              Switch,
+              {
+                checked: Boolean(dataKit.filter[f.id]),
+                onCheckedChange: (c) => dataKit.actions.setFilter(f.id, c)
+              }
+            ) })
           ] }, f.id)) }),
           /* @__PURE__ */ jsxs("div", { className: "mt-4 flex justify-between border-t pt-3", children: [
             /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: handleResetFilters, children: "Reset" }),