@jinaan/uikit 0.1.23 → 0.1.25

package/package.json

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

package/src/button.tsx

@@ -102,10 +102,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         {asChild ? (
           children
         ) : (
-          <span className="relative inline-flex items-center justify-center gap-[var(--control-gap)]">
+          <span className="relative inline-flex w-full items-center justify-[inherit] gap-[var(--control-gap)]">
             <span
               className={cn(
-                "inline-flex items-center justify-center gap-[var(--control-gap)] transition-[opacity,translate] duration-150 ease-out motion-reduce:transition-none",
+                "inline-flex w-full items-center justify-[inherit] gap-[var(--control-gap)] transition-[opacity,translate] duration-150 ease-out motion-reduce:transition-none",
                 loading && "translate-y-2 opacity-0",
               )}
               aria-hidden={loading || undefined}

package/src/data-table.tsx

@@ -6,7 +6,6 @@ import {
   DotsSixVertical,
   FunnelSimple,
   Lock,
-  LockOpen,
   MagnifyingGlass,
   WarningCircle,
   X,
@@ -215,7 +214,6 @@ export function DataTable<T>({
   );
   // Column order and runtime pins are per-mount, like `hidden`.
   const [order, setOrder] = useState<string[] | null>(null);
-  const [locked, setLocked] = useState<string[]>([]);
   const [dragId, setDragId] = useState<string | null>(null);
   const [sort, setSort] = useState<{ id: string; dir: "asc" | "desc" } | null>(
     defaultSort ?? null,
@@ -233,7 +231,7 @@ export function DataTable<T>({
   const visibleColumns = orderedColumns.filter((c) => !hidden[c.id]);
   const hiddenColumns = orderedColumns.filter((c) => hidden[c.id] && !c.required);
   // ponytail: mouse-only drag reorder; add keyboard move (Alt+Arrow) if asked.
-  const isPinned = (c: Column<T>) => c.required || locked.includes(c.id);
+  const isPinned = (c: Column<T>) => Boolean(c.required);
   const columnAt = (id: string) => byId.get(id);
 
   const moveBefore = (draggedId: string, targetId: string) => {
@@ -250,11 +248,6 @@ export function DataTable<T>({
     // Re-showing appends at the end of the current order.
     setOrder((prev) => (prev && prev.includes(id) ? prev : [...(prev ?? propOrder), id]));
   };
-
-  const togglePin = (id: string) =>
-    setLocked((prev) =>
-      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id],
-    );
   const activeFilters = (filters ?? []).filter((f) => activeFilterIds.includes(f.id));
   const filterSignature = (filters ?? [])
     .map((f) => `${f.id}:${f.value.join(",")}`)
@@ -421,6 +414,10 @@ export function DataTable<T>({
                     checked
                     draggable={!pinned}
                     onDragStart={(e) => {
+                      if (pinned) {
+                        e.preventDefault();
+                        return;
+                      }
                       e.dataTransfer.effectAllowed = "move";
                       e.dataTransfer.setData("text/plain", c.id);
                       setDragId(c.id);
@@ -441,40 +438,17 @@ export function DataTable<T>({
                     onSelect={(e) => e.preventDefault()}
                     className="justify-between"
                   >
-                    <span className="flex min-w-0 items-center gap-2">
+                    <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",
-                          pinned
-                            ? "text-subtle/60"
-                            : dragId === c.id
-                              ? "text-primary"
-                              : "text-subtle",
+                          dragId === c.id ? "text-primary" : "text-subtle",
                         )}
                       />
-                      <span className="truncate">{c.header}</span>
-                    </span>
-                    {c.required ? (
-                      <Lock className="size-3.5 shrink-0 text-subtle" aria-hidden />
-                    ) : (
-                      <button
-                        type="button"
-                        aria-label={pinned ? `Unlock ${c.header}` : `Lock ${c.header}`}
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          e.preventDefault();
-                          togglePin(c.id);
-                        }}
-                        onPointerDown={(e) => e.stopPropagation()}
-                        className="-m-1 rounded p-1 text-subtle transition-colors hover:bg-(--menu-highlight) hover:text-fg"
-                      >
-                        {pinned ? (
-                          <LockOpen className="size-3.5" aria-hidden />
-                        ) : (
-                          <Lock className="size-3.5" aria-hidden />
-                        )}
-                      </button>
                     )}
                   </DropdownMenuCheckboxItem>
                 );