@payglocal_ui/flux-ui 0.3.1 → 0.3.2

package/package.json

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

package/src/__tests__/data-table-column-width.test.tsx

@@ -0,0 +1,77 @@
+import { describe, expect, it, beforeAll } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { DataTable, type Column } from "../data-table";
+
+/**
+ * A column's `width` is documented to accept `minmax(min, max)`, but the
+ * `<col>` it lands on is a real table column, not a CSS Grid track —
+ * `width: minmax(...)` is invalid CSS and the whole declaration is dropped
+ * silently, leaving the column with no floor at all. On a narrow viewport
+ * that squeezed the column down to nothing, and the header's deliberately
+ * un-truncated text spilled into the next column's header — "Batch" and
+ * "Currency" rendering as "Batchency".
+ */
+
+beforeAll(() => {
+  if (!(globalThis as any).ResizeObserver) {
+    (globalThis as any).ResizeObserver = class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    };
+  }
+});
+
+interface Row {
+  id: string;
+  name: string;
+}
+
+const DATA: Row[] = [{ id: "1", name: "Row one" }];
+
+function columns(width: string): Column<Row>[] {
+  return [
+    { key: "id", header: "Batch", width, render: (r) => r.id },
+    { key: "name", header: "Currency", width: "84px", render: (r) => r.name },
+  ];
+}
+
+/** The `<col>` for a given column key, inside the fixed-layout `<colgroup>`. */
+function colFor(key: string, container: HTMLElement) {
+  const th = screen.getAllByRole("columnheader").find((h) => h.textContent === key);
+  expect(th).toBeTruthy();
+  const index = Array.from(th!.parentElement!.children).indexOf(th!);
+  const cols = container.querySelectorAll("colgroup col");
+  return cols[index] as HTMLTableColElement;
+}
+
+describe("DataTable minmax() column widths", () => {
+  it("gives a minmax(min, 1fr) column a real min-width instead of dropping it", () => {
+    const { container } = render(<DataTable columns={columns("minmax(250px, 1fr)")} data={DATA} rowKey={(r) => r.id} />);
+
+    const col = colFor("Batch", container);
+    // The floor survives as `min-width` — a legal CSS property — rather than
+    // being lost inside an illegal `width: minmax(...)` declaration.
+    expect(col.style.minWidth).toBe("250px");
+    // `1fr` is a Grid unit and means nothing as a table `width`; leaving it
+    // unset is what lets the column take whatever `table-layout: fixed`
+    // leaves over, the same as a grid track's `1fr` would.
+    expect(col.style.width).toBe("");
+  });
+
+  it("gives a minmax(min, max) column both bounds as real CSS", () => {
+    const { container } = render(<DataTable columns={columns("minmax(230px, 260px)")} data={DATA} rowKey={(r) => r.id} />);
+
+    const col = colFor("Batch", container);
+    expect(col.style.minWidth).toBe("230px");
+    expect(col.style.width).toBe("260px");
+  });
+
+  it("leaves a plain width untouched", () => {
+    const { container } = render(<DataTable columns={columns("180px")} data={DATA} rowKey={(r) => r.id} />);
+
+    const col = colFor("Batch", container);
+    expect(col.style.width).toBe("180px");
+    expect(col.style.minWidth).toBe("");
+  });
+});

package/src/data-table.tsx

@@ -177,7 +177,25 @@ export type DataTableExpandable<T> = {
 export type Column<T> = {
   key: string;
   header: ReactNode;
-  /** Table column width, e.g. `48px`, `18%`, `minmax(12rem,1fr)` (fixed layout) */
+  /**
+   * Table column width: `48px`, `18%`, or `minmax(12rem, 1fr)` for a floor
+   * that can still grow into whatever the other columns leave over.
+   *
+   * `minmax(min, max)` is translated rather than passed straight through: this
+   * is a real `<table>`/`<colgroup>`, and `minmax()` is a CSS Grid function
+   * that is not a legal `width` value outside a grid — the browser drops the
+   * whole declaration and the column gets no floor at all. `min` becomes the
+   * `<col>`'s `min-width`, and `max` becomes its `width` unless `max` is `1fr`
+   * (or any other flex unit), in which case no `width` is set and the column
+   * takes its share of whatever `table-layout: fixed` has left over, the same
+   * way a grid track's `1fr` would.
+   *
+   * `overflow-x-auto` on the table's own scroll container is what makes the
+   * floor mean something: once every column's minimum no longer fits, the
+   * table grows past its container and scrolls instead of every column
+   * shrinking under its `min-width` and the header text — deliberately not
+   * truncated, see the `<th>` render below — overlapping the column beside it.
+   */
   width?: string;
   minWidth?: number;
   maxWidth?: number;
@@ -425,6 +443,51 @@ function SortIndicator({ order }: { order: SortOrder | null }) {
   );
 }
 
+/**
+ * `minmax(A, B)` → its two halves, tolerant of whichever whitespace someone
+ * wrote it with. `null` for anything else, including a plain length like
+ * `"180px"` — that already IS a valid `width` and passes through untouched.
+ */
+function parseMinMaxWidth(width: string | undefined): { min: string; max: string } | null {
+  if (!width) return null;
+  const match = /^minmax\(\s*([^,]+?)\s*,\s*([^)]+?)\s*\)$/.exec(width.trim());
+  return match ? { min: match[1], max: match[2] } : null;
+}
+
+/** `1fr`, `2fr`, … — a Grid flex unit, meaningless as a table `width`. */
+function isFlexUnit(value: string): boolean {
+  return /^[\d.]*fr$/.test(value.trim());
+}
+
+/**
+ * A column's `width` as the three real CSS properties a `<col>` understands.
+ *
+ * Anything that is not a `minmax(...)` string passes through exactly as it did
+ * before this existed, so a plain `"48px"` or `"18%"` column is untouched.
+ */
+function colWidthStyle(col: Pick<Column<unknown>, "width" | "minWidth" | "maxWidth">): {
+  width: string | number | undefined;
+  minWidth: string | number | undefined;
+  maxWidth: string | number | undefined;
+} {
+  const parsed = parseMinMaxWidth(col.width);
+  if (!parsed) {
+    return {
+      width: col.width ?? (col.minWidth != null ? `${col.minWidth}px` : undefined),
+      minWidth: col.minWidth,
+      maxWidth: col.maxWidth,
+    };
+  }
+  return {
+    width: isFlexUnit(parsed.max) ? undefined : parsed.max,
+    // An explicit numeric `minWidth`/`maxWidth` alongside a `minmax()` string
+    // is not a combination any caller uses today; the string wins because it
+    // is the more specific of the two.
+    minWidth: parsed.min,
+    maxWidth: isFlexUnit(parsed.max) ? col.maxWidth : undefined,
+  };
+}
+
 export function DataTable<T>({
   columns,
   data,
@@ -706,14 +769,7 @@ export function DataTable<T>({
             <colgroup>
               {hasExpand ? <col style={{ width: 40 }} /> : null}
               {columns.map((col) => (
-                <col
-                  key={col.key}
-                  style={{
-                    width: col.width ?? (col.minWidth != null ? `${col.minWidth}px` : undefined),
-                    minWidth: col.minWidth,
-                    maxWidth: col.maxWidth,
-                  }}
-                />
+                <col key={col.key} style={colWidthStyle(col)} />
               ))}
               {/* Zero-width column: the action floats out of it as an overlay,
                   so the last data column stays flush and nothing trails it. */}