@payglocal_ui/flux-ui 0.2.5 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payglocal_ui/flux-ui",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Flux UI primitives — inputs, fields, dialog, data table, charts, calendar, and more (Tailwind v4 + Radix).",
   "license": "MIT",
   "type": "module",

package/src/data-table.tsx

@@ -239,6 +239,16 @@ export function DataTable<T>({
     return seen === 0 ? base : `${base}__${seen}`;
   });
 
+  /**
+   * No rows to show. The width hints are dropped in this state: a grid whose
+   * columns carry minimums (via `colgroup` in fixed layout, or `cellClassName`
+   * in the others) would otherwise have its HEADER row alone force the table
+   * past the container and raise a horizontal scrollbar — over an empty region
+   * with nothing to scroll to. Headers still render, at their natural width, so
+   * the shape of the missing data is still legible.
+   */
+  const isEmpty = !isLoading && paginated.length === 0;
+
   const comfortable = density === "comfortable";
   const compact = density === "compact";
   const compactCellPad = compact
@@ -331,7 +341,7 @@ export function DataTable<T>({
             width: "100%",
           }}
         >
-          {tableLayout === "fixed" && (
+          {tableLayout === "fixed" && !isEmpty && (
             <colgroup>
               {hasExpand ? <col style={{ width: 40 }} /> : null}
               {columns.map((col) => (
@@ -376,7 +386,8 @@ export function DataTable<T>({
                       : col.align === "center"
                         ? "text-center"
                         : "text-left",
-                    col.cellClassName
+                    // Width hints live in `cellClassName`; see `isEmpty`.
+                    !isEmpty && col.cellClassName
                   )}
                 >
                   {col.header}

package/src/dropdown-menu.tsx

@@ -19,7 +19,9 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center gap-2 rounded-lg px-3 py-2.5 text-[15px] outline-none",
+      // Matches DropdownMenuItem: a submenu row sits in the same list as the
+      // plain rows, so it cannot be a different size from them.
+      "flex cursor-default select-none items-center gap-2 rounded-lg px-2.5 py-1.5 text-[13px] outline-none",
       "focus:bg-muted data-[state=open]:bg-muted",
       inset && "pl-8",
       className
@@ -94,7 +96,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-lg py-2 pl-8 pr-2 text-sm outline-none transition-colors",
+      // Matches DropdownMenuItem. `pl-8` stays: that gutter is the check /
+      // dot indicator's, not padding.
+      "relative flex cursor-default select-none items-center rounded-lg py-1.5 pl-8 pr-2.5 text-[13px] outline-none transition-colors",
       "focus:bg-muted focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
@@ -118,7 +122,9 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-lg py-2 pl-8 pr-2 text-sm outline-none transition-colors",
+      // Matches DropdownMenuItem. `pl-8` stays: that gutter is the check /
+      // dot indicator's, not padding.
+      "relative flex cursor-default select-none items-center rounded-lg py-1.5 pl-8 pr-2.5 text-[13px] outline-none transition-colors",
       "focus:bg-muted focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}