@payglocal_ui/flux-ui 0.3.1 → 0.3.2

package/dist/index.d.cts

@@ -961,7 +961,25 @@ type DataTableExpandable<T> = {
 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;

package/dist/index.d.ts

@@ -961,7 +961,25 @@ type DataTableExpandable<T> = {
 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;

package/dist/index.js

@@ -3786,6 +3786,32 @@ function SortIndicator({ order }) {
     }
   );
 }
+function parseMinMaxWidth(width) {
+  if (!width) return null;
+  const match = /^minmax\(\s*([^,]+?)\s*,\s*([^)]+?)\s*\)$/.exec(width.trim());
+  return match ? { min: match[1], max: match[2] } : null;
+}
+function isFlexUnit(value) {
+  return /^[\d.]*fr$/.test(value.trim());
+}
+function colWidthStyle(col) {
+  const parsed = parseMinMaxWidth(col.width);
+  if (!parsed) {
+    return {
+      width: col.width ?? (col.minWidth != null ? `${col.minWidth}px` : void 0),
+      minWidth: col.minWidth,
+      maxWidth: col.maxWidth
+    };
+  }
+  return {
+    width: isFlexUnit(parsed.max) ? void 0 : 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 : void 0
+  };
+}
 function DataTable({
   columns,
   data,
@@ -3932,17 +3958,7 @@ function DataTable({
                 children: [
                   tableLayout === "fixed" && !isEmpty && /* @__PURE__ */ jsxs31("colgroup", { children: [
                     hasExpand ? /* @__PURE__ */ jsx50("col", { style: { width: 40 } }) : null,
-                    columns.map((col) => /* @__PURE__ */ jsx50(
-                      "col",
-                      {
-                        style: {
-                          width: col.width ?? (col.minWidth != null ? `${col.minWidth}px` : void 0),
-                          minWidth: col.minWidth,
-                          maxWidth: col.maxWidth
-                        }
-                      },
-                      col.key
-                    )),
+                    columns.map((col) => /* @__PURE__ */ jsx50("col", { style: colWidthStyle(col) }, col.key)),
                     hasAction ? /* @__PURE__ */ jsx50("col", { style: { width: 0 } }) : null
                   ] }),
                   /* @__PURE__ */ jsx50(