@algorithm-shift/design-system 1.2.973 → 1.2.975

package/dist/index.js

@@ -29381,7 +29381,7 @@ function LazyMultiSelectDropdown({
             {
               type: "text",
               placeholder: selectedOptions.length ? "" : placeholder,
-              className: "flex-1 min-w-[60px] p-1 outline-none",
+              className: "flex-1 min-w-[60px] p-1 outline-none text-xs disabled:cursor-not-allowed",
               value: isOpen ? searchTerm : "",
               onChange: handleSearch,
               readOnly,
@@ -29631,7 +29631,7 @@ var sanitizeValue = (val) => {
   }
   return String(val);
 };
-var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers = {}, format3, customFormatters = {}) => {
+var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers = {}, format3, customFormatters = {}, info) => {
   const formattedValue = valueFormatter(value, format3, customFormatters);
   const rowValue = row?.[rendererProps?.rowField];
   switch (renderer) {
@@ -29754,6 +29754,16 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
         i
       )) });
     }
+    case "checkbox":
+      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        "input",
+        {
+          type: "checkbox",
+          checked: info.row.getIsSelected(),
+          disabled: !info.row.getCanSelect(),
+          onChange: info.row.getToggleSelectedHandler()
+        }
+      );
     /* -------------------- ADVANCED -------------------- */
     case "custom": {
       const CustomRenderer = customRenderers[rendererProps?.customRendererId] || customRenderers[rendererProps?.rendererId];
@@ -29793,9 +29803,18 @@ var useDynamicColumns = (config, customRenderers = {}, customFormatters = {}) =>
       }
       return sanitizeValue(row[accessorKey]);
     };
+    const existingMeta = col.meta || {};
+    const additional = {};
+    if (col.size && col.size > 0) {
+      Object.assign(additional, { size: col.size });
+    } else {
+      Object.assign(additional, { size: 180, minSize: 0, maxSize: Number.MAX_SAFE_INTEGER });
+      Object.assign(existingMeta, { className: "w-full" });
+    }
     return columnHelper.accessor(accessorFn, {
       ...col,
-      size: col.size && col.size > 0 ? col.size : 180,
+      ...additional,
+      // size: (col.size && col.size > 0) ? col.size : 180,
       id: col.id ?? accessorKey,
       header: col.header,
       cell: (info) => {
@@ -29808,12 +29827,18 @@ var useDynamicColumns = (config, customRenderers = {}, customFormatters = {}) =>
           row,
           customRenderers,
           col.format,
-          customFormatters
+          customFormatters,
+          info
         );
       },
       enableSorting: col.enableSorting,
       enableColumnFilter: col.enableColumnFilter,
-      meta: col.meta
+      // Merge existing meta to preserve headerLabel and other properties
+      meta: {
+        ...existingMeta,
+        // Preserve headerLabel if it exists
+        ...existingMeta.headerLabel ? { headerLabel: existingMeta.headerLabel } : {}
+      }
     });
   });
 };
@@ -29836,14 +29861,40 @@ function DataTable({
   globalSearch,
   onCellClick,
   onDeleteRow,
-  rowActions
+  rowActions,
+  enableRowSelection = false,
+  getRowSelection
 }) {
   const [columnFilters, setColumnFilters] = React9.useState([]);
   const [columnVisibility, setColumnVisibility] = React9.useState({});
   const [manualSort, setManualSort] = React9.useState(null);
   const [searchTerm, setSearchTerm] = React9.useState("");
   const tableData = Array.isArray(data) ? data : [];
-  const dynamicCols = useDynamicColumns({ columns });
+  const finalCols = [...columns];
+  if (enableRowSelection) {
+    finalCols.unshift({
+      id: "__select__",
+      renderer: "checkbox",
+      size: 40,
+      header: ({ table: table2 }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        "input",
+        {
+          type: "checkbox",
+          checked: table2.getIsAllRowsSelected(),
+          onChange: table2.getToggleAllRowsSelectedHandler()
+        }
+      ),
+      meta: {
+        cellClass: "",
+        cellStyle: {},
+        headerLabel: "Select"
+      },
+      enableSorting: false,
+      enableColumnFilter: false
+    });
+  }
+  const dynamicCols = useDynamicColumns({ columns: finalCols, enableRowSelection });
+  const [rowSelection, setRowSelection] = React9.useState({});
   const [localPageSize, setLocalPageSize] = React9.useState(pageSize);
   const table = (0, import_react_table2.useReactTable)({
     data: tableData,
@@ -29851,6 +29902,7 @@ function DataTable({
     state: {
       columnFilters,
       columnVisibility,
+      rowSelection,
       ...paginationMode === "server" ? {
         pagination: {
           pageIndex: controlledPageIndex ?? 0,
@@ -29858,6 +29910,15 @@ function DataTable({
         }
       } : {}
     },
+    enableRowSelection: !!enableRowSelection,
+    onRowSelectionChange: (updater) => {
+      setRowSelection((old) => {
+        const newState = typeof updater === "function" ? updater(old) : updater;
+        const selectedData = Object.keys(newState).filter((key) => newState[key]).map((rowId) => tableData[Number(rowId)]);
+        getRowSelection?.(selectedData);
+        return newState;
+      });
+    },
     onColumnFiltersChange: setColumnFilters,
     onColumnVisibilityChange: setColumnVisibility,
     getCoreRowModel: (0, import_react_table2.getCoreRowModel)(),