next-data-kit 8.3.0 → 9.0.0

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 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/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",
         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
@@ -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();
@@ -1476,7 +1490,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 +1503,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,