@jinaan/uikit 0.1.40 → 0.1.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinaan/uikit",
-  "version": "0.1.40",
+  "version": "0.1.42",
   "description": "Reusable React and Tailwind UI components for Jinaan projects.",
   "license": "UNLICENSED",
   "type": "module",

package/src/data-table.tsx

@@ -125,6 +125,8 @@ interface DataTableProps<T> {
   filters?: DataTableFilter<T>[];
   toolbarStart?: ReactNode;
   toolbarEnd?: ReactNode;
+  /** Show the "Columns" visibility/reorder picker in the toolbar. Default true. */
+  columnPicker?: boolean;
 
   tabs?: TabDef[];
   activeTab?: string;
@@ -211,6 +213,7 @@ export function DataTable<T>({
   filters,
   toolbarStart,
   toolbarEnd,
+  columnPicker = true,
   tabs,
   activeTab,
   onTabChange,
@@ -484,84 +487,86 @@ export function DataTable<T>({
             />
           )}
           {toolbarStart}
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant="secondary"
-                size="md"
-                leadingIcon={<ColumnsIcon />}
-                trailingIcon={<DropdownMenuChevron />}
-              >
-                Columns
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-54">
-              <DropdownMenuLabel className="text-[13px]">Active columns</DropdownMenuLabel>
-              {visibleColumns.map((c) => {
-                const pinned = isPinned(c);
-                return (
-                  <DropdownMenuCheckboxItem
-                    key={c.id}
-                    checked
-                    draggable={!pinned}
-                    onDragStart={(e) => {
-                      if (pinned) {
-                        e.preventDefault();
-                        return;
-                      }
-                      e.dataTransfer.effectAllowed = "move";
-                      e.dataTransfer.setData("text/plain", c.id);
-                      setDragId(c.id);
-                    }}
-                    onDragOver={(e) => {
-                      if (dragId) {
-                        e.preventDefault();
-                        moveBefore(dragId, c.id);
-                      }
-                    }}
-                    onDrop={(e) => e.preventDefault()}
-                    onDragEnd={() => setDragId(null)}
-                    onCheckedChange={(next) => {
-                      if (!next && !pinned) {
-                        setHidden((prev) => ({ ...prev, [c.id]: true }));
-                      }
-                    }}
-                    onSelect={(e) => e.preventDefault()}
-                    className="justify-between"
-                  >
-                    <span className="truncate">{c.header}</span>
-                    {pinned ? (
-                      <Lock className="size-3.5 shrink-0 text-subtle" aria-hidden />
-                    ) : (
-                      <DotsSixVertical
-                        aria-hidden
-                        className={cn(
-                          "size-3.5 shrink-0",
-                          dragId === c.id ? "text-primary" : "text-subtle",
-                        )}
-                      />
-                    )}
-                  </DropdownMenuCheckboxItem>
-                );
-              })}
-              {hiddenColumns.length > 0 ? (
-                <>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuLabel className="text-[13px]">Available columns</DropdownMenuLabel>
-                  {hiddenColumns.map((c) => (
+          {columnPicker && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="secondary"
+                  size="md"
+                  leadingIcon={<ColumnsIcon />}
+                  trailingIcon={<DropdownMenuChevron />}
+                >
+                  Columns
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-54">
+                <DropdownMenuLabel className="text-[13px]">Active columns</DropdownMenuLabel>
+                {visibleColumns.map((c) => {
+                  const pinned = isPinned(c);
+                  return (
                     <DropdownMenuCheckboxItem
                       key={c.id}
-                      checked={false}
-                      onCheckedChange={() => showColumn(c.id)}
+                      checked
+                      draggable={!pinned}
+                      onDragStart={(e) => {
+                        if (pinned) {
+                          e.preventDefault();
+                          return;
+                        }
+                        e.dataTransfer.effectAllowed = "move";
+                        e.dataTransfer.setData("text/plain", c.id);
+                        setDragId(c.id);
+                      }}
+                      onDragOver={(e) => {
+                        if (dragId) {
+                          e.preventDefault();
+                          moveBefore(dragId, c.id);
+                        }
+                      }}
+                      onDrop={(e) => e.preventDefault()}
+                      onDragEnd={() => setDragId(null)}
+                      onCheckedChange={(next) => {
+                        if (!next && !pinned) {
+                          setHidden((prev) => ({ ...prev, [c.id]: true }));
+                        }
+                      }}
                       onSelect={(e) => e.preventDefault()}
+                      className="justify-between"
                     >
-                      {c.header}
+                      <span className="truncate">{c.header}</span>
+                      {pinned ? (
+                        <Lock className="size-3.5 shrink-0 text-subtle" aria-hidden />
+                      ) : (
+                        <DotsSixVertical
+                          aria-hidden
+                          className={cn(
+                            "size-3.5 shrink-0",
+                            dragId === c.id ? "text-primary" : "text-subtle",
+                          )}
+                        />
+                      )}
                     </DropdownMenuCheckboxItem>
-                  ))}
-                </>
-              ) : null}
-            </DropdownMenuContent>
-          </DropdownMenu>
+                  );
+                })}
+                {hiddenColumns.length > 0 ? (
+                  <>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuLabel className="text-[13px]">Available columns</DropdownMenuLabel>
+                    {hiddenColumns.map((c) => (
+                      <DropdownMenuCheckboxItem
+                        key={c.id}
+                        checked={false}
+                        onCheckedChange={() => showColumn(c.id)}
+                        onSelect={(e) => e.preventDefault()}
+                      >
+                        {c.header}
+                      </DropdownMenuCheckboxItem>
+                    ))}
+                  </>
+                ) : null}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
           {filters && filters.length > 0 ? (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
@@ -894,7 +899,18 @@ export function DataTable<T>({
                           </TableCell>
                         ))}
                         {rowActions && (
-                          <TableCell className="w-44 px-4 text-right" onClick={(e) => e.stopPropagation()}>
+                          <TableCell
+                            className="w-44 px-4 text-right"
+                            onClick={(e) => {
+                              // Dead-zone fix: only swallow clicks on the
+                              // action controls themselves (menus, buttons);
+                              // the cell's padding stays part of the clickable
+                              // row.
+                              if ((e.target as HTMLElement).closest("button, a, input, [role='menuitem']")) {
+                                e.stopPropagation();
+                              }
+                            }}
+                          >
                             {rowActions(row)}
                           </TableCell>
                         )}