@krak-stack/registry 0.1.10 → 0.1.11

package/dist/components/ui/data-table.d.ts

@@ -143,6 +143,7 @@ export type DataTableMessages = PaginationMessages & {
     listOthers: (count: number) => string;
     selectAllRows: string;
     selectRow: string;
+    selected: string;
 };
 export type DataTableMessageOverrides = Partial<DataTableMessages>;
 export declare const dataTableMessages: (overrides?: DataTableMessageOverrides) => {
@@ -177,6 +178,7 @@ export declare const dataTableMessages: (overrides?: DataTableMessageOverrides)
     listOthers: (count: number) => string;
     selectAllRows: string;
     selectRow: string;
+    selected: string;
 } | {
     pageSize: string;
     results: (count: number) => string;
@@ -209,6 +211,7 @@ export declare const dataTableMessages: (overrides?: DataTableMessageOverrides)
     listOthers: (count: number) => string;
     selectAllRows: string;
     selectRow: string;
+    selected: string;
 };
 export interface DataTableGroupingField<TData> {
     id: string;
@@ -253,6 +256,14 @@ export type DataTableRowAction<TData> = {
     onClick: (data: TData) => void;
     visible?: (data: TData) => boolean;
 };
+export type DataTableBulkAction<TData> = {
+    id?: string;
+    name: string;
+    icon?: ReactNode;
+    variant?: "default" | "destructive" | undefined;
+    onClick: (rows: TData[]) => void;
+    visible?: (rows: TData[]) => boolean;
+};
 export type DataTableGroupAction = {
     name: string;
     icon?: ReactNode;
@@ -285,6 +296,10 @@ export interface DataTableColumnVisibilityFeature {
     default?: ColumnVisibilityState;
 }
 export interface DataTableSelectionFeature<TData> {
+    bulkActions?: false | {
+        label?: string;
+        items: readonly DataTableBulkAction<TData>[];
+    };
     getRowId: (row: TData) => string;
     isRowSelectable?: (row: TData) => boolean;
     onSelectionChange?: (rows: TData[]) => void;

package/dist/components/ui/data-table.js

@@ -1964,7 +1964,8 @@ var messages3 = {
     resizeColumn: (column) => `Resize ${column} column`,
     listOthers: (count) => count === 1 ? "and 1 other" : `and ${count} others`,
     selectAllRows: "Select all rows on this page",
-    selectRow: "Select row"
+    selectRow: "Select row",
+    selected: "Selected"
   },
   fr: {
     ...paginationMessages("fr"),
@@ -1990,7 +1991,8 @@ var messages3 = {
     resizeColumn: (column) => `Redimensionner la colonne ${column}`,
     listOthers: (count) => count === 1 ? "et 1 autre" : `et ${count} autres`,
     selectAllRows: "Sélectionner toutes les lignes de cette page",
-    selectRow: "Sélectionner la ligne"
+    selectRow: "Sélectionner la ligne",
+    selected: "Sélectionnés"
   }
 };
 var dataTableMessages = (overrides) => ({
@@ -2086,6 +2088,59 @@ var DataTableRowActions = ({
     ]
   });
 };
+var DataTableBulkActions = ({
+  actions,
+  label,
+  selectedLabel: selectedLabel2,
+  rows
+}) => {
+  const visibleActions = actions.filter((action) => !action.visible || action.visible(rows));
+  if (visibleActions.length === 0)
+    return null;
+  return /* @__PURE__ */ jsxs8(DropdownMenu, {
+    children: [
+      /* @__PURE__ */ jsx17(DropdownMenuTrigger, {
+        render: /* @__PURE__ */ jsxs8(Button, {
+          className: "h-9",
+          size: "sm",
+          variant: "default",
+          children: [
+            selectedLabel2,
+            /* @__PURE__ */ jsx17(Badge, {
+              className: "bg-primary-foreground/15 text-primary-foreground min-w-5 justify-center rounded-full border-0 px-1.5 tabular-nums",
+              variant: "secondary",
+              children: rows.length
+            }),
+            /* @__PURE__ */ jsx17(ChevronRight2, {
+              className: "rotate-90"
+            })
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsx17(DropdownMenuContent, {
+        align: "start",
+        className: "w-max max-w-56",
+        children: /* @__PURE__ */ jsxs8(DropdownMenuGroup, {
+          children: [
+            /* @__PURE__ */ jsx17(DropdownMenuLabel, {
+              children: label
+            }),
+            /* @__PURE__ */ jsx17(DropdownMenuSeparator, {}),
+            visibleActions.map((action) => /* @__PURE__ */ jsxs8(DropdownMenuItem, {
+              className: "whitespace-nowrap",
+              onClick: () => action.onClick(rows),
+              ...action.variant ? { variant: action.variant } : {},
+              children: [
+                action.icon,
+                action.name
+              ]
+            }, action.id ?? action.name))
+          ]
+        })
+      })
+    ]
+  });
+};
 var buildGroupedSections = (rows, fields, depth = 0, parentKey = "") => {
   if (fields.length === 0) {
     return [];
@@ -2640,6 +2695,7 @@ var exportTableToJson = (table, rows, fileName = "data.json") => {
 };
 var DataTableToolbar = ({
   activeGrouping,
+  bulkActions,
   exportBaseName,
   exportRows,
   grouping,
@@ -2647,6 +2703,7 @@ var DataTableToolbar = ({
   onRefresh,
   onToggleGrouping,
   onViewChange,
+  selectedRows,
   showColumnVisibility,
   showExport,
   showGallery,
@@ -2657,7 +2714,7 @@ var DataTableToolbar = ({
 }) => {
   const [refreshSpinCount, setRefreshSpinCount] = useState(0);
   const [searchInput, setSearchInput] = useState(table.state.globalFilter);
-  const hasToolbar = Boolean(showSearch || grouping?.fields.length || showSorting || showGallery || showColumnVisibility || onRefresh || showExport);
+  const hasToolbar = Boolean(showSearch || grouping?.fields.length || showSorting || showGallery || showColumnVisibility || onRefresh || showExport || selectedRows.length > 0 && bulkActions?.items.length);
   useEffect2(() => {
     setSearchInput(table.state.globalFilter);
   }, [table.state.globalFilter]);
@@ -2702,6 +2759,12 @@ var DataTableToolbar = ({
         /* @__PURE__ */ jsxs8("div", {
           className: "-m-1 flex items-center gap-2 overflow-x-auto p-1",
           children: [
+            bulkActions && selectedRows.length > 0 ? /* @__PURE__ */ jsx17(DataTableBulkActions, {
+              actions: bulkActions.items,
+              label: bulkActions.label ?? labels2.actions,
+              rows: selectedRows,
+              selectedLabel: labels2.selected
+            }) : null,
             grouping?.fields.length ? /* @__PURE__ */ jsxs8(DropdownMenu, {
               children: [
                 /* @__PURE__ */ jsx17(DropdownMenuTrigger, {
@@ -2871,6 +2934,7 @@ function DataTable({
   const showSorting = features?.sorting ?? true;
   const selectionFeature = features?.selection === false ? undefined : features?.selection;
   const selectable = !!selectionFeature;
+  const bulkActions = selectionFeature?.bulkActions === false ? undefined : selectionFeature?.bulkActions;
   const isServerMode = paginationFeature !== false && paginationFeature.mode === "server";
   const serverRowCount = isServerMode ? paginationFeature.rowCount : undefined;
   const location = useRouterState({
@@ -3035,6 +3099,7 @@ function DataTable({
   const activeGroupingFields = useMemo(() => activeGrouping.map((groupId) => grouping?.fields.find((field) => field.id === groupId)).filter((field) => !!field), [activeGrouping, grouping]);
   const hasActiveGrouping = activeGroupingFields.length > 0;
   const filteredRows = table.getPrePaginatedRowModel().rows;
+  const selectedRows = selectionFeature ? data.filter((row) => rowSelection[selectionFeature.getRowId(row)]) : [];
   const exportRows = exportFeature && exportFeature.scope === "filteredRows" ? filteredRows : table.getRowModel().rows;
   const bodyRows = hasActiveGrouping ? filteredRows : table.getRowModel().rows;
   const sortableRowIds = bodyRows.map((row) => getSortableRowId(row.id));
@@ -3193,6 +3258,7 @@ function DataTable({
     children: [
       /* @__PURE__ */ jsx17(DataTableToolbar, {
         activeGrouping,
+        bulkActions,
         exportBaseName,
         exportRows,
         grouping,
@@ -3200,6 +3266,7 @@ function DataTable({
         onRefresh,
         onToggleGrouping: toggleGroupingField,
         onViewChange: setView,
+        selectedRows,
         showColumnVisibility,
         showExport,
         showGallery,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krak-stack/registry",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "description": "Tree-shakable KrakStack components and Effect services.",
   "license": "MIT",
   "repository": {